「実践編のチャレンジ課題①をLightningを使って作成した場合のヘッダーのカスタマイズ方法」について、受講生からいただいた質問に答える形で進めていきます。同じような疑問を抱えている方々にとって有益な情報をお届けできれば嬉しいです。
PHPファイルを見つける方法
PHPファイルの見つけ方は一つだけではありません。以下は一例として参考にしてください。
- テーマのPHPファイルを検索する前に、開発者ツールでカスタマイズしたいHTML要素を特定する
- 特定したHTML要素のID名またはクラス名を使用して、テーマのフォルダー内にあるファイルを検索する
例えば、ヘッダーロゴ画像の右側に電話番号などを追加したい場合、目当てのHTML要素は次のdiv要素です。このdiv要素のID「site-header-container」を使用して検索します。
<div id="site-header-container" class="site-header-container container">・・・</div>検索方法はいくつかあります。
- PCにテーマのフォルダーをダウンロードするのが面倒な場合は、GitHubのCode検索機能を利用できます。repo:vektor-inc/lightning site-header-container
- VS Codeの検索機能も活用できます。楠講師が「ソースから目当ての場所を探し当てる」で解説しています。
- 「lightning site-header-container」などのキーワードでネット検索するのも良いでしょう。
- Lightning G3 Pro Unitを使用している場合、要素を追加できるアクションフックの場所は［外観｜カスタマイズ｜Lightning 機能設定｜開発ツール］で確認できます。
カスタマイズしたいPHPファイルは見つかりましたでしょうか？site-header.phpにはフックが用意されているので、それらを活用してカスタマイズすることをお勧めします。
また、Lightning では Font Awesome が利用できます。使い方はとても簡単です。無料のアイコンを検索し、HTMLまたはSVGのコードをコピペするだけです。
PHPコードを記述する場所
PHPコードは「子テーマのfunctions.php」または「プラグイン」のいずれかに記述します。
プラグインを使用するメリットは、テーマの変更に対応できることです。テーマに特化した機能であれば、functions.phpで問題ありません。
まとめ
慣れるまでには少し時間がかかるかもしれませんが、試行錯誤の過程で確実にスキルが身につきます。今回紹介した方法を参考に、ぜひチャレンジしてみてください。
