共通部分をテンプレートファイルとしてまとめる – [14]WordPressテーマ制作レッスン

  • ブックマーク
  • -
    コピー

このレッスンでは、header.phpsidebar.phpfooter.phpといった多くのページで共通して利用される部分をテンプレートファイルとしてまとめて利用する方法を解説します。

動画

レッスンの準備

このレッスンでは、上記リポジトリのwp-lesson-14というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemeswp-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 プラグインを利用し、テンプレートが読み込まれているかどうかを確認しながら進めてみましょう。

このレッスンの関連動画一覧を見る