[WordPress]編集がし易くなる!テンプレートファイルの3つの管理方法

By

公開日: 更新日:

[WordPress]編集がし易くなる!テンプレートファイルの3つの管理方法
photo credit: Huasonic via photopin cc

WordPressサイトの表示に関わるテンプレートファイルは、テーマディレクトリにWordPressが認識する標準のファイル名を付けることで、Webページの表示にあったファイルを自動で使用します。

このテンプレートファイルの仕組みによって、どの名前を付けて保存したらどのページの表示に使われるか明確になり、表示を変更したいページの編集が容易にできるのです。

例えば、WordPressの個別ページの表示に少し変更を加えたい場合は、個別ページの表示に使われるテンプレートファイル、page.phpを編集すればいいと簡単にわかります。

テンプレートファイルにコードを書いていると、同じコードを別ファイルにも書いていることに、ふと気付くことがあります。そのコードを変更するとなると別ファイルにも同じ編集をしなくてはならない、不毛な作業に時間を費やすことになるかもしれません。

そんな不毛な作業に時間を奪われないためのテンプレートファイル管理方法を紹介します。

テンプレートファイルは大きく分けて2種類

WordPressが自動で認識するテンプレートファイルは同じフォルダ内に並んでいると分かりにくいかもしれませんが、以下の2種類に分けることができます。

  1. ベーステンプレートファイル
  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.phpsingle.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>

ここで問題が発生します。上記のコードを見るとそれぞれのページでheaderfoootersidebarなどは共通して同じコードです。

それぞれ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.phpsingle.phpのベーステンプレートファイルのheader部分がすっきりします。ファイルサイズも減り、編集時はheader.phpを編集するだけで、page.phpsingle.phpに反映されるようになります。

get_header() get_sidebar() get_footer() get_search_form() comments_template()も基本的な使い方はベーステンプレートファイルにテンプレートタグを書くだけで同じです。

それぞれのタグ(関数)はパラメータをとることができ、さらに管理がしやすくなります。

get_template_part()はオリジナルのパーツテンプレートファイルを作成した時に使える便利なタグで、パラメータが必須です。これについては後述します。

ここまでは基本的なWordPressテーマ作成で覚えておきたいことです。

管理法(1) header sidebar footer はパラメータを活用する

それぞれパーツとなったファイルを読み込むテンプレートタグには、パラメータがあって以下の3つは同じように使うことができます。

  • get_header()
  • get_sidebar()
  • get_footer()

この3つにはオプションのパラメータ$nameを指定できるので、これを使うと管理が非常に便利になります。

パラメータを使った読み込み方法

page.phpsingle.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ステップです。

  1. パーツテンプレートファイルを保存するファイルを作る
  2. 共通するコードを部品化しテンプレートファイルを作る
  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()については前回の記事でも少し説明したので参考にしてみてください。またフィルターフックやその他についても詳しく知りたい場合は下記のサイトを参考にしてみてください。

まとめ

  • テンプレートファイルはベースとパーツ2種類に分けられる
  • パーツを使うには6種のテンプレートタグを使う
  • オリジナルのテンプレートファイルにはget_template_part()を使う
  • ベースとパーツを分かりやすいようにフォルダ分けする

この管理方法を使えば、2種類あるテンプレートファイルを綺麗に分けることができ、重複するコードを少なくできます。編集時のミスも減らせ、ファイルサイズも小さくなるでしょう。

あとがき

テンプレートファイルが直接表示に関わるものとそうでないものが一緒になっているのが気になっている人は試してみてはいかがでしょうか?functions.phpの管理方法については前回の記事を参考にしてみてください。何か間違いや気づいた点があったらコメントください。