前回で、 _s テーマを使いつつスタイルシートのみでオリジナルのテーマを作ることができました。
今回からは、テンプレート階層に基づいてテーマファイル(PHPファイル)を編集していきます。
まずは、WordPressのテンプレート階層とテンプレートファイル、モジュールテンプレートファイルを把握し、カスタマイズしたい場所はどのファイルにあるのかを理解しましょう。
[show_underscores]
目次
この記事の対象
- HTMLとCSSでサイトを構築できる(テーマの元になるHTMLを組める)
- WordPressのテーマの構造やテンプレート階層を理解している
- フルスクラッチでテーマをつくるのが(毎回)手間と思っている
- 子テーマ(あるいは既存テーマを複製)での制作に限界を感じている
目次
- WordPressテーマに最低限必要なファイル
- WordPressテーマのテンプレート階層
- モジュールテンプレートファイルとそのインクルード
- _s のテンプレートファイルとモジュールテンプレートファイルのおさらい
1. WordPressテーマに最低限必要なファイル
WordPressのテーマにおいて、最低限必要なファイルは
- style.css(スタイルシートとテーマの情報)
- index.php(テンプレートファイル)
- functions.php(関数ファイル)
この3つです。
しかし、_s を含めほとんどのテーマがもう少し多いのファイルで構成されています。
表示されるページによってレイアウトや内容などを変えたい場合、index.php内で「条件分岐タグ」を駆使すれば可能ですが、可読性やメンテナンス性を考慮し、ファイルを分割する場合がほとんどです。
そのための仕組みのひとつとして「テンプレート階層」があります。
条件分岐タグとテンプレート階層の使い分けを簡単にレクチャーすることは難しのですが、数カ所だけを改変するなら条件分岐タグ、ファイル名からどのタイプのテンプレートか推察しやすい=メンテナンス性をとる、あるいは大幅に変更するのであればテンプレート階層を利用するのが良いでしょう。
2. WordPressテーマのテンプレート階層
WordPressは設定しているテーマに基づいて見た目を変えますが、サイトトップや個別の投稿、アーカイブなどの「どのページが表示されているのか」という条件によって使われるテンプレートファイルが異なります。
これは、テンプレート階層に基づいて、使われるテンプレートファイルの優先順位が定められているからです。特に「概念図」はフローチャート形式で分かりやすいです。
詳しい説明はぜひCodexをお読みください。
例えば投稿の個別ページの場合
- single-{post_type}.php – 投稿タイプ が books の場合は single-books.php (バージョン 3.0 以降)
- single.php
- 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' )
とする事で
- content-single.php
- content.php
の優先順位でファイルをインクルードします。
4. _s のテンプレートファイルとモジュールテンプレートファイルのおさらい
「準備編」に _s のファイル類を書きましたが、テンプレートファイルとモジュールテンプレートファイルに絞って今回の内容をおさらいします。
テンプレートファイル
- index.php(必須)
メインテンプレート。テンプレート階層においてどのテンプレートファイルも存在しない場合使われる。 - single.php
投稿(カスタム投稿タイプ)の個別表示用テンプレート。 - page.php
固定ページ用の個別表示用テンプレート。 - 404.php
404 Not Found テンプレート。存在しないページを要求された時に表示される。 - archive.php
アーカイブ(カテゴリーやタグ(カスタム分類)、日別、著者)用テンプレート。 - image.php
アップロードしたメディアのうち画像を単体で表示するテンプレート。 - search.php
検索結果表示用テンプレート
モジュールテンプレートファイル
- header.php
ヘッダー部分。get_header()
で読み込む。 - sidebar.php
サイドバー部分。get_sidebar()
で読み込む。 - footer.php
フッター部分。get_footer()
で読み込む。 - comments.php
コメント部分。comments_template()
で読み込む。 - content.php
ループ内の投稿に関する部分。get_template_part( 'content' )
で読み込む。 - content-single.php
ループ内の投稿に関する部分。single.php においてget_template_part( 'content', 'single' )
で読み込む。このファイルがない場合は content.php が読み込まれる。 - content-page.php
ループ内の投稿に関する部分。page.php においてget_template_part( 'content', 'page' )
で読み込む。このファイルがない場合は content.php が読み込まれる。 - no-results.php
アーカイブテンプレートなどにおいて、投稿が見つからない場合に表示する部分。get_template_part( 'no-results' )
で読み込む。 - searchform.php
検索フォーム。get_search_form()
で読み込む。
例えば、投稿の個別ページが表示される時に使われるテンプレートは 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を読み込んでいます。
これを実際の見た目に合わせると図のようになります。
他のテーマファイルにも言えることなのですが、カスタマイズする際はまず表示されているページ(あるいはカスタマイズしたいページ)をテンプレート階層に基づいてテーマファイルから探し、必要に応じてそこに読み込まれているモジュールテンプレートファイルを探せばよいでしょう。
テーマ内のテンプレートファイルが実際にどのページや部分に使われているのか把握できたでしょうか?
次回は今回の内容を元に、ロゴや背景などに画像を追加する方法を書きたいと思います。