WordPressではバージョン2.9から、アイキャッチ画像(サムネイル画像)を設定する機能が備わっています。アイキャッチ画像の機能を使うことでこのブログのようにトップページに記事のサムネイルを表示させたりすることができます。

WordPressにおけるアイキャッチ画像とサムネイルの違いについて

アイキャッチ画像の使い方について紹介する前に、WordPressのサムネイルという言葉に注意しなければなりません。 WordPressの管理画面では「サムネイル」も出てきますが、これはアイキャッチ画像とは別のものです。

まずアイキャッチ画像は、記事ごとに一つの画像を設定することができ、テーマファイルの中でWordPressタグを使って呼び出すことができます。(やり方については後述)
なので、トップページの記事一覧でアイキャッチ画像を呼び出して使うことができます。

一方サムネイルとは、記事内で画像を表示する際の画像の大きさの一種のことです。 画像を記事に表示する際に大きさを「サムネイル」「中サイズ」「大サイズ」「フルサイズ」から選べるようになっていると思います。サムネイルとは、あくまで画像の大きさの選択肢の一つです。
アイキャッチ画像のようにテーマファイルで呼び出したりすることはできません。

アイキャッチ画像の設定

それでは本題のアイキャッチ画像の設定についてです。

functions.phpでアイキャッチ画像の機能を有効化

アイキャッチ画像を設定できるようにするためには、まずテーマファイルの中のfunctions.phpを編集する必要があります。 functions.phpに、以下のPHPコードを追記してください。

<?php
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true );
?>

2行目のadd_theme_support( ‘post-thumbnails’ );でアイキャッチ画像の機能を有効化します。

3行目のset_post_thumbnail_sizeで幅と高さのピクセルを指定します。 3つめのtrueは切り抜き(クロッピング)モードを有効にするかどうかです。有効(true)にした場合は、まず画像が指定した幅と高さの縦横比に応じて切り抜かれ、その後縮小されます。無効(false)にした場合は切り抜きは行われず、そのまま縮小されます。そのため、画像の元の縦横比によっては指定した幅と高さにならないことがあります。
以下の例は、幅240ピクセル、高さ320ピクセルの画像を、150×150のアイキャッチ画像に指定した場合の違いです。

アイキャッチ画像の指定

アイキャッチ画像は、投稿編集のページから指定することができます。functions.phpでうまく設定できていれば、投稿編集画面の右下の方にアイキャッチ画像を設定できる場所が増えていると思います。

「アイキャッチ画像を設定」をクリックするとアップロード画面が表示されますので、画像をアップロードした後、「アイキャッチ画像として使用」を選べば設定完了です。

なお、すでにアップロードされた画像をアイキャッチ画像に使うことはできますが、その場合切り抜きモードは有効にならないので注意してください。切り抜きモードで使いたい場合は再度画像をアップロードする必要があります。これがめんどくさい。

アイキャッチ画像を表示

アイキャッチ画像を表示させるには、テーマファイルの記事ループ内で以下のPHPコードを記述します。

<?php the_post_thumbnail(); ?>

the_post_thumbnail()でアイキャッチ画像の表示を行います。また、has_post_thumbnail()でその記事にアイキャッチ画像が設定されているか判定することができます。

<?php
if (has_post_thumbnail()) {
	// アイキャッチ画像を持っているときの処理
} else {
	// アイキャッチ画像を持っていないときの処理
}
?>

記事ループの表示の仕方はテーマごとに異なるので参考にならないかもしれませんが、このブログでは以下のように書いてます。

<?php
//記事ループに記述
if (!is_single() && !is_page()) : //個別記事でも固定ページでもないとき
	if ( has_post_thumbnail() ) : //アイキャッチ画像が設定されているとき
?>

<a href="<?php the_permalink(); ?>" class="thumbs">
<?php the_post_thumbnail(); //アイキャッチ画像を表示 ?>
</a>

<?php else : //アイキャッチ画像が設定されてないときはNoImage画像を表示 ?>

<a href="<?php the_permalink(); ?>" class="thumbs"><img alt="<?php the_title(); ?>" src="<?php bloginfo('template_directory'); ?>/images/common/no_image.png" /></a>

<?php endif; ?>

<div class="excerpt"><?php the_excerpt(); ?></div>
<div class="more"><a href="<?php the_permalink(); ?>">»続きを読む</a></div>

<?php
else : //個別記事のとき
	the_content();
endif;

?>

まとめ WordPressのアイキャッチ画像の機能は使いやすいのか

結論から言うとWordPressのアイキャッチ画像の機能は使いにくいです。理由は過去の投稿のアイキャッチ画像の設定にかかる手間です。
アイキャッチ画像を過去の投稿にも反映させるにはひとつずつ設定し直さなけらばならず、前述したように切り抜きモードを使いたい場合はアップロードからやり直さないといけません。 過去の投稿が膨大にある場合は非常に面倒な作業ですので、自動でアイキャッチ画像を設定できるようにするプラグインの導入をおすすめします。

ただ、過去の投稿にはアイキャッチ画像を付けなくてもいいという場合や、アイキャッチ画像にもこだわりをもってひとつずつ設定していきたいという場合にはWordPressのアイキャッチ画像の機能もありだと思います。