WordPress「アイキャッチ画像」を使うための準備

公開日：2010.10.12

ワードプレスのバージョン3には「アイキャッチ画像」という機能があります。
これは、ひとつのエントリーに対し、アイキャッチ用の画像をひとつ設定して表示できる機能で、アイキャッチという言葉からも連想できるように「ユーザーの目を引く役割」に期待して利用するのが一般的かと思います。具体的には、一覧ページで記事タイトルに対してひとつずつサムネイルを表示させるような使い方でしょうか。

この機能を利用できるようにすると、エントリーの個別ページで使用している画像の中からアイキャッチ用の画像を選べるようになり、アイキャッチ用の大きさの画像は自動的にワードプレスが書き出してくれますし、一覧ページのレイアウトも最初に決めた規則性に従って綺麗にまとめておくことができて便利です。
このページではアイキャッチ画像を使えるようにするためのカスタマイズ方法を紹介します。
なお、別エントリーで「アイキャッチ画像」投稿時の手順を解説しています。

functions.phpに設定を追加

まず、テーマファイルの中の「functions.php」に以下のコードを追加します。もしfunctions.phpというファイルが存在しなかったら新たに作ります。

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

上記の「100, 100」の部分は、横100px、縦100pxという意味ですので、自分のサイトに合わせて数値を変更します。
その次の「true」の部分は、縦横比が合わない場合に切り抜くかどうかの指定です。つまり、上記例では100×100なので正方形になるわけですが、横長の写真の場合、ここが「true」になっていると、写真の左右を少しずつ切り抜いて100×100ちょうどの大きさのサムネイルを自動的に書き出してくれます。
ここの値に「false」を指定すると、横長の写真の場合、横100pxですが縦は100pxに満たない大きさのサムネイルになります。

また、functions.phpにこの設定を追加する前に既にアップ済みの画像だと、サムネイル用の画像は書き出されません。この場合、サムネイル化されていない大きな画像のwidthとheightの指定値だけ変更し、上記のfunctions.phpで指定した大きさで表示する仕様になっているようです。

表示させたいテーマファイルに指定を追加

例えばトップページで表示させたいならindex.phpやhome.phpのループ中に以下のコードを追加します。

<?php the_post_thumbnail(); ?>

必ずしもすべてのエントリーに画像があるわけではないサイトもあると思います。この場合、「has_post_thumbnail()」でアイキャッチ画像の有無を判別することができます。
例えばアイキャッチ画像が設定されていないエントリーでは何も表示させないなら以下のようにします。

<?php
if (has_post_thumbnail()) {
the_post_thumbnail();
}
?>

アイキャッチ画像が設定されていないエントリーでは、例えば「NO IMAGE」のようなダミー画像を表示させるなら、上記にelseを加えてダミー画像を指定します。

<?php
if ( has_post_thumbnail()) {
the_post_thumbnail();
} else {
// （ダミー画像を指定）
}
?>

これで準備は完了です。この後の実際のエントリー投稿時の管理画面での操作手順は、別エントリー（WordPress「アイキャッチ画像」投稿時の手順）で解説しています。

※本エントリーの内容は、WordPress3.0.1の仕様を対象として執筆しています。その他のバージョンでは仕様が異なる可能性があります。

※2012年9月21日追記：
複数の異なるサイズのアイキャッチ画像を自動的に生成して、任意の場所に指定したサイズのものを表示させる方法について書きました。「WordPressで複数の異なるサイズのアイキャッチ画像を使う」