WordPressで複数の異なるサイズのアイキャッチ画像を使う

アイキャッチ画像は、このブログだと一覧画面で記事ごとのサムネイルに使っています。
こういう使い方以外にも、例えば表示するページやエリアによって画像サイズを変更したいケースはよくあることと思います。
２年くらい前の＜WordPress「アイキャッチ画像」を使うための準備＞というエントリーで基本的なアイキャッチ画像の使い方を解説しましたが、今回はこれに加えて複数の異なるサイズのアイキャッチ画像を使う方法について書きます。

複数の異なるサイズのアイキャッチ画像を自動的に生成

画像がひとつだけの場合は、functions.phpに以下のように書きました。
詳しくは以前の記事を参照。

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

複数サイズを自動的に生成するためには、「add_image_size」というのを追加します。

<?php
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100, true );
add_image_size( 'medium_thumb', 200, 200, true );
add_image_size( 'large_thumb', 500, 300, true );
?>

200×200と、500×300のふたつの画像サイズを追加してみた例です。
つまり、最初の100×100とあわせて全部で３種類のサイズのアイキャッチ画像が自動的に生成されることになります。

「medium_thumb」「large_thumb」というところは画像を呼び出すときに使います。任意の名前ですので他の名前にして構いません。

サイズを選んでアイキャッチ画像を表示

アイキャッチ画像を呼び出すときはテンプレートファイルに以下のように書きます。
詳しくは以前の記事を参照。

<?php the_post_thumbnail(); ?>

今回生成した異なるサイズのアイキャッチ画像を呼び出すためには、カッコの中に名前を入れるだけ！簡単ですね。

<?php the_post_thumbnail( 'medium_thumb' ); ?>

以上で今回の解説は終わりです。
アイキャッチ画像が無い場合にはダミー画像を表示させる条件分岐の書き方などは以前の記事で解説してますのでそちらをご覧ください。