サイト検索
検索
サイトメニュー
Menu
RTB SoftLab ラテベ ソフトラボ (ラテベラボ)
私の知っているソフトの操作を解りやすく、解説していきます。
サイト検索
検索
サイトメニュー
Menu

投稿日:2021年10月20日

更新日:2021年10月5日

ECサイト (通販サイト) Welcart Basicのカスタマイズ 初めてのPHPについて

さて、やっと、本格的にテーマのカズタマイズを行うことになります。
ここからが、私の得意な分野になります。
テーマのカスタマイズを行うのは、やはりプログラム(php)をつつくしかありません。
前回までを見ていない方は、下記のリンクにて参照が出来ますので、ご覧下さい。

設定名(メニュー名)設定完了
ECサイト概要
インスール
(システム設定 )
( 基本設定 )
( 配送設定 )
(投稿 ➡ カテゴリ)
(新規商品追加)
キャンペーンの設定
(営業日設定)
(基本設定)・ショップ設定
(メール設定)
(外観 ➡ テーマ)
(外観 ➡ ウィジェット)
子テーマの作成「カスタマイズ準備」
始めてのカスタマイズ
CSSカスタマイズの勘所
運用編(購入~会員登録)
今までで設定を行った機能(メニュー)
ECサイトのおすすめ

プログラムを修正するということは、サイトが動作しなくなる可能性が高くなります。

なので、何回も書きますが、必ず、バックアップを必ず取っていただくようにお願いします。

プログラムを修正することになりますので、出来ればデバッグ環境があれば非常に重宝します。
まずは、ここからは解説したいと思っています。

皆様方の参考に出来たら、嬉しく思います♪
もし参考になったら、広告を1回でいいので、クリックして下さい♪

ecショップ( Welcart Basic )をカスタマイズした実例サイトです。

開発環境の整理

私の開発環境は下記になります。

  • Windows10
  • Web関係
    • Apache24
    • Php7.3.12
  • データベース
    • MariaDB(MySqlみたいなものです)

基本は、これだけになります。

WindowsのWebサーバ構築や MariaDBのインストール等は、Google検索で沢山出てくると思いますので、
今回は、これらの環境が出来ている所からの明記になります。

もし、要望が沢山あれば、別途で記事を書くかもしれません(笑)。

ということで、後はエディタを何にするかになります。
結論から言いますと、Visual Studio Code(VsCode)を使用して開発を行っています。

eclipseも有名ですが、とにかく思い!されに統合環境なので、大きくなりすぎている。
なので、 今は、 VsCode だけで行っています。
その経緯は、Javaのエディタとして過去に書いておりますので、そちらを参照願います。

Visual Studio Code(VsCode)のPHP開発準備

では、VSODEをPHP開発用に変えていきます。

拡張機能(エクステンション)のインストール

ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 拡張機能
ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 拡張機能

拡張機能は、上記の2つだけです(笑)
まだいいのがあるかも知れませんが、とりあえず、2つで行っています。

デバッグ環境(ブレークポイント)の停止確認

PHPのデバッグ・ブレークが出来るようにします。
これを行うことによって、変数の中身も見ることが出来ます。

ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 ブレイクポイント設置
ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 ブレイクポイント設置

とりあえず、Welcart_basic>header.phpにブレイクポイント(F9で可能)を設置しました。
このテーマは、親データとなります。今は、親テーマで問題ありません。

デバッグの実行環境の生成。

表示メニューの実行を行います。
(いつもは、ショートカットを使っているので、ここにあることは知りませんでした(笑))

ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 デバッグの実行環境の生成
ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 デバッグの実行環境の生成

実行とデバッグボタンではなく、launch.jsonの作成を行います。
この時、多くの人は、プロジェクトを選びますので、プロジェクトを選びましたが、私の場合は、ワークスペースで管理しておりまので、いつもは、ワークスペースで行います。

ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 launch.jsonの作成
ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 launch.jsonの作成

ポートの変更

デバッグ用のコードは自動で入力されます。

ただ、私の環境では、ポートを変更しなければなりませんので、ポート9003を9000に変更(一括置換)しました。

ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 launch.jsonポート変更
ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 launch.jsonポート変更

デバッグは、PhpのXdebugを使用しますので、php.iniに記載がないものは、デバッガーが動きません。
整理していませんが、長年使っている、php.iniの Xdebug 部分になります。


; ■ php_xdebugを追加
; zend_extension=php_xdebug-2.9.5-7.3-vc15-x86_64.dll
zend_extension="C:\php\Php7.3.12\ext\php_xdebug-2.9.5-7.3-vc15-x86_64.dll" 

; xdebug.remote_enable = 1
; xdebug.remote_autostart = 1

xdebug.profiler_append = 0
xdebug.profiler_enable = 1
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "C:\php\Php7.3.12\xdebug\tmp"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_handler = "dbgp"
xdebug.remote_host = "127.0.0.1"
xdebug.remote_port = 9000
xdebug.auto_trace = 1
xdebug.trace_output_dir = "C:\php\Php7.3.12\xdebug\trace"
xdebug.idekey = "phpstorm"


xdebug.var_display_max_children = 128
xdebug.var_display_max_data = 1024
xdebug.var_display_max_depth = 10

ポートを9000にしていましたね!(笑)

launch.json の保存を行ってデバッガーのテストを行います。

デバッガー( Xdebug )のテスト

右上のを押して、ブラウザのリドロー(F5)を行って、ブレークしたら、デバッガーはきちんと動いています。

ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 デバッガーテスト
ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 デバッガーテスト

右側に出ているのが、PHPの変数になります。右はPHPのプログラムになります。

これで、カスタマイズがスムーズに出来るようになります♪

Welcart Basic テーマのカスタマイズ

さて、カスタマイズしていきます♪

イメージとしては、ヘッダーが寂しいので、ヘッダーに画像を追加して、下記のようなヘッドにしたいと思います。

ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 ヘッダーカスタマイズ内容
ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 ヘッダーカスタマイズ内容

header.phpを変更する前に!

子テーマを作成する時にお話ししたと思いますが、親テーマを修正した場合は、アップデートなどで、折角カスタマイズした内容がアップデートによって消されるかも知れません。

子テーマの作成方法は、以前書いていおりますので、こちらから参照願います。

ということで、 親テーマのheader.phpを子テーマのディレクトリにコピーします。

さらに、imagesのフォルダーを作成し、その中に、サイトバナーの画像を入れておきます。

ECサイトWelcart Basic カスタマイズ 子テーマのフォルダとファイル構成
ECサイトWelcart Basic カスタマイズ 子テーマのフォルダとファイル構成

親テーマと子テーマのheader.phpについて

さて、親テーマと子テーマの両方に同じ header.php 存在します。

では、どのように動くのでしょうか?
実際にデバッグして見れば、直ぐに解ります。

まず、両方にプレイクを設定します。
そしてブラウザにて、リドロー(F5)!
こちらが結果になります。
(上が親テーマの header.php 。下が子テーマの header.php。 )

ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 デバッガーテスト
ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 デバッガーテスト

そうです。親テーマの header.php は、一切、動くことが無くなります。
これは、覚えていて下さいね♪

ヘッダー画像作成は!

ちょっと、話は変わりますが、ヘッダー画像の作成は、イラストレータやフォトショップを使っていません!

簡単な画像であれば、「Canva」というソフトを使用しています。
無料で使えて、パソコンやスマホでも使えます。
下記から登録すれば、お互いにポイントが付与されますので、ポイントが貯まれば、有料の画像なども使用する事が出来ます。

使用してみたい方は、こちらから登録して見て下さい。

Canvaは、こちらから!(https://www.canva.com/join/2113038)

使い方については、こちらになります。

サムナはプロのデザインで!

子テーマのカスタマイズ( header.php )

ブラウザを使って、画像の挿入場所を把握します。

ブラウザの開発モード(デベロッパーモード)を使って、画像の挿入場所を把握します。
(ブラウザの開発モード(デベロッパーモード) が解らない方は、記事にしていますので、こちらを参照願います。

ECサイトWelcart Basic カスタマイズ ヘッダ画像の挿入場所調査
ECサイトWelcart Basic カスタマイズ ヘッダ画像の挿入場所調査

上を見る限りでは、下記がベターと感じます。

  • class=”site-description”の下
  • h1タグの上(class=”site-title”)

上記をVSCodeを使って、場所を見つけます。

VSCodeを使って場所を特定するのは、凄く簡単でした。
site-descriptionがクラスで指定していましたので、すぐわかります。

ECサイトWelcart Basic カスタマイズ ヘッダ画像の挿入プログラム変更
ECサイトWelcart Basic カスタマイズ ヘッダ画像の挿入プログラム変更

黄色矢印の間に入れればいいということです。
黄色枠のロジックは、カスタマイズロジックになります。(もう、追加しちゃいました(笑))

これで、カスタマイズは完了になります。

内容の確認

勿論テストは必要になります。

ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 ヘッダーカスタマイズ内容
ECサイトWelcart Basic カスタマイズ VsCodeの開発環境 ヘッダーカスタマイズ内容

問題ありませんね♪

スマホモードでも確認

ECサイトWelcart Basic カスタマイズ スマホモードでの確認 画像が縮小されていない
ECサイトWelcart Basic カスタマイズ スマホモードでの確認 画像が縮小されていない

マル部分をONにすることで、スマホモードでのイメージ表示が出来ます。もう一度押すとOFFとなり、パソコンモードになります。

ヘッダーの画像が縮小されていませんね!。まぁそんなもんです(笑)

引続き、開発モードを使って、画像の縮小が出来るようにCSSを追加します。

ECサイトWelcart Basic カスタマイズ スマホモードでのCSS追加テスト
ECサイトWelcart Basic カスタマイズ スマホモードでのCSS追加テスト

イメージタグについて幅100%を指定して、上位タグのいっぱいで表示しなさいにしました。
これで、可変的な幅になります。

勿論、パソコン側の表示も確認しましたので、これでOKです。

最終的なカスタマイズは!

最終的には、下記のようなプログラムになりました。

 ECサイトWelcart Basic カスタマイズ 最終カスタマイズ内容
ECサイトWelcart Basic カスタマイズ 最終カスタマイズ内容

style.cssで変更も考えましたが、このくらいであれば、インラインCSSでいいかと思い、1行追加しております。

コードの説明

            <?php
                $url_home   =   home_url();
                $url_banner =   get_theme_file_uri();
                $url_banner .=  '/images/banner.jpg';
                $html       =   '';
                $html       .=  '<div id="head_site_banaer">'       ."\n";
                $html       .=      '<a heaf="'  .$url_home         .'">';
                $html       .=          '<img src="' .$url_banner   .'"';
                $html       .=              ' alt=""';
                $html       .=              ' style="width: 100%;"';
                $html       .=          '>';
                $html       .=      '</a>';
                $html       .=  '</div>'                            ."\n";
            ?>
			<p class="site-description"><?php bloginfo( 'description' ); ?></p>
            <?php echo($html);    ?>

コードの説明いりますよね!

  • home_url()
    • トップ画面のURLを返します。WordPressの関数になります。
  • get_theme_file_uri()
    • テーマのURLを返します。WordPressの関数になります。
  • $url_bannerは、バナーのURKを作成しています。
  • $htmlにhtmlタグを追加しながら、HTMLを作成しています。
  • 最後にecho($html)にて、htmlの内容を出力しています。

簡単ですよね♪

まとめ

これで、PHPの編集なども出来る環境が揃いましたので、カスタマイズがいろいろ出来るようになります。

今回のカスタマイズでは、ヘッダーにイメージを固定で追加しましたが、私が作成した、ECサイトの子テーマでは、動的に画像を変えるようにしています。
(テーマのカスタマイズ設定にて)

ECサイトWelcart Basic カスタマイズ ラテベラボの子テーマ テーマオプション
ECサイトWelcart Basic カスタマイズ ラテベラボの子テーマ テーマオプション

上記もどこかで説明が出来ればと思っています。

必ず、バックバックを取りながら行っていただくようにお願いします。

設定名(メニュー名)設定完了
ECサイト概要
インスール
(システム設定 )
( 基本設定 )
( 配送設定 )
(投稿 ➡ カテゴリ)
(新規商品追加)
キャンペーンの設定
(営業日設定)
(基本設定)・ショップ設定
(メール設定)
(外観 ➡ テーマ)
(外観 ➡ ウィジェット)
子テーマの作成「カスタマイズ準備」
始めてのカスタマイズ
CSSカスタマイズの勘所
運用編(購入~会員登録)
運用編(会員登録後~商品購入)
始めてのPHPでのカスタマイズ
今までで設定を行った機能(メニュー)

なるべく、解りやすく明記していきたいと思っていますが、解りにくく思われた方は、ご了承願います。
又、あくまで私的なことも多くなってくるかと思われますので、そちらもご了承願います。
さらに、間違っていることもありますので、修正等は、申し訳ございませんが、自己責任でお願い申し上げます。

頑張って、これからも書いていきたいと思っていますので、どうぞよろしくお願いいたします。

最後までお読みくださいまして、ありがとうございます。
もし参考になったら、広告を1回でいいので、クリックして下さい♪

RTB カレンダー

25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
通販サイト(ECサイト)デモへ
ラテベラボブログへ
ナノシスへ

RTBアーカイブ(旧 Widget 版)

RTB ポストランキング (旧)

RTBアーカイブ(旧 Widget 版)