WordPressサイトの表示に関わるテンプレートファイルは、テーマディレクトリにWordPressが認識する標準のファイル名を付けることで、Webページの表示にあったファイルを自動で使用します。
このテンプレートファイルの仕組みによって、どの名前を付けて保存したらどのページの表示に使われるか明確になり、表示を変更したいページの編集が容易にできるのです。
例えば、WordPressの個別ページの表示に少し変更を加えたい場合は、個別ページの表示に使われるテンプレートファイル、page.php
を編集すればいいと簡単にわかります。
テンプレートファイルにコードを書いていると、同じコードを別ファイルにも書いていることに、ふと気付くことがあります。そのコードを変更するとなると別ファイルにも同じ編集をしなくてはならない、不毛な作業に時間を費やすことになるかもしれません。
そんな不毛な作業に時間を奪われないためのテンプレートファイル管理方法を紹介します。
目次
テンプレートファイルは大きく分けて2種類
WordPressが自動で認識するテンプレートファイルは同じフォルダ内に並んでいると分かりにくいかもしれませんが、以下の2種類に分けることができます。
- ベーステンプレートファイル
- パーツテンプレートファイル
ベースとパーツとは私が勝手に名づけて読んでいます。
ベーステンプレートファイル
ベーステンプレートファイルはWebページの表示の土台となるファイルで、それぞれの表示させたいページに対応したファイルです。
主に、以下のファイル名を付けたファイルがそれにあたります。
- home.php
- index.php
- single.php
- page.php
- front-page.php
- category.php
- archive.php
- tag.php
- taxonomy.php
- author.php
- date.php
- search.php
- 404.php
- attachment.php
- …
このテンプレートファイルにHTMLやPHPコードを書けば、対応したWebページの表示に使われます。このファイルにコードを書くだけでWebサイトは作れてしまうでしょう。
例えば、page.php
やsingle.php
に以下のようなコードを書くとそれぞれの対応したWebページに表示させることができます。
page.php
<!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="utf-8"> <title><?php wp_title( '|', true, 'right' ); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header> <!-- headerです。 --> </header> <main> <!-- 個別ページです。 --> </main> <aside> <!-- sidebarです。 --> </aside> <footer> <!-- footerです。 --> </footer> <?php wp_footer(); ?> </body> </html>
single.php
<!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="utf-8"> <title><?php wp_title( '|', true, 'right' ); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header> <!-- headerです。 --> </header> <main> <!-- 投稿ページです。 --> </main> <aside> <!-- sidebarです。 --> </aside> <footer> <!-- footerです。 --> </footer> <?php wp_footer(); ?> </body> </html>
ここで問題が発生します。上記のコードを見るとそれぞれのページでheaderやfoooter、sidebarなどは共通して同じコードです。
それぞれheaderもfooterもsidebarも全く違うコードを書いている場合はいいでしょうが、上記ののように同じになると非効率だと思いませんか?ファイルサイズも肥大化しますし、変更を加える時それぞれのファイルを編集しなくてはいけません。
パーツテンプレートファイル
ベーステンプレートファイルだけでは、重複コードができて編集する時もそれぞれ手を加えるとなると気が重くなることでしょう。非常にメンテナンス性が良くないです。
そこでパーツテンプレートファイルが活躍します。
このテンプレートファイルは、Webページに直接対応するものではなく、ベーステンプレートファイル内の共通する部分を部品化して、ベーステンプレートファイルにテンプレートタグを書いて読み込んで使います。
このパーツテンプレートファイルはテンプレートタグとセットで覚えておきましょう。
WordPress標準では、以下のファイル名を付けたファイルをそれに対応したテンプレートタグで使うことができます。
ファイル名 | テンプレートタグ |
---|---|
header.php | get_header() |
sidebar.php | get_sidebar() |
footer.php | get_footer() |
searchform.php | get_search_form() |
comments.php | comments_template() |
{name}.php | get_template_part() |
上記のように比較的共通したコードを書きそうな、header、sidebar、footerなどはWordPress標準で認識できるテンプレートタグが準備されています。
パーツテンプレートファイルとテンプレートタグの基本的な使い方
部品化したテンプレートファイルは以下のようにして使う事ができます。header部分を切り分けて部品化した場合を例にしています。
header.php
<!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="utf-8"> <title><?php wp_title( '|', true, 'right' ); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header> <!-- headerです。 --> </header>
page.php
<?php get_header(); ?> <main> <!-- 個別ページです。 --> </main> <aside> <!-- sidebarです。 --> </aside> <footer> <!-- footerです。 --> </footer> <?php wp_footer(); ?> </body> </html>
single.php
<?php get_header(); ?> <main> <!-- 投稿ページです。 --> </main> <aside> <!-- sidebarです。 --> </aside> <footer> <!-- footerです。 --> </footer> <?php wp_footer(); ?> </body> </html>
これで、page.php
とsingle.php
のベーステンプレートファイルのheader部分がすっきりします。ファイルサイズも減り、編集時はheader.php
を編集するだけで、page.php
とsingle.php
に反映されるようになります。
get_header()
get_sidebar()
get_footer()
get_search_form()
comments_template()
も基本的な使い方はベーステンプレートファイルにテンプレートタグを書くだけで同じです。
それぞれのタグ(関数)はパラメータをとることができ、さらに管理がしやすくなります。
get_template_part()
はオリジナルのパーツテンプレートファイルを作成した時に使える便利なタグで、パラメータが必須です。これについては後述します。
ここまでは基本的なWordPressテーマ作成で覚えておきたいことです。
それぞれパーツとなったファイルを読み込むテンプレートタグには、パラメータがあって以下の3つは同じように使うことができます。
get_header()
get_sidebar()
get_footer()
この3つにはオプションのパラメータ$name
を指定できるので、これを使うと管理が非常に便利になります。
パラメータを使った読み込み方法
page.php
とsingle.php
それぞれ違ったテンプレートファイルを読み込みたい場合パラメータを以下のように使うことができます。
page.php
<?php get_header('page'); ?> <main> <!-- 個別ページです。 --> </main> <?php get_sidebar('page'); ?> <?php get_footer('page'); ?>
上記のコードでは、header-page.php
sidebar-page.php
footer-page.php
のファイル名の付いたテンプレートファイルを読み込んでいます。
single.php
<?php get_header('single'); ?> <main> <!-- 投稿ページです。 --> </main> <?php get_sidebar('single'); ?> <?php get_footer('single'); ?>
上記のコードでは、header-single.php
sidebar-single.php
footer-single.php
のファイル名の付いたテンプレートファイルを読み込んでいます。
headerなど以外に共通したコードができるときは?
WordPressテーマを作る時、header sidebar footerは比較的共通したコードを書くことになると思いますが、実際にコードを書いていくとそれ以外にも同じコードを書かなければいけない場面があります。
そんな時でもWordPressは柔軟に対応できる優れたテンプレートタグがあります。
それが、get_template_part()
です。
管理法(2) オリジナルのパーツテンプレートファイルを作る
get_template_part()
はget_header()
などと、ほぼ同じ用に使うことができます。
get_template_part()とget_header()などの違い
get_template_part()
とget_header()
get_footer()
get_sidebar()
などの違いについて解説します。
get_header()
あらかじめ決められたファイル名を付けることで読み込んでくれます。この場合、ファイル名がheader.php
のファイルを読み込みます。パラメータ$name
を使った場合は、header-{$name}.php
を読み込みます。get_footer()
get_sidebar()
も同様です。
get_template_part()
あらかじめ決められたファイル名を持たないので、どんなファイル名にも柔軟に対応できます。例えば、content.php
というパーツテンプレートファイルをテーマディレクトリに作ったとします。
決められたファイル名がないので、get_template_part()
にファイル名を教えてあげないといけません。そのため1つ目のパラメータが必須となります。
例えば、ページのメインコンテンツを部品化したcontent.php
を作った場合、読み込むには以下のように使います。
page.php
<?php get_header(); get_template_part('content'); get_sidebar(); get_footer();
get_header()
など同じ用にパラメータ$name
も使うことができます。この場合は以下のように使います。
page.php
<?php get_header(); get_template_part('content', 'page'); get_sidebar(); get_footer();
このコードではcontent-page.php
を読み込んでいます。
get_template_part()
を使えば、あらゆるファイル名を付けたテンプレートファイルを読み込んで使うことができます。
テーマディレクトリ内がごっちゃになる?
新たな疑問が浮かんでくるのではないでしょうか?コードを分けて管理することができるようになりましたが、テーマディレクトリ内はベーステンプレートファイルとパーツテンプレートファイルがごっちゃになってファイルがいっぱい並んでいるのではないかと
そんな問題もget_template_part()
は解決してくれます。get_template_part()
はテーマディレクトリ直下のファイルだけでなく、1つ目のパラメータにファイルのパスを指定し、ファイルを読み込むこともできます。
これを利用すれば新しいフォルダを作ってその中にテンプレートファイルを置くことが可能です。
管理法(3) テンプレートファイルをフォルダ分けする
テーマディレクトリにベーステンプレートファイルとパーツテンプレートファイルが一緒に並んでいると見分けがつかなくなりますよね。区別するためにフォルダ分けしたいと思います。
今回はパーツテンプレートファイルを別フォルダで管理してしまいましょう。
フォルダで管理する手順
ベースとパーツとなるファイルを分けて管理する手順は、以下の4ステップです。
- パーツテンプレートファイルを保存するファイルを作る
- 共通するコードを部品化しテンプレートファイルを作る
- テンプレートファイルをフォルダに移動する
- ベーステンプレートファイルに読み込むコードを書く
パーツテンプレートファイルを保存するファイルを作る
テーマディレクトリに新しいフォルダを作ります。フォルダ名はわかりやすい名前を付けておきましょう。以下に3つ例を上げておきます。
- templates
- parts
- views
私の場合は、分かりやすくそのままtemplatesと名前を付けて作成しています。今回はtemplatesというフォルダを作成したとして話を進めます。
共通するコードを部品化しテンプレートファイルを作る
共通する部分を切り出してテンプレートファイルを作ります。私が作成したテーマの1つは以下のようなファイルに分けています。
ファイル名 | 内容 |
---|---|
header.php | Webページのheader部分 |
sidebar.php | Webページのsidebar部分 |
footer.php | Webページのfooter部分 |
head.php | header.phpのheadタグ部分 |
content.php | ホームやカテゴリーのcontent一覧部分 |
content-page.php | 個別ページのcontent部分 |
content-single.php | 投稿ページのcontent部分 |
entry-meta.php | 投稿のメタ情報、更新日、著者、カテゴリーなど |
searchfrom.php | 検索フォームのタグ |
comments.php | コメント一覧やコメント投稿フォーム |
テンプレートファイルをフォルダに移動する
パーツテンプレートファイルにしたファイルを先ほど作成したtemplatesフォルダに移動させるのですが、ここで1つ注意があります。
テンプレートタグの get_header()
get_sidebar()
get_footer()
は残念なことにテーマディレクトリ直下のファイルしか認識できないということです。
なので今回は header.php
sidebar.php
footer.php
は残して、それ以外のファイルをtemplatesフォルダに移動させます。
ベーステンプレートファイルに読み込むコードを書く
読み込むコードを書いて表示させてみましょう。例としてsingle.php
に読み込むコードを書いてみます。
single.php
<?php get_header(); // my_get_header(); get_search_form(); get_template_part('templates/content', 'single'); comments_template('/templates/comments.php'); get_sidebar(); // my_get_sidebar(); get_footer(); // my_get_footer();
上記のコードはまだ完璧ではありません。get_template_part()
comments_template()
にはパラメータにファイルの場所を指定して読み込む事ができますが、get_search_form
には読み込むファイルを指定するパラメータがありません。
get_search_form()
には、検索フォームを出力するか返すかのオプションのパラメータ$echo
しか持っていません。ではどうやって別フォルダに移したsearchform.php
を読み込めばいいのか?
get_search_form()
の書かれたコアファイルを見てみましょう。先ほどのget_header()
と同じファイルに書かれています。
function get_search_form( $echo = true ) { // ... 省略 ... $result = apply_filters( 'get_search_form', $form ); if ( null === $result ) $result = $form; if ( $echo ) echo $result; else return $result; }
コアファイルの259行目にapply_filters()
があるのでフィルターフックが使えることが分かります。これを使えば読み込むファイルを変更できそうです。
フィルターフックを使って、templatesフォルダ内のsearchform.php
を読み込めるようにfunctions.php
に以下のコードを書いてください。
functions.php
function my_get_search_form($form) { $form = ''; locate_template('templates/searchform.php', true, false); return $form; } add_filter('get_search_form', 'mkw_get_search_form');
locate_template()
はファイルを読み込む関数です。フィルターフックでファイルは出力されます。この関数だけだと、$form
に入っているタグも出力されてしまうので、引数で$form
を受け取れるのでこれを空にして返してあげます。そうすると空の$form
が出力されるだけで結果templates/searchform.php
が読み込むことができています。
locate_template()
については前回の記事でも少し説明したので参考にしてみてください。またフィルターフックやその他についても詳しく知りたい場合は下記のサイトを参考にしてみてください。
- Function Reference/locate template | WordPress Codex
- locate_template | WordPress 私的マニュアル
- WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック | Webデザインレシピ
まとめ
- テンプレートファイルはベースとパーツ2種類に分けられる
- パーツを使うには6種のテンプレートタグを使う
- オリジナルのテンプレートファイルには
get_template_part()
を使う - ベースとパーツを分かりやすいようにフォルダ分けする
この管理方法を使えば、2種類あるテンプレートファイルを綺麗に分けることができ、重複するコードを少なくできます。編集時のミスも減らせ、ファイルサイズも小さくなるでしょう。
あとがき
テンプレートファイルが直接表示に関わるものとそうでないものが一緒になっているのが気になっている人は試してみてはいかがでしょうか?functions.php
の管理方法については前回の記事を参考にしてみてください。何か間違いや気づいた点があったらコメントください。