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で表示させる)を書き忘れると、大きな元画像がそのままの大きさで表示されてびっくりします。ご注意ください。