先日、このブログにこんなコメントをいただきました。

「このブログのように個別記事にアイキャッチを表示させない方法をご教示頂けないでしょうか。Twenty Elevenのときと異なり、一覧も個別もすべてcontent.php を用いているように見え、ここのカスタマイズに苦慮しているもので…。」

とうことで、今日はTwenty Twelve とアイキャッチ画像について書いてみたいと思います。

Twenty Twelve のコンテンツ部分取得の仕組み

まずは、Twenty Twelve の index.php を見てみましょう。今回はコンテンツ部分を調べたいので、ループを中心に見てみます。

21行目から始まる

<?php if ( have_posts() ) : ?>

               <?php /* Start the Loop */ ?>
               <?php while ( have_posts() ) : the_post(); ?>
                    <?php get_template_part( 'content', get_post_format() ); ?>
               <?php endwhile; ?>

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

          <?php else : ?>

              //省略

               <?php else :
                    // Show the default message to everyone else.
               ?>
                   //省略
          <?php endif; // end have_posts() check ?>

if ( have_posts() ) から endif までがいわゆる WordPress のループと言われる部分ですね。

get template part

Twenty Twelve も今までのテーマと同じようにループの中は、ループの内容が書いてある別のテンプレートを読み込む様になっています。

25行目、

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

とある部分です。

get template part というのはヘッダー、サイドバー、フッター以外のテンプレートを読み込むための命令です。

$slug にはテンプレートのスラッグ、$name には特定テンプレートの名前が入ります。
とはいってもちょっとわかりにくいですよね。

例えば、

<?php get_template_part( 'webourgeon' ); ?>

と書いてあったら、webourgeon.phpというテンプレートを読んでね。

<?php get_template_part( 'webourgeon' , 'fight'); ?>

と書いてあったら、webourgeon-fight.phpというテンプレートを読んでね。

という感じです。

ということで、まずこの

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

はcontent-○○○.php
を読み込むんだな、ということがわかります。

get_post_format()

では次の　get_post_format()　というのは何でしょうか。

これは　投稿記事のフォーマットが何であるかを調べます。

投稿フォーマットというのは投稿画面で選べる様になってる、これですね。

これを取得してget_post_format()の部分に入れてくれます。

なので、もし投稿フォーマットがアサイド なら

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

となり、content-aside.php を、

リンク なら　

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

content-link.php を、というように投稿フォーマットごとに違うテンプレートを読んでくれるわけです。

これによって投稿フォーマットごとにデザインや表示を変えられるようにしているんですね！

index.php 以外のアーカイブやカテゴリー、個別記事用のテンプレートの中でも同じ様に記述されています。

そこで、今回の質問の、普通の投稿だとループの中は　content.phpを読み込むので一律で表示されてしまうので、その中でどうしたら良いの？という事になります。

では今度はcontent.phpの中をを見てみることにします。

Twenty Twelveのcontent.phpを調べる

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>　
         
 <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
                //この投稿をフロントページに固定にチェックが入っていて、トップページだったら
          <div class="featured-post">
                // Featured post  と表示
               <?php _e( 'Featured post', 'twentytwelve' ); ?>
          </div>
          <?php endif; ?>

          <header class="entry-header">
               <?php the_post_thumbnail(); ?>
                     //アイキャッチを表示
               <?php if ( is_single() ) : ?>
                    //シングルだったら
               <h1 class="entry-title"><?php the_title(); ?></h1>
                    //リンク無しの投稿タイトル
               <?php else : ?>
                    //そうじゃなかったら
               <h1 class="entry-title">
                    <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
               </h1>
                    //パーマリンク付きのタイトル
               <?php endif; // is_single() ?>

　　　　　　 
               <?php if ( comments_open() ) : ?>
                      //コメントが許可されてたら
                    <div class="comments-link">
                         <?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
                    </div><!-- .comments-link -->
                    //コメントの数とかコメントへのリンクとかを表示
               <?php endif; // comments_open() ?>
          </header><!-- .entry-header -->

          <?php if ( is_search() ) : // Only display Excerpts for Search ?>
                //検索結果のページだったら
          <div class="entry-summary">
               <?php the_excerpt(); ?>
                ///投稿の抜粋を表示
          </div><!-- .entry-summary -->
          <?php else : ?>
                 //そうじゃなかったら
          <div class="entry-content">
               <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
                 //投稿の内容を表示
               <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
                //前後の投稿へのリンク
          </div><!-- .entry-content -->
          <?php endif; ?>
          
          //ここから投稿下の情報
          <footer class="entry-meta">
               <?php twentytwelve_entry_meta(); ?>
               <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
               <?php if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries. ?>
                    <div class="author-info">
                         <div class="author-avatar">
                              <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentytwelve_author_bio_avatar_size', 68 ) ); ?>
                         </div><!-- .author-avatar -->
                         <div class="author-description">
                              <h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2>
                              <p><?php the_author_meta( 'description' ); ?></p>
                              <div class="author-link">
                                   <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
                                        <?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 'twentytwelve' ), get_the_author() ); ?>
                                   </a>
                              </div><!-- .author-link     -->
                         </div><!-- .author-description -->
                    </div><!-- .author-info -->
               <?php endif; ?>
          </footer><!-- .entry-meta -->
     </article><!-- #post -->

ちょっと見づらいかもしれませんが、content.phpがどんな流れで書かれてるか、ざっくりと説明をいれました。

Twenty Twelveのアイキャッチ画像を出し分ける

今回問題になってるアイキャッチ画像は

 <header class="entry-header">
               <?php the_post_thumbnail(); ?>
.....

という感じでentry-headerの中に何も条件分岐なしで書かれています。これだと、質問のようにすべてのトップでも、個別記事でも、カテゴリーでもアイキャッチが表示されます。

つまり、ここにただ書いておくんじゃなくて、お好みの場所に条件によって表示しわければいいんだな、ってことがわかりますね。

例として、このブログでどのようにしているかを書いてみます。
トップページやカテゴリー、アーカイブなどの一覧系のページでアイキャッチをコンテンツ部分に表示します。

まず、

 <header class="entry-header">
               <?php the_post_thumbnail(); ?>//この行を削除

もともとあるアイキャッチの表示部分を削除します。

そして、div class=”entry-content”、投稿の内容を表示している部分で、個別記事かそうじゃないかを条件分岐させます。

<?php if ( is_search() ) : // Only display Excerpts for Search ?>
          //検索結果               <div class="entry-summary">
                    <?php the_post_thumbnail(); ?>
          //アイキャッチを表示
                    <?php the_excerpt(); ?>
           //抜粋を表示
               </div><!-- .entry-summary -->
              
               <?php elseif( is_home() || is_archive()) : ?>
            //トップページかアーカイブページだったら
               <div class="entry-content">
                //アイキャッチを表示
                    <?php the_post_thumbnail(); ?>
                    <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
                //投稿の内容を表示
                    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
               //前後の投稿へのリンク
               </div><!-- .entry-content -->
              
               <?php else : ?>
                  // そうじゃなかったら
               <div class="entry-content">
                    //アイキャッチはない
                    <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
                //投稿の内容を表示
                    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
               //前後の投稿へのリンク
               </div><!-- .entry-content -->
               <?php endif; ?>

is_home() はトップページかどうか、is_archive() はアーカイブページかどうか調べます。アーカイブなので、カテゴリーのアーカイブ、タグのアーカイブ、日付のアーカイブを含みます。

|| というのはphpでこの左右の値のどちらかが正しければ(true)、trueになりますよ、という論理演算子というものです。

なので

if( is_home() || is_archive())

は、トップページかアーカイブページかだったら、という意味になります。

条件分岐とか論理演算子とか名前は忘れちゃってもいいけど、内容はしっかり覚えておくと何かと役に立ちますよ！

アイキャッチ表示以降は投稿の内容を表示、前後の投稿へのリンクと同じ内容なので、これをひとまとめにするとか、一覧系のページとシングルページの表示内容を変えるとか、いろいろ工夫してみて下さいね。

では、楽しいカスタマイズライフを！！

Kaoriさん、いかがでしたか？お望みの解説になっていたかしら？