【Twenty Twelve】アイキャッチ画像の表示位置とサイズのカスタマイズ

Twenty Twelveのテーマで、トップページなどで投稿記事一覧が表示されているときは、記事本文の横にアイキャッチ画像を小さく表示しておいて、記事をシングルページに移動するとアイキャッチ画像を大きく表示する方法について。

記事本文の横にアイキャッチ画像を表示する方法については、【Twenty Twelve】アイキャッチ画像の表示位置カスタマイズ1の記事にあるように、content.phpファイルにあるthe_post_thumbnailのコードを場所を移動させますが、ここではstyle.cssファイルに以下のコードを追加する変更だけします。

.entry-content img.attachment-thumbnail {
	float: left;
	margin-right: 15px;
}

次に、content.phpファイルにあるdiv.entry-contentタグの中身を変更します。the_post_thumbnail関数にそれぞれ引数を使用して、if文の判定にis_single()を使いシングルページか否かで、アイキャッチ画像の大きさを変更します。

<div class="entry-content">
			<?php if(!is_single()): ?>
				<?php the_post_thumbnail('thumbnail'); ?>
			<?php else : ?>
				<?php the_post_thumbnail('large'); ?>
			<?php endif; ?>
			<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
		</div><!-- .entry-content -->

または、上のコードではなく下のコードでもできます。

<?php elseif(!is_single()) : ?>
		<div class="entry-content"><?php the_post_thumbnail('thumbnail'); ?>
			<?php the_content( __( 'Continue reading <span class="meta-nav">→</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_post_thumbnail('large'); ?>
			<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
		</div><!-- .entry-content -->
		<?php endif; ?>

content.phpファイルの編集を終えると、トップページでは、アイキャッチ画像が小さく表示されます。