WordPressでつくったWebサイトで、トップページなどに記事一覧を表示させる場合に、サムネイルの小さな画像が欲しいなと思うことがあります。

いちばん簡単なのは、function.phpに、記事投稿画面に「アイキャッチ画像」追加するためのコードを追加し、

<?php
add_theme_support( 'post-thumbnails' );
?>

index.phpやhome.phpなどのテンプレートの表示させたい場所に、以下のコードを記述する方法。

<?php the_post_thumbnail(); ?>

 

たとえば、私はこのように使っていました。

<!-- 新着記事 -->
<?php $posts = get_posts('numberposts=3&category=0'); ?>
<h2>新着記事</h2>
	<div>
	<?php foreach($posts as $post) :
	setup_postdata($post); ?>
		<div class="newexcerpt"><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
		<span style="float: left; margin-right: 1em;">
			<?php the_post_thumbnail( array(150,150) ); ?>
		</span>
		<?php the_time('Y.m.d') ?><?php the_excerpt(); ?>
		<div class="clear"></div></div><!-- END .newexcerpt -->
	<?php endforeach; ?>
	</div>
<!-- 新着記事ここまで -->

 

ところがこれでは、記事を書くごとに、毎回アイキャッチ画像を手動で設定しなくてはなりません。設定しなくても表示崩れもなく、問題はなかったのですが、アイキャッチ画像がない場合も画像を表示させたいと思い、デフォルト画像(default.png)を用意して、index.phpやhome.phpの

<?php the_post_thumbnail( array(150,150) ); ?>

の部分を以下のように変更。無事表示することができました。

<?php
			if (has_post_thumbnail()) {
				the_post_thumbnail( array(150,150) );
			}else {
				echo '<img src="' . get_bloginfo('template_directory') . '/img/default.png' . '" width="150" height="150" alt="thumbnail" />';
			}
?>

 

array(150,150) (アイキャッチ画像を150px×150pxで表示させる)を書き忘れると、大きな元画像がそのままの大きさで表示されてびっくりします。ご注意ください。