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

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

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

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

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

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

1 テンプレートファイルは大きく分けて2種類
- 1.1 ベーステンプレートファイル
- 1.2 パーツテンプレートファイル
  - 1.2.1 パーツテンプレートファイルとテンプレートタグの基本的な使い方
2 管理法(1) header sidebar footer はパラメータを活用する
- 2.1 パラメータを使った読み込み方法
- 2.2 headerなど以外に共通したコードができるときは？
3 管理法(2) オリジナルのパーツテンプレートファイルを作る
- 3.1 get_template_part()とget_header()などの違い
  - 3.1.1 get_header()
  - 3.1.2 get_template_part()
- 3.2 テーマディレクトリ内がごっちゃになる？
4 管理法(3) テンプレートファイルをフォルダ分けする
- 4.1 フォルダで管理する手順
5 まとめ
6 あとがき
- 6.1 記事を共有する
- 6.2 関連

テンプレートファイルは大きく分けて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テーマ作成で覚えておきたいことです。

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

それぞれパーツとなったファイルを読み込むテンプレートタグには、パラメータがあって以下の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 のファイル名の付いたテンプレートファイルを読み込んでいます。

Note

上記の使用例の他にパラメータを使わず、header.php sidebar.php footer.php 内で条件分岐タグを使い表示を変えることもできます。
それぞれテンプレートファイル化した場合は以下のメリットがあります。

ファイル内のコード量が減り見通しがよくなる
ファイル名でコードがどのページに対応しているかわかる
他のコードを誤って消したりすることがなくなる

しかし、たった数行のためにファイルを作成するのもメンテナンス性が良くないと思うので、その場合は条件分岐タグを使い、コード量が多く見通しが悪くなってきたらファイルを分けるようにするのがいいと思います。

条件分岐タグ | WordPress Codex 日本語版

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 | WordPress Codex 日本語版

テーマディレクトリ内がごっちゃになる？

新たな疑問が浮かんでくるのではないでしょうか？コードを分けて管理することができるようになりましたが、テーマディレクトリ内はベーステンプレートファイルとパーツテンプレートファイルがごっちゃになってファイルがいっぱい並んでいるのではないかと

そんな問題も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フォルダに移動させます。

header sidebar footer のファイルも別フォルダで管理する方法

ベースとパーツきっちり分けるためにどうしても分けて管理したい場合の方法を2つ紹介します。

1つ目はget_template_part()を使う方法です。これはもっとも簡単ですが、問題が1つあります。get_header()などにはアクションフックが使えるようになっているので、get_headerにアクションフックを使っているプラグインは動作しなくなるかもしれません。

2つ目はfunctions.phpに新しく関数を作成してその関数を使って読み込む方法です。現バージョン3.9.1のget_header()が書かれているところを見てみましょう。この関数は/wp-includes/general-template.php内に書かれています。

function get_header( $name = null ) {
  do_action( 'get_header', $name );

  $templates = array();
  $name = (string) $name;
  if ( '' !== $name )
    $templates[] = "header-{$name}.php";

    $templates[] = 'header.php';

    if ('' == locate_template($templates, true))
        load_template( ABSPATH . WPINC . '/theme-compat/header.php');
}

上記のコードを参考に以下のような関数をfunctions.phpに作ります。

function my_get_header( $name = null ) {
  do_action( 'get_header', $name );

  $templates = array();
  $name = (string) $name;
  if ( '' !== $name )
    $templates[] = "templates/header-{$name}.php";

    $templates[] = 'templates/header.php';

    if ('' == locate_template($templates, true))
        load_template( ABSPATH . WPINC . '/theme-compat/header.php');
}

管理用のフォルダ名を追加しただけの簡単なものです。この関数を使えばアクションフックの問題は解決できると思います。get_sidebar() get_footer() も同じような感じで作成すればいいでしょう。

/wp-includes/general-template.php | WordPress Core

ベーステンプレートファイルに読み込むコードを書く

読み込むコードを書いて表示させてみましょう。例として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()があるのでフィルターフックが使えることが分かります。これを使えば読み込むファイルを変更できそうです。

/wp-includes/general-template.php | WordPress Core

フィルターフックを使って、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()については前回の記事でも少し説明したので参考にしてみてください。またフィルターフックやその他についても詳しく知りたい場合は下記のサイトを参考にしてみてください。

[WordPress] functions.phpを編集、修正、管理しやすくする書き方

まとめ

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

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

あとがき

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

[WordPress] functions.phpを編集、修正、管理しやすくする書き方

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

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

ベーステンプレートファイル

パーツテンプレートファイル

パーツテンプレートファイルとテンプレートタグの基本的な使い方

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

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

headerなど以外に共通したコードができるときは？

管理法(2) オリジナルのパーツテンプレートファイルを作る

get_template_part()とget_header()などの違い

get_header()

get_template_part()

テーマディレクトリ内がごっちゃになる？

管理法(3) テンプレートファイルをフォルダ分けする

フォルダで管理する手順

パーツテンプレートファイルを保存するファイルを作る

共通するコードを部品化しテンプレートファイルを作る

テンプレートファイルをフォルダに移動する

ベーステンプレートファイルに読み込むコードを書く

まとめ

あとがき

関連

関連記事

フォローする

カテゴリー

タグ

記事を書いた人

tadashi1105

パーソナルリンク

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

ベーステンプレートファイル

パーツテンプレートファイル

パーツテンプレートファイルとテンプレートタグの基本的な使い方

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

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

headerなど以外に共通したコードができるときは？

管理法(2) オリジナルのパーツテンプレートファイルを作る

get_template_part()とget_header()などの違い

get_header()

get_template_part()

テーマディレクトリ内がごっちゃになる？

管理法(3) テンプレートファイルをフォルダ分けする

フォルダで管理する手順

パーツテンプレートファイルを保存するファイルを作る

共通するコードを部品化しテンプレートファイルを作る

テンプレートファイルをフォルダに移動する

ベーステンプレートファイルに読み込むコードを書く

まとめ

あとがき

記事を共有する

関連

関連記事

フォローする

カテゴリー

タグ

記事を書いた人

tadashi1105

パーソナルリンク