【WordPress】アイキャッチ画像を取得・表示する方法｜get_the_post_thumbnail()

今回は、WordPressのアイキャッチ画像を取得して表示する方法となります。

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

WordPressのデフォルトテーマTwenty Seventeenなど、アイキャッチ画像はじめから有効となっているテーマは多いと思いますが、有効になっていない場合には以下の関数をfunctions.phpに記述します。

add_theme_support( 'post-thumbnails' );

アイキャッチ画像を取得し表示する例｜get_the_post_thumbnail()

以下のソースコードは、現在の投稿のアイキャッチ画像（フルサイズ）を出力する例となり、画像を表示したい箇所に記述します。

echo get_the_post_thumbnail( 'full' );

アイキャッチ画像の取得する関数はいくつかありますが、今回の例では、img要素でアイキャッチ画像を取得するget_the_post_thumbnail()を使用しました。

また、指定したサイズのアイキャッチ画像を取得するには、引数に画像サイズ名を指定します。

パラメータ

get_the_post_thumbnail関数のパラメータでは、画像サイズ名やimg 要素の属性などを指定できます。パラメータの詳細は以下となります。

get_the_post_thumbnail( $post_id, $size, $attr );

$post_id（省略可）

出力したいアイキャッチ画像の投稿のID。省略した場合は現在の投稿

$size（省略可）

デフォルトで設定されている画像サイズの名前（thumbnail, medium, large, full）を指定するか、 関数add_image_sizeで追加した画像サイズの名前を指定します。また、幅と高さ（ピクセル単位）を配列で指定することも可能。省略した場合はpost-thumbnailとなり、functions.php内で 関数set_post_thumbnail_sizeを使って設定したサイズとなります。

$attr（省略可）

 img 要素の属性を配列で指定。省略した場合は下記のデフォルトの値となります。

$attr = array(
  'src'   => $src, 
  // $srcはアイキャッチ画像のURL
  'class' => "attachment-$size" "size-$size" "wp-post-image" ,
  // $sizeは画像サイズの名前
  'alt' => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ))),
  // 設定したアイキャッチ画像の代替テキスト
);

画像サイズ名について

get_the_post_thumbnailなどの画像を取得する関数で、引数に画像サイズ名を指定してアイキャッチ画像を取得する場合、引数に指定できる画像サイズ名は以下の4つとなります。

上記の4つのサイズは、画像を管理画面からアップロードした際に追加される画像サイズとなります。

「サムネイルのサイズ」「中サイズ」「大サイズ」の画像サイズは、管理画面の「設定」>「メディア」から設定できます。詳しくは、以下のリンク先を参考にしてみてください。

【WordPress】アップロードした際に追加される画像サイズを変更する方法

画像サイズを追加したい場合

また、上記以外に画像サイズを追加したい場合には、add_image_size関数を使用する方法があります。詳しくは以下のリンク先を参考にしてみてください。

【WordPress】アイキャッチ画像などの画像サイズを追加する方法｜add_image_size()