WordPressのアイキャッチ画像を複数サイズ表示させる

WordPressのアイキャッチ画像を複数サイズ表示させる

WordPressで表示されるアイキャッチ画像のサイズを、表示する場所によって変えたいケースが出てくることもあります。たとえば、トップとカテゴリー等のアーカイブ表示とかとか。

そんな場合でも、大して記述することもなく簡単に実装することが出来てしまいます。

実を言えば、アイキャッチ画像(投稿サムネイル)も単なるメディアのアップロードされた画像でしかありません。
つまり、メディアにて異なる画像サイズが生成されるようにしておき、表示するときには、追加設定したサイズの画像を表示してあげればいいのです。

画像サイズの追加方法は、画像アップロードで作成される画像の種類を追加するにて紹介してあります。

たとえば、横160px、縦120px、トリミング有りの large_thumbnail というサイズを追加するには、

add_image_size( 'large_thumbnail', 160, 120, true );

となります。

このサイズをアイキャッチ画像を表示するには、設定されているアイキャッチ画像のidが、カスタムフィールドの _thumbnail_id に格納されているので、get_post_meta( $post->ID, ‘_thumbnail_id’, true ); でidを取得し、、、

などとやることも可能なのですが、もっと簡単に表示させることもできます。
アイキャッチ画像を表示する the_post_thumbnail関数は、引数でサイズを指定することも可能なので、

the_post_thumbnail( 'large_thumbnail' );

と指定すれば、一発で異なるサイズのアイキャッチ画像を表示することも可能なのです。

「WordPressのアイキャッチ画像を複数サイズ表示させる」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です