WordPress 学習⑤　テンプレート階層

どうも、にわじゅん（@niwajun_blog）です。

今回はWordPressのテンプレート階層についての学習記録です。

WordPressにはサイトを表示させた時にトップページや各記事ページ、お問合せページなど、どんなページにアクセスしているかによって表示させるファイルを切り替えています。

WordPressのテンプレート階層とは

アクセスしているページによってどんなファイルを参照するかを表したのが、テンプレート階層図です。テンプレート階層図の一部を抜粋してみました。『テンプレート階層』でググってみると一覧がわかるので調べてみて下さい。（実際にはもうちょっと細かく設定されてますが簡単に表現したらこんな感じです。）

サイトフロントページ（TOPページ）には『front-page.php』→『home.php』→『index.php』と左から順に並んでいて、左の方が優先度が高くなっています。それぞれのファイルをテンプレートファイルと呼びます。

例えば、TOPページにアクセスした場合にテーマフォルダ内に

といった感じで左から順にファイルがあるか参照していき、存在しなければ次を参照するようになっています。

個別ページも同様に左から順に参照していき、ファイルが存在した場合にそのファイルを使用してブラウザに表示します。

ここで注目する点が、TOPページと個別ページ共に一番右側がindex.phpになっている所です。もし、front-page.phpやsingle.phpテンプレートファイルが存在しなかったらこんな感じで

TOPページにアクセスした場合と個別ページにアクセスした場合も同じindex.phpをする事になり、TOPページと個別ページが同じレイアウトのデザインでブラウザに表示されてしまいます。

TOPページも個別ページも同じレイアウト構成でOKならそれでも良いんですが、ほとんどのサイトでは別々のレイアウトになると思います。

なので、TOPページにはfront-page.phpテンプレートファイル、個別ページにはsingle.phpテンプレートファイルをそれぞれ用意して、アクセスしたページ毎で表示させるページを切り替えるのがWordPressのテンプレート階層を使用したファイル構成です。

テンプレートファイルを使って、TOPページと個別ページを作成する

では、前回までの学習で作成してきた自作テーマにTOPページ用と個別ページ用のテンプレートファイルを作ってみます。

エディタで『front-page.php』と『single.php』ファイルをそれぞれ作成します。

TOPページを作成する

front-page.phpファイルにはthe_titleテンプレートタグを使って記事のタイトルを表示させ、<a>タグで個別ページへのリンクをさせています。

他にもif文やwhile文などの記述がありますが、これはループと呼ばれていて、the_title();を使用する時には必ず囲わなければいけない記述なので、決まり文句みないな感じですね。（細かい説明は今回は省略してます）

TOPページであることが分かるように『TOPページです』と書きました。

個別ページを作成する

続いて個別ページのsingle.phpファイルです。

the_title();とthe_content();テンプレートタグを使ってタイトルと文章を表示させています。

こちらも個別ページであることが分かるように『個別投稿ページです』と書きました。

テンプレートファイルとそれぞれのページの記述ができたので、WordPressのダッシュボードからサイトを表示させてみます。

TOPページへアクセスしたのがこちら。『TOPページです』、『Hello world!』のタイトルが表示されているのでfront-page.phpファイルを使用してサイトを表示しています。タイトルには個別ページへのリンクが貼ってあるのでクリックすると個別ページへ飛びます。

個別ページがこちら。『個別ページです』やタイトル、文章が表示されているので、single.phpファイルを使用して表示しています。

これでTOPページ用、個別ページ用のファイルが出来ました。冒頭でも触れましたが、テンプレート階層はもっと細かくなっていて、他にもお問合せなどの固定ページ用、アーカイブ用などの種類があります。

作成するサイトのファイル構成によって使用するテンプレートファイルは違ってくるとは思いますが、基本的な考えは今回紹介した感じになってます。

今回はここまでです。