WordPressテーマの元となるテンプレートファイルを知ろう

記事公開日:2017.11.22

最終更新日:2018.03.20

505 PV

WordPressテーマの元となるテンプレートファイルを知ろう

WordPressのどのテーマにも、必ず必要なテンプレートファイル。テンプレートファイルとは、Webページを表示させるためのPHPファイルのことで、いくつかのテンプレートファイルが集まり、ひとつのテーマが構成されています。

どのテーマにも必ず必要なテンプレートファイル

必須のテンプレートファイルは、下記の3つのみですが、テンプレートファイルを増やすことで、より自由度の高いテーマが出来上がります。

index.php

トップページを表示するためのテンプレートファイル

single.php

個別投稿記事を表示するためのテンプレートファイル

style.css

スタイルシート

 

次の章では、WordPressの代表的なテーマである「Twenty Fifteen」を例にして、必須の3つ以外のテンプレートファイルを紹介していきます。

必須ではないが、重要なテンプレートファイル

では、早速「Twenty Fifteen」のテーマフォルダの中を覗いてみましょう。

テーマフォルダの中

先程、WordPressのテーマには最低3つのテンプレートファイルがあればいいと書きましたが、実際によく使われているテーマは、こんなにもたくさんのテンプレートファイルから出来ているんですね・・・。

header.php、sidebar.php、footer.php

それぞれヘッダー・サイドバー・フッターを出力するテンプレートファイル。WordPressでは、ひとつのテンプレートファイルに他のテンプレートファイルを読み込むことが出来ます。例えば、index.phpにheader.phpを読み込む場合は、index.phpのheader.phpを読み込みたい場所にこのテンプレートタグを記述して読み込みます。

わたしが初めてWordPressに触れた時、ひとつ疑問に思ったことが有ります。 なぜ、わざわざ1つのページをindex.phpとheader.phpとfooter.phpとsidebar.phpに分ける必要があるのか、と。

それは、WordPressでのサイト構築やメンテナンスの際に、作業を効率化するために必要不可欠な仕様なのです。 コーポレートサイトを例にして説明すると、トップページの他に会社概要ページや新着情報ページ、Q&Aページなど、いくつかのページがありますよね。それぞれのページで別々のテンプレートファイルを使っていたとします。

例)

  • 会社概要ページ→page.php
  • 新着情報ページ→archive.php
  • Q&Aページ→archive-faq.php

もしも会社のロゴが新しくなってフッターとヘッダーのロゴを変更する必要がある場合、それぞれのテンプレートファイルにヘッダー・フッターが直接記述されていたとしたら、index.php+3つのテンプレートファイルのヘッダーとフッターの記述部分を書き換えなくてはなりません。

上記例の場合では、計4つのテンプレートファイルの書き換えで済みますが、もっと大きなサイトの場合を考えたら、すごく手間がかかりそうですよね。こんな時、ヘッダーやフッターを機械の部品のようページから取り出して、ひとつのテンプレートファイルとして管理しておけば、ひとつのテンプレートファイルを修正するだけで済みます。

この考え方、どこかで身に覚えがある・・・と記憶を辿っていて気づきました。PhotoshopでWebデザインをするとき、topデザインが固まったら共通部分(ヘッダーやナビなど)のみを別ファイルで保存して、下層ページではリンクで配置するのですが、もしも全ページデザインした後になってから「ナビのデザインを変えてほしい」と言われた時に、共通部分のみのpsdを編集すれば、自動ですべてのページの共通部分が修正されるのと同じ原理ですね。

single.php

投稿の個別ページを表示させるテンプレートファイル。投稿の個別ページとは、今あなたが読んでいるこのページのことです。single.php は、header.phpのような部品的なテンプレートファイルではなく、ページそのものを表示させるためのテンプレートファイルです。

single.phpが読み込まれて個別投稿ページが表示される

弊社Bigmacのサイトで言うと、topページ(index.php)のスタッフ厳選おすすめ情報の個別投稿記事のアイキャッチをクリックすると、single.phpが読み込まれて個別投稿ページが表示されるわけです。

page.php

固定ページ表示させるテンプレートファイル。 複数の固定ページで使いまわし出来ます。もし、固定ページごとにデザインが大きく異なる場合は、自分で固定ページ用テンプレートファイルを追加作成する事ができます。

下記のPHPブロックを、新規作成したPHPファイルの頭に記述するだけで、新しい固定ページ用のテンプレートファイルが出来上がります。

例 about.php

余談ですが、一時的にトップページを別のデザインにしたい(例えば、サイトのメンテナンス時に「只今メンテナンス中です」などと表示したい)とき、通常であればindex.phpが読み込まれるところを固定ページに変更することが出来ます。手順は、管理画面の設定タブ内「表示設定」 から、「フロントページの表示」の部分の設定を変更するだけです。

archive.php

投稿一覧ページを表示させるテンプレートファイル。

functions.php

テーマをカスタマイズしたいときに編集する、関数ファイル。 記述を誤ると、サイトの表示はもちろんのこと、管理画面にさえ入れなくなってしまうので、編集する際はバックアップをとるなど注意して編集してください。

comments.php

コメント欄を表示するテンプレートファイル。 single.php(個別投稿ページ)から読み込まれる

search.php

検索結果を一覧表示するテンプレートファイル。 検索フォームが設置されているテンプレートファイルから読み込まれる。

404.php

ページが見つからなかったときに表示される404エラーページのテンプレートファイル。 404.phpがない場合、index.phpに飛ばされます。

 

以上で、WordPressのどのテーマにも入っているであろうテンプレートファイルは一通り紹介しました。 その他のテンプレートファイルがどのページで何を表示するために必要なのかは、下記のドキュメントで確認できます。

WordPress Codex ー テンプレートファイルの概要

たくさんあるテンプレートファイルですが、実はページごとにどのテンプレートファイルが優先的に読み込まれるのか、順番が決まっています。その順番は、テンプレート階層という考えのもとに決まります。

次回は、テンプレート階層について、詳しく解説していきます。

このエントリーをはてなブックマークに追加