WordPressでサムネイル（アイキャッチ）画像を取得する方法

投稿の一覧や個別ページのヘッダーにアイキャッチ画像を表示することは多いですよね。

今回は、アイキャッチ画像を取得・表示できる関数をまとめました。事前準備から実際の活用までご紹介してますので、これから開発を始める方はぜひ参考にしてください。

アイキャッチ画像を取得するための事前準備

デフォルトでは、アイキャッチ画像のフィールドが表示されません。そのため、下記をfunctions.php等に追加して、アイキャッチ画像を有効化する必要があります。

add_theme_support('post-thumbnails');

この記述がないと、この先紹介する関数を使用できないため、必ず確認しておきましょう。

アイキャッチ画像（サムネイル）の取得方法

WordPressには、画像を取得できる様々な関数が用意されています。今回は、使用頻度が高く、利用しやすいものを下記にまとめました。

the_post_thumbnail()	アイキャッチ画像をimgタグとして出力
the_post_thumbnail_url()	アイキャッチ画像のURLを出力
get_the_post_thumbnail_url()	アイキャッチ画像のURLを取得
wp_get_attachment_image_src()	画像の情報を配列で取得（アイキャッチ以外も使用可）

また、これらの関数は全て引数に画像サイズ（medium、large、full等）を指定できます。こちらにはメディア設定の各画像サイズを指定できますので、下記を参考に設定してみてください。（テーマ側で独自のサイズを追加することも可能）

2021.04.11

2021.04.12

WordPressのメディア設定を理解しよう

メディア設定では、メディアライブラリに関する下記の設定を行います。生成される画像サイズの設定画像の保管場所をフォルダで分類するかどうか特別な理由がなければ、デフォルトの設定でも問題はありませんので、当記事を参考に必要な箇所だけ設定を変更していただければ幸いです。メディ...

the_post_thumbnail()

アイキャッチ画像を取得して、imgタグとして出力する一連の流れをこの１行で行えます。

the_post_thumbnail();

実際に出力されるHTMLは下記になります。

<img
  width="画像の横幅"
  height="画像の高さ"
  src="画像URL" class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
  alt="メディアライブラリの代替テキスト"
  loading="lazy"
  srcset="ウィンドウ幅毎の画像サイズ"
/>

出力内容は自動で設定されますが、引数に画像のサイズ（第1引数）とimgタグの属性（第2引数）を指定できるので、下記のように指定したり、class名やid名を個別に追加することも可能です。

the_post_thumbnail(
  'medium', /* 任意の画像サイズ */
  array(
    'class' => 'my-class', /* 任意のクラス名 */
    'id'    => 'my-id' /* 任意のid名 */
  )
);

the_post_thumbnail_url()

アイキャッチ画像のURLだけを出力できます。引数には画像サイズを指定できます。

the_post_thumbnail_url( 'full' );

// 出力結果
https://example.com/wp-content/uploads/2020/08/画像ファイル名.jpg

get_the_post_thumbnail_url()

アイキャッチ画像のURLを取得できます。出力するにはechoが必要となります。

echo get_the_post_thumbnail_url(
  get_the_ID(), // 投稿IDまたは投稿オブジェクトを指定（省略可）
  'full' // 画像サイズを指定
);

// 出力結果
https://example.com/wp-content/uploads/2020/08/画像ファイル名.jpg

第1引数には表示したいアイキャッチ画像の投稿ID（投稿オブジェクト）を指定できるので、任意の記事から画像を取得することも可能です。

wp_get_attachment_image_src()

画像の情報を配列で取得できます。第1引数に添付ファイルのIDを指定できるため、アイキャッチ画像に限らず、カスタマイザーやカスタムフィールド等の画像も取得できるようになっています。

$thumbnail = wp_get_attachment_image_src(
  get_post_thumbnail_id(), // 取得したい画像のID
  'medium' // 画像サイズを指定
);
print_r( $thumbnail );

// 出力結果
Array ( 
 [0] => 画像のURL
 [1] => 画像の横幅
 [2] => 画像の高さ
 [3] => 画像がリサイズされていたら1を返す
)

取得した情報を元に様々な用途に使えますので、覚えておくと非常に便利です。

この関数は第3引数も設定できますが、使用する機会が少ないため省略しています。

実際にアイキャッチ画像を表示してみる

関数を見るだけでは、いまいち使用するイメージが湧きにくいですよね。

今回は、投稿の個別ページに、記事タイトルとアイキャッチ画像だけを表示するシンプルな記述を下記に用意しました。single.phpに貼り付けて動作をご確認ください。

if ( have_posts() ) : while ( have_posts() ) : the_post();
  the_title( '<h1>', '</h1>' ); /* 記事タイトルの表示（h1で囲む）*/
  if( has_post_thumbnail() ) { /* アイキャッチ画像が設定されているかの判定 */
    the_post_thumbnail( 'full' ); /* アイキャッチ画像をimgタグで表示 */
  }
endwhile; endif;

非常に簡素ですが、個別ページのヘッダーの基本的な形になります。こちらにカテゴリーや日付、本文等を追加し、HTML構造を整えていけば、本格的なページに仕上げることもできます。