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

photo credit: eldeeem via photopin cc
photo credit: eldeeem via photopin cc

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

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

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

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

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

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

 

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

$width

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新しい画像サイズを設定した場合は画像の再生成が必要

add_image_size()だけに留まらず、WordPressの「設定 > メディア」から新たに画像サイズを変更した場合、既にアップロードされた画像のサイズは変更されません。なので、画像サイズを再生成するプラグインを使って対応しましょう。

オススメのプラグインは「Regenerate Thumbnails」です。WordPressのプラグイン検索で見つかります。

色々見つかりますが僕はこれを使用してます
色々見つかりますが僕はこれを使用してます

インストールすると、WordPressの管理画面「ツール > Rgen. Thumbnails」とあるのでクリックします。

eyecatch-size-optimization02

Regenerate All Thumbnails」をクリックして画像サイズの再生成を開始します。プログレスバーが100%になったら完了です。

eyecatch-size-optimization03

最終更新日:2014年9月28日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/thumbnail-size-optimization/trackback/