WordPressを使ってブログサイトなどを構築している場合のデザインパターンとしてテキストだけではなく、アイキャッチなどの画像も表示させたいという場合もあります。記事一覧ページなどにアイキャッチがあれば、視覚的にどのような内容の記事なのかわかりやすくなったりもします。そこで、簡単なアイキャッチ画像の設定方法を見ていきます。

アイキャッチ画像の表示に必要な記述

アイキャッチ画像を表示させるためには、テンプレートタグとそれを利用できるようにするための関数が必要になります。

アイキャッチ画像用のテンプレートタグ

アイキャッチ画像を表示する場合のテンプレートタグは「the_post_thumbnail()」を使います。

<?php the_post_thumbnail('パラメータ'); ?>

パラメータの部分には、画像のサイズを指定します。デフォルトの画像サイズを使用する場合は以下のようになっています。

パラメータなしオリジナルサイズ
thumbnailサムネイルサイズ(150×150px)
medium中サイズ(300×300px)
large大サイズ(640×640px)
fullアップロードした画像サイズ

また、他のサイズを指定したい場合は、以下のように設定します。

<?php the_post_thumbnail( array( 120, 120 ) ); ?>

パラメータの値は「array( 最大の幅, 最大の高さ )」という設定になります。この場合の表示は、オリジナルサイズ、サムネイルサイズ、中サイズ、大サイズの中から自動的に一番近いサイズを選んで、それを縮小して画像が表示されます。

アイキャッチ画像を有効にする

アイキャッチを表示する設定が完了したら、今度はそれを有効にする必要があります。その設定は、使用しているfunctions.php内に以下を追加します。

add_theme_support( 'post-thumbnails' );

これで、アイキャッチ画像が有効になり、表示できるようになります。

おすすめの記事