アイキャッチ画像を表示する様々な関数と書き方

アイキャッチ画像を表示させる前に、functions.phpにアイキャッチ画像表示を許可する記述を入れておきましょう。

アイキャッチ画像を表示する関数は主に以下の4つです。

the_post_thumbnail()…アイキャッチ画像をimgタグとして出力
the_post_thumbnail_url()…アイキャッチ画像のURLを出力
get_the_post_thumbnail_url()…投稿IDのアイキャッチ画像のURLを取得
wp_get_attachment_image_src()…画像の情報を配列で取得

ページにアイキャッチ画像を表示する

Wordpressサイトの投稿記事一覧に頻繁に表示されるのが「アイキャッチ画像」ですよね。

本記事ではこのアイキャッチ画像を取得・表示する方法をまとめています。

アイキャッチ画像の表示には事前準備が必要

まずWordpressの初期状態では、コードを記述してもアイキャッチは表示されない様になっています。

前準備なしでテーマファイルに記述しても、アイキャッチ画像は表示できない訳です。

まずはテーマのfunctions.phpに、アイキャッチ画像の表示を許可する設定から行いましょう。

functions.phpの記述

//アイキャッチ画像の表示 add_theme_support('post-thumbnails');

この記述が必ず必要ですので、ファイルの一番上などに入れておきましょう。

様々な関数パターン

アイキャッチ画像には、取得できる様々な関数が用意されています。

関数ごとに出力される情報や形態が違ってきますので、場面に応じて使い分ける事になります。

サイズも調整できる

またこれらの関数は、末尾の()内に引数で画像サイズを指定する事ができます。

こちらにはメディア設定の各画像サイズ（medium、large、full等）が指定できる訳ですね。

サイズの目安

値	名称	デフォルトサイズ（最大）
thumbnail	サムネイル	150px x 150px
medium	中サイズ	300px x 300px
large	大サイズ	640px x 640px
full	フルサイズ	アップロードした画像の元サイズ

では早速一つずつコードを紹介しましょう。

the_post_thumbnail();

the_post_thumbnail();は画像の情報を取得して、imgごと出力する関数です。

<?php the_post_thumbnail(); ?>

出力されるHTMLソース

<img src="画像URL" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" width="" height="" alt="代替テキスト" loading="lazy" srcset="ウィンドウ幅毎の画像サイズ" /> この様にimgタグが丸ごと出力されます。

引数の設定

出力時の()内の引数に、画像サイズや属性などを付与する事もできます。

the_post_thumbnail( 'medium', /* 画像サイズ */ array( 'class' => 'オリジナルクラス名', 'id' => 'オリジナルid名' ) );

上記の様にすれば、サイズ指定や任意のclass・id名を指定した状態でimgタグを出力する事ができる訳です。

これらの指定が無い場合は自動で出力されます。

the_post_thumbnail()の出力例

the_post_thumbnail()を使って、タイトルとアイキャッチ画像・本文を表示するサンプル記述です。

if ( have_posts() ) : while ( have_posts() ) : the_post(); if( has_post_thumbnail() ) { //アイキャッチの有無 <?php the_post_thumbnail( 'full' ); ?> //フルサイズ画像出力 } <h3><?php the_title(); ?></h3> //タイトル <div><?php the_content(); ?></div> //本文 endwhile; endif;

上記はsingle.phpで記事の詳細を出力する、基本的なパターンです。

さらに日付やレイアウト面のHTMLを整備してブラッシュアップする必要がありますね。

the_post_thumbnail_url();

the_post_thumbnail_url();は、画像のURL部分だけを出力する関数です。

imgタグの部分は出力されないので、自前で用意する必要があります。

<?php the_post_thumbnail_url( 'full' );?>

上記は引数として画像サイズを「最大」で指定した場合です。

出力されるHTMLソース（img1.pngの場合）

https://lpeg.info/wp-content/uploads/2023/05/img1.png 画像のパスのみが出力されます。

the_post_thumbnail_url()の出力例

<?php if(have_posts()): while(have_posts()): the_post(); ?> <?php if(has_post_thumbnail()): ?> <!--アイキャッチ画像がある場合--> <img src="<?php the_post_thumbnail_url( 'midium' ); ?>" alt="<?php the_title(); ?>"> <?php else : ?> <!--アイキャッチ画像がない場合--> <?php endif; ?> <?php endwhile; endif; ?>

上記の様にimgタグは自分で記述して、URL部分を関数で生成するようにしています。

この関数を使えば、URLだけ取得しつつimgタグを自由に操作できるので便利ですね。

get_the_post_thumbnail_url();

get_the_post_thumbnail_url();も、アイキャッチ画像のURL部分を取得する事ができます。

先程と違う点は、アイキャッチ画像urlを取得はしますが、出力はしない点です。

そのため、この関数コードで出力するには別途「echo」の記述が必要になるのですね。

echoを使ったコード記述

//未指定 get_the_post_thumbnail_url(); //echo出力（ID・画像サイズ指定） echo '<img src="get_the_post_thumbnail_url( get_the_ID(), 'full');">'; get_the ID()のところに投稿IDが入ります。

取得される情報

https://lpeg.info/wp-content/uploads/2023/05/img1.png 先程と同様に画像パスのみです。

一つ前の関数との違いは、第1引数に表示したいアイキャッチ画像の投稿ID（投稿オブジェクト）を指定できる点です。

これまでの関数の場合、自動的に「同じ記事上のアイキャッチ画像」が出力対象になっていました。

それに対してこの関数の場合、例えばAの記事上でBの記事のアイキャッチ画像を取得することができる訳です。

get_the_post_thumbnail_url()の出力例

<?php if(have_posts()): while(have_posts()): the_post(); ?> $img = get_the_post_thumbnail_url( 55, 'medium' ); echo '<img src="' .$img. '" alt="' .get_the_title(). '">'; <?php endwhile; endif; ?>

上記は投稿IDが55番の画像をサイズはmediumで指定しています。

この関数を使えば、どのページ上でもこの55番の画像を表示させる事ができる訳ですね。

変数へ代入

さらにget_the_post_thumbnail_urlで取得したデータは一旦変数に代入し、echoで出力しています。

変数に代入する事で、使い回しができる様になります。

wp_get_attachment_image_src();

wp_get_attachment_image_src();も画像情報を「取得のみ」する関数です。

さらにこの関数は情報を「配列」で取得できるものになります。

第1引数に画像ファイルIDを指定でき、第2引数でサイズ指定ができます。

コード記述

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

上記は取得された配列情報をprint_rで出力しています。

出力されるprint_r配列情報の結果

取得した情報を元に様々な用途に使えるようになります。

wp_get_attachment_image_src()の出力例

<?php // アイキャッチ画像IDを取得 $thumbnail_id = get_post_thumbnail_id(); // 画像サイズは「medium」指定 $img = wp_get_attachment_image_src( $thumbnail_id , 'medium' ); // imgタグを出力しurlに$img[0]、widthに&img[1]、heightに$img[2]を指定 echo '<div class="gallery"><img src="'.$img[0].'" width="'.$img[1].'" height="'.$img[2].'" data-alias="img01"></div>';　 ?>

ループ内の処理なら、the_post_thumbnail()でアイキャッチ画像の表示は簡単でしょう。

しかしimgタグに独自属性を追加したい場合や、特定のアイキャッチ画像を様々なページで使いたいケースもあるはずです。

そんな時はget_the_post_thumbnail_url()や、wp_get_attachment_image_src()が役に立ちます。

一押し人気コーナー紹介