WordPressでアイキャッチ画像を表示する方法です。

幾つかの関数があります。特に、WordPress ver4.4 で追加された便利な関数は見落としている人も多いのではないでしょうか？

アイキャッチ画像とは？

WordPressにおいて、アイキャッチ画像とは、投稿に関連付けされた画像を指します。

アイキャッチ画像を表示する方法

テーマ内で、アイキャッチ画像機能を有効にする

テーマ内で、アイキャッチ画像を有効にする必要があります。functions.phpに下記を追記して下さい。

add_theme_support( 'post-thumbnails' );

インストールしたテーマなら、多くの場合この記述はすでに含まれているはずです。

投稿のアイキャッチ画像を設定する

上記の記述でアイキャッチ画像が有効であれば、個々の投稿の編集画面の右下に、このような設定UIが表示されるはずです。

任意の画像をアップロードし、設定して下さい。

IMGタグを取得する

投稿にアイキャッチが設定されたなら、あとは、テーマのソースコードで出力の処理を記載するだけです。

// アイキャッチのIMGタグを取得する
the_post_thumbnail( 'medium' );

第一引数にサイズを取ります。thumbnail, medium, large, fullのいずれかを入力します。詳しくは、コーデックスを御覧ください。

• Codex: the_post_thumbnail()

これらのサイズは、[管理画面] > [設定] > [メディア] でサイズを変更できます。ただし、画像が圧縮され、生成され、保存されるのは、画像をアップロードした直後ですので、サイズの変更は、すでにアップロードされてしまった画像には反映されません。

既存の画像にサイズ変更を適応するには、「regenerate thumbnail」というプラグインを使うのが一般的です。

• プラグイン：Regenerate thumbnails

アイキャッチ画像のURL文字列を取得する方法

上記はIMGタグを出力していまいますが、URL文字列を取得したいときもあるはずです。

下記の関数が（WordPress ver4.4以降）利用できます。下記のget_the_ID()関数は、ループ内でのみ有効ですので、ご注意下さい。

// 投稿のアイキャッチ画像のURLを取得
get_the_post_thumbnail_url( get_the_ID(), 'medium' );

出力するのであれば、下記の関数です。引数のパターンが異なる事に注意して下さい。

// 投稿のアイキャッチ画像のURLを出力
the_post_thumbnail_url( 'medium' );

関数の詳細です：

• Codex: get_the_post_thumbnail_url()
• Codex: the_post_thumbnail_url()

参考リンク

• WordPress：アイキャッチのURLを一撃取得する、新しい関数。