サイトアイコン Gatespace's Blog

スターターテーマ _s を使ってWordPressのテーマをつくる（テンプレート階層とモジュールテンプレートファイル）

gatespace
この記事をシェアする

前回で、 _s テーマを使いつつスタイルシートのみでオリジナルのテーマを作ることができました。
今回からは、テンプレート階層に基づいてテーマファイル（PHPファイル）を編集していきます。

まずは、WordPressのテンプレート階層とテンプレートファイル、モジュールテンプレートファイルを把握し、カスタマイズしたい場所はどのファイルにあるのかを理解しましょう。

[show_underscores]

この記事の対象

目次

  1. WordPressテーマに最低限必要なファイル
  2. WordPressテーマのテンプレート階層
  3. モジュールテンプレートファイルとそのインクルード
  4. _s のテンプレートファイルとモジュールテンプレートファイルのおさらい

1. WordPressテーマに最低限必要なファイル

WordPressのテーマにおいて、最低限必要なファイルは

この3つです。

しかし、_s を含めほとんどのテーマがもう少し多いのファイルで構成されています。
表示されるページによってレイアウトや内容などを変えたい場合、index.php内で「条件分岐タグ」を駆使すれば可能ですが、可読性やメンテナンス性を考慮し、ファイルを分割する場合がほとんどです。

そのための仕組みのひとつとして「テンプレート階層」があります。

条件分岐タグとテンプレート階層の使い分けを簡単にレクチャーすることは難しのですが、数カ所だけを改変するなら条件分岐タグ、ファイル名からどのタイプのテンプレートか推察しやすい＝メンテナンス性をとる、あるいは大幅に変更するのであればテンプレート階層を利用するのが良いでしょう。

2. WordPressテーマのテンプレート階層

WordPressは設定しているテーマに基づいて見た目を変えますが、サイトトップや個別の投稿、アーカイブなどの「どのページが表示されているのか」という条件によって使われるテンプレートファイルが異なります。
これは、テンプレート階層に基づいて、使われるテンプレートファイルの優先順位が定められているからです。特に「概念図」はフローチャート形式で分かりやすいです。
詳しい説明はぜひCodexをお読みください。

テンプレート階層・概念図（日本語Codexより）

例えば投稿の個別ページの場合

  1. single-{post_type}.php – 投稿タイプ が books の場合は single-books.php （バージョン 3.0 以降）
  2. single.php
  3. index.php

の順でテーマ内にテンプレートファイルがあるかを探していき、見つかったファイルを使います。

このように全ての条件において、該当するファイルがなかった場合に index.php が使われますので、テーマ内の index.php は絶対に削除してはいけません。

3. モジュールテンプレートファイルとそのインクルード

_s も含めテーマの中にはテンプレートファイルに読み込まれる「モジュールテンプレートファイル」と呼ばれる物があります。
header.php や footer.php、sidebar.php など、テンプレート階層で使われるファイルに読み込まれるファイルです。

これらのモジュールテンプレートファイルは WordPress のテンプレートタグでテンプレートファイルにインクルードされ（読み込まれ）ます。
もちろん、PHP の include() 関数を使っても可能ですが、テーマの中のファイルに限定するのであれば、これらのWordPressのテンプレートタグを使った方が簡単です。

header.php、footer.php、sidebar.php、comments.php はテーマ内に存在しない場合は WordPress にビルトインされている（ /wp-includes/theme-compat/ にある）ファイルが適用されます。

searchform.php がテーマ内に存在しない場合は WordPress にビルトインされているフォームが表示されます（上の場合と違ってget_search_form() 関数内に書かれているソースを出力。フィルターフックあり）。

また、header.php、footer.php、sidebar.php に関しては対応したテンプレートタグにパラメーターを与えることで、header-{name}.php、footer-{name}.php、sidebar-{name}.php といったファイルをインクルードすることができます。

これ以外のモジュールテンプレートファイルとして _s には content{-name}.php と no-results.php があります。

これらのカスタムテンプレートファイルをインクルードするテンプレートタグは get_template_part() になります（WordPress 3.0以降）。
get_template_part( $slug, $name ) は $slug、$name2つのパラメーターを与えることができます。

_s のsingle.php を例に説明すると get_template_part( 'content', 'single' ) とする事で

  1. content-single.php
  2. content.php

の優先順位でファイルをインクルードします。

4. _s のテンプレートファイルとモジュールテンプレートファイルのおさらい

「準備編」に _s のファイル類を書きましたが、テンプレートファイルとモジュールテンプレートファイルに絞って今回の内容をおさらいします。

テンプレートファイル

モジュールテンプレートファイル

例えば、投稿の個別ページが表示される時に使われるテンプレートは single.php です。
single.php のソースは以下の様になります（コメントを少し付け足しました）。

<?php
/**
* The Template for displaying all single posts.(投稿の個別ページを表示するテンプレート)
*
* @package Gatespace Blog Theme
* @since Gatespace Blog Theme 1.0
*/

get_header(); ?>

<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">

<?php while ( have_posts() ) : the_post(); ?>

<?php gatespace_blog_theme_content_nav( 'nav-above' ); ?>

<?php get_template_part( 'content', 'single' ); // content-single.php を読み込む ?>

<?php gatespace_blog_theme_content_nav( 'nav-below' ); ?>

<?php
// If comments are open or we have at least one comment, load up the comment template（コメントを受け付けている。あるいは1つでもコメントがある場合、コメントテンプレートを読み込みます）
if ( comments_open() || '0' != get_comments_number() )
comments_template( '', true ); // comments.php を読み込む
?>

<?php endwhile; // end of the loop. ?>

</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->

<?php get_sidebar(); // sidebar.php を読み込む ?>
<?php get_footer(); // footer.php を読み込む ?>

9行目で header.php、18行目でcontent-single.php、25行目でcomments.php、33行目でsidebar.php、34行目でfooter.phpを読み込んでいます。

これを実際の見た目に合わせると図のようになります。

single.phpイメージ

他のテーマファイルにも言えることなのですが、カスタマイズする際はまず表示されているページ（あるいはカスタマイズしたいページ）をテンプレート階層に基づいてテーマファイルから探し、必要に応じてそこに読み込まれているモジュールテンプレートファイルを探せばよいでしょう。

テーマ内のテンプレートファイルが実際にどのページや部分に使われているのか把握できたでしょうか？

次回は今回の内容を元に、ロゴや背景などに画像を追加する方法を書きたいと思います。

参照サイト

この記事をシェアする