このレッスンでは、header.php
やsidebar.php
、footer.php
といった多くのページで共通して利用される部分をテンプレートファイルとしてまとめて利用する方法を解説します。
動画
レッスンの準備
このレッスンでは、上記リポジトリのwp-lesson-14
というディレクトリにあるファイルを使って学習を進めていきます。
WordPressのルートディレクトリにあるwp-content
の中のthemes
にwp-lesson-14
ディレクトリを設置しましょう。
共通部分をテンプレートファイルとしてまとめる
ウェブサイトのそれぞれの部分をテンプレートファイルにまとめることができます。代表的なテンプレートは以下のようなものがあります。
- header.php
- sidebar.php
- footer.php
これらを読み込む方法として、
get_header()
get_sidebar()
get_footer()
と記述することができます。
index.phpを分解してテンプレートファイル化する
index.php
を開きます。
まず、ここではindex.php
を、
- ヘッダー部分(
header.php
) - サイドバー部分(
sidebar.php
) - フッター部分(
footer.php
) - コンテンツ部分(
index.php
)
に分けていきます。header.php
sidebar.php
footer.php
の空ファイルをあらかじめ作っておきましょう。
header.php
index.php
の冒頭から35行目あたりの<!-- end NAVIGATION -->
というコメントあたりまでを、header.php
に移動させます。そして、もとの部分にget_header()
を記述します。
sidebar.php
<aside class="l-sidebar">〜</aside>
部分をsidebar.php
に移動させます。そして、その部分にget_sidebar()
を記述します。
footer.php
<footer class="l-site-footer p-site-footer">〜</html>
部分をfooter.php
に移動させます。そして、その部分にget_footer()
を記述します。
Show Current Templateを活用する
Show Current Template プラグインを利用し、テンプレートが読み込まれているかどうかを確認しながら進めてみましょう。
このレッスンの関連動画一覧を見る