個別投稿の表示におけるテンプレートファイルの役割分担【WordPress TwentyTwelve カスタマイズ】

更新

TwentyTwelveに限らず、WordPressのテーマをカスタマイズするときには、どの部分の表示にどのテンプレートファイルが関わっているかを把握しなければなりません。まず、個別投稿の表示に関わるファイルをまとめてみました。

  1. 個別投稿の表示で主役を担うはずのsingle.php
  2. 実は、single.phpにインクルードされているテンプレートファイルが主役
  3. レイアウト構造と役割分担

個別投稿の表示で主役を担うはずのsingle.php

表示に関わるファイルを把握するためには、まず、テンプレート階層 – WordPress Codex 日本語版の5.2 個別投稿表示を見ておきましょう。

それによると、個別投稿表示に使われるファイルは以下の優先順位で決定されます。

  1. single-{post_type}.php
  2. single.php
  3. index.php

TwentyTwelveのテンプレートファイルを見てみると次のようになっています。

  1. single-{post_type}.phpというファイルはなし
  2. single.phpはある
  3. index.phpもある

single.phpのほうがindex.phpより優先度が高いので、TwentyTwelveの個別投稿ページの表示にはsingle.phpが使われることになります。

実はsingle.phpにインクルードされているテンプレートファイルが主役

ところが、そのsingle.phpは、他のテンプレートファイルをインクルードしまくりです。single.phpを見ると、

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

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

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

                <?php get_template_part( 'content', get_post_format() ); ?>

                <nav class="nav-single">
                    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
                    <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span>
                    <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span>
                </nav><!-- .nav-single -->

                <?php comments_template( '', true ); ?>

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

        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

以下のインクルードが行われていることがわかります。

  • get_header();でheader.phpをインクルード
  • get_template_part( ‘content’, get_post_format() );でcontent.phpをインクルード
  • comments_template( ”, true );でcomments.phpをインクルード
  • get_sidebar();でsidebar.phpをインクルード
  • get_footer();でfooter.phpをインクルード

このように、single.phpは個別投稿ページの表示を引き受けながら、大半の仕事を他のテンプレートファイルに丸投げして、それをインクルードによって取り込んでいるのです。

single.phpが自ら表示の仕事を行っているのは、<nav class=”nav-single”>~</div ><!– .nav-single –>だけです。

レイアウト構造と役割分担

以上のような事実を踏まえて、以前に書いた個別記事のレイアウト構造を表す図に手を加えて、どのファイルがどの部分の表示を担当してるかをざっくりと図示してみました。

2013-03-14-1150-twntytwelve

このように、個別記事ページのカスタマイズはsingle.phpだけを見ていればいいというものではないです。

むしろ、header.php、content.php、comments.php、sidebar.php、footer.phpをしっかり見ないといけません。

上の図を利用すると、個別記事ページのカスタマイズの際にどこを変えればいいかを把握するのが少しは楽になると思います。

個別投稿の表示におけるテンプレートファイルの役割分担【WordPress TwentyTwelve カスタマイズ】」への4件のフィードバック

  1. あかつき

    TwentyTwelveをベースにカスタマイズを試みているものの、情報が見つからずに苦労していました。
    こちらのエントリで、ようやく理解できました。ありがとうございました。

    返信
    1. web_shufu 投稿作成者

      微力ながらお役に立てて光栄です。

      今後とも何卒ご愛顧のほどよろしくお願いします。

      返信
  2. do-log

    他サイトでTwenty Elevenの場合はsingle.phpを加工すれば良いと知り、さっそく自分の使っているTwentyTwelveで加工を試みたところ、全く記述が異なり、途方に暮れていました。大変参考なりました。ありがとうございます!

    返信
    1. web_shufu 投稿作成者

      お役に立てて何よりです。今後ともよろしくお願いいたします。

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です