【WordPress】サムネイル表示方法と、サムネイル画像を任意の複数のサイズで出力する設定方法

更新日: 2019/10/17
公開日: 2014/03/22

カテゴリー:
- WordPress

実は僕、今までサムネイル（アイキャッチ）用の画像サイズを任意に設定出来ることを知りませんでした。（なんだってー！）

WordPressは元々サムネイルのサイズを管理画面の「設定 > メディア」から指定することは出来るのですが、これでは1種類しか設定できません。

例えばこのブログのように、サイドバーの最新記事一覧とアーカイブ一覧両方で表示したい場合は2つのサムネイルサイズが必要になります。WordPressが用意した設定機能だけでは足りません。

ので、サムネイルサイズを任意に複数設定する必要に駆られて調べてたら、簡単に実装出来たのでメモしておきます。

テーマをサムネイル表示機能に対応
1. set_post_thumbnail_size( $width, $height, $crop )
任意の画像サイズを設定する
1. add_image_size( $name, $width, $height, $crop )
設定した任意のサムネイル画像を出力する
新しい画像サイズを設定した場合は画像の再生成が必要

テーマをサムネイル表示機能に対応

当たり前ですが、任意のサイズを設定する前にまずテーマをサムネイル表示機能に対応させます。以下をfunctions.phpに記述すると対応出来ます。

function mySetup() {
add_theme_support( 'post-thumbnails' ); //テーマをサムネイル表示に対応させる
set_post_thumbnail_size( 200, 200, true );//サムネイルの画像サイズを設定
}
add_action( 'after_setup_theme', 'mySetup' );

これだけでサムネイル表示に対応します。

set_post_thumbnail_size( $width, $height, $crop )

$width
サムネイル画像の横幅サイズ。

$height
サムネイル画像の縦幅サイズ。

$crop
画像サイズが大きい場合にトリミングするかどうか。
trueでトリミングする、falseでトリミング無し。デフォルトはfalse。

使用するサイムネイルが1種類の場合はこれで大丈夫です。

任意の画像サイズを設定する

それでは任意の画像サイズを複数設定する方法です。add_image_size()を使います。

function mySetup() {
    add_theme_support( 'post-thumbnails' ); //テーマをサムネイル表示に対応させる
    set_post_thumbnail_size(200, 200, true);//サムネイルの画像サイズを設定
    add_image_size( 'archive_size', 190, 190, true ); //アーカイブ用の画像サイズ
    add_image_size( 'sidebar_size', 90, 90, true ); //サイドバー最新記事用の画像サイズ
}
add_action( 'after_setup_theme', 'mySetup' );

add_image_size( $name, $width, $height, $crop )

$name
新しい画像サイズの名前を文字列で指定。

$width
サムネイル画像の横幅サイズ。

$height
サムネイル画像の縦幅サイズ。

$crop
画像サイズが大きい場合にトリミングするかどうか。
trueでトリミングする、falseでトリミング無し。デフォルトはfalse。

set_post_thumbnail_size()とほぼ同じですね。違いは任意の名前を設定する第一引数がある部分です。

設定した任意のサムネイル画像を出力する

add_image_size()で設定した任意の画像サイズでサムネイルを出力します。the_post_thumbnail()を使います。

the_post_thumbnail('thumbnail'); // set_post_thumbnail_size()で設定したサイズ
the_post_thumbnail('archive_size'); //アーカイブ用の画像サイズでサムネイル出力
the_post_thumbnail('sidebar_size'); //サイドバー最新記事用の画像サイズでサムネイル出力

このように、先ほどadd_image_size()で設定した画像サイズ名を引数に指定すると出力できます。

もしループ外でサムネイルを出力したい場合はget_the_post_thumbnail()を使いましょう。詳しい使い方はこちらが参考になります。