すべてのページで使うヘッダーとフッターは、テンプレートパーツへ分けます。CSSやJavaScriptはHTMLへ固定パスを書くのではなく、WordPressの読み込み機能へ登録します。
共通部分を分割する目的
共通部分を分割し、CSSとJavaScriptをWordPressの仕組みで読み込むと管理しやすくなります。
すべてのテンプレートに同じヘッダーとフッターを書くと、メニューを変更するたびに複数ファイルを修正する必要があります。共通部分をheader.phpとfooter.phpへ分け、各テンプレートから読み込みます。
記事カードやパンくずリストなど、ページの一部分を再利用するときはテンプレートパーツへ分けます。分割はファイル数を増やすことが目的ではなく、同じ構造を1か所で管理するために行います。
共通部分を分ける
次の画像は、「共通部分を分ける」で扱うコードや構成をブラウザで表示した結果です。
my-original-theme/
├── header.php
├── footer.php
├── functions.php
├── index.php
└── assets/
├── css/style.css
└── js/main.jsテンプレートから呼び出す
次の図では、「テンプレートから呼び出す」の仕組みや関係を確認できます。
<?php get_header(); ?>
<main>
<!-- ページごとの内容 -->
</main>
<?php get_footer(); ?>CSSとJavaScriptを正しく読み込む
テーマのCSSやJavaScriptは、テンプレートへ固定のlinkやscriptを直接書くのではなく、functions.phpから読み込みます。WordPressへ登録することで、依存関係や読み込み順を管理できます。
- CSSは
wp_enqueue_style()で登録する - JavaScriptは
wp_enqueue_script()で登録する - テーマ内URLは
get_theme_file_uri()などで取得する - ライブラリへ依存する場合は依存関係を指定する
- 更新したファイルがキャッシュされないようバージョンを管理する
functions.phpでファイルを登録する
次の図では、「functions.phpでファイルを登録する」の仕組みや関係を確認できます。
<?php
function my_theme_enqueue_assets() {
wp_enqueue_style(
'my-theme-style',
get_theme_file_uri('/assets/css/style.css'),
array(),
wp_get_theme()->get('Version')
);
wp_enqueue_script(
'my-theme-script',
get_theme_file_uri('/assets/js/main.js'),
array(),
wp_get_theme()->get('Version'),
true
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_assets');固定URLを書かない
ローカル環境のドメインやテーマフォルダー名をHTMLへ直接書くと、公開先へ移したときにURLが壊れます。サイトURL、ホームURL、テーマ内ファイルのURLはWordPressの関数から取得します。
画像が記事内容として管理画面から変更されるなら、テーマフォルダーへ固定せずメディアライブラリで管理します。テーマのロゴや背景など、デザインの一部として固定する画像とは保存場所を分けます。
読み込み結果を開発者ツールで確認する
- ページのHTMLソースでCSSとJavaScriptのURLを確認する
- Networkで対象ファイルのステータスが200か確認する
- Consoleに読み込みエラーやJavaScriptエラーがないか確認する
- CSSを変更し、ブラウザを更新して反映されるか確認する
- 別の固定ページと投稿ページでも共通部分が表示されるか確認する
見た目が崩れたときは、分割前後のHTML構造を比較します。開始タグをheader.phpへ置き、対応する終了タグだけを別ファイルへ移すと、構造を追いにくくなるため注意してください。