WordPressでサイト制作をしていると、ヘッダーやフッターをカスタマイズしたいのに、どのテンプレートファイルを編集すればよいのか分からなくて、困ることはありませんか？今回は、そんな悩みをスッキリ解決する方法をご紹介します。
ファイルを見つける方法
テーマのテンプレートファイルには、ページや投稿を表示するためのHTMLコードが含まれています。この仕組みを活用して、カスタマイズしたいHTML要素を特定し、それを基に検索キーワードを決めて、テンプレートファイル内を検索する方法を、私はよく使います。一般的なキーワードでは検索結果が多くなりすぎるため、できるだけユニークなものを選ぶことがポイントです。
- 開発者ツールを使って、カスタマイズしたいHTML要素を特定する
- 特定したHTML要素のID名またはクラス名をキーワードとして、テンプレートファイル内を検索する
例えば、Lightningテーマのヘッダーをカスタマイズしたい場合、目当てのHTML要素は以下のdiv要素です。このdiv要素のID「site-header-container」をキーワードとして検索します。
<div id="site-header-container" class="site-header-container container">・・・</div>ファイル内を検索する方法
テンプレートファイル内を検索する方法はいくつかあります。
1. GitHubのCode検索機能を利用する
無料のテーマはコードが一般公開されているため、GitHubのCode検索機能を使って検索できます。ただし、この機能を利用するにはGitHubにサインアップ（無料登録）する必要があります。
例えば、Lightningテーマの場合、以下のように検索すると、該当するコードを見つけやすくなります。
repo:vektor-inc/lightning site-header-container2. VS Codeの検索機能を活用する
VS Codeの検索機能を使う場合は、「ソースから目当ての場所を探し当てる」を参考にしてください。
フックを使ったカスタマイズ
カスタマイズを行う際は、フックが用意されているか確認し、それらを活用することをおすすめします。
コードの記述場所
フックを使ってカスタマイズする場合、PHPコードの記述場所としては、子テーマのfunctions.phpファイルやCode Snippetsなどのプラグインが挙げられます。プラグインを利用すると、テーマを変更してもカスタマイズが維持されます。
なぜフックを使うのか
テンプレートファイルを子テーマにコピーして編集する手法は、親テーマがバージョンアップされても、子テーマに複製したファイルには変更が反映されないため、推奨できません。
テーマのアップデートにはセキュリティに関する修正も含まれるため、アップデートしないという選択肢は現実的ではありません。
この問題を解決するために、WordPressにはフックという仕組みが用意されています。また、最近ではサイトエディター機能が追加され、サイト全体をブロックで構築できるようになっています。ただし、サイトエディターはブロックテーマ限定の機能です。
まとめ
開発者ツールでカスタマイズしたいHTML要素を特定し、GitHubやVS Codeの検索機能でキーワード検索すると、目当てのテンプレートファイルを簡単に見つけられます。カスタマイズの効率を上げられるよう、みなさんが実践している検索方法やコツをコメントで共有していただけると嬉しいです！
