アイキャッチ画像のサイズを複数設定する＠WordPress

WordPressのアイキャッチ画像（the_post_thumbnail）を異なるサイズで複数設定する実装例です。

たとえば、同一のページ（ホームとかカテゴリ一覧とか）内において異なるサイズ指定（アイキャッチ画像）をする必要があるデザインの場合、それ用に各々特定のサイズでアイキャッチ画像が呼び出せるようにする必要があります。

上の画像にあるような二種類のアイキャッチ画像（設定）を追加してみます。

使用テーマ内のfunctions.phpに

<?php
/** 326x192 **/
add_image_size('large_thumbnail', 326, 192, true); // クロップモード
// このアイキャッチ画像を出力するには the_post_thumbnail('large_thumbnail');

/** 100x100 **/
add_image_size('small_thumbnail', 100, 100, true); // クロップモード
// このアイキャッチ画像を出力するには the_post_thumbnail('small_thumbnail');

この場合どちらもクロップモード（切り抜きモード）ですが、引数の「true」をなくせばリサイズモードになります。

出力する側（これらのアイキャッチ画像を表示させたい場所）のテンプレートに以下を記述します。

<!-- functions.phpに追加したLargeサイズ 326x192px crop -->
<?php the_post_thumbnail('large_thumbnail'); ?>

<!-- functions.phpに追加したsmallサイズ 100x100px crop -->
<?php the_post_thumbnail('small_thumbnail'); ?>

隠し剣秋風抄 (文春文庫)