【WordPress】アイキャッチ画像を表示する方法 – has_post_thumbnail(), the_post_thumbnail(), get_the_post_thumbnail() の使い方

WordPressでは、投稿や固定ページごとに「アイキャッチ画像（サムネイル）」を設定することができます。

この記事では、アイキャッチ画像を表示するために使われる主要な関数 has_post_thumbnail()、the_post_thumbnail()、get_the_post_thumbnail() の使い方や、それぞれの違い、出力されるHTML、URLだけを取得する方法などを詳しく解説します。

アイキャッチ画像の有効化

テーマでアイキャッチ画像を使用するには、まず functions.php に以下の記述を追加する必要があります。

// カスタムフィルター経由でテーマサポートを追加
function my_custom_theme_support() {
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_custom_theme_support' );

これにより、投稿編集画面に「アイキャッチ画像を設定」ボックスが表示され、the_post_thumbnail() などの関数が使用可能になります。

has_post_thumbnail() – アイキャッチが設定されているか確認

has_post_thumbnail() は、投稿にアイキャッチが設定されているかを判定する関数です。

if ( has_post_thumbnail() ) {
    echo 'この投稿にはアイキャッチがあります。';
} else {
    echo 'アイキャッチは設定されていません。';
}

この関数は条件分岐に使うのが主な用途です。

the_post_thumbnail() – アイキャッチ画像を表示

もっとも一般的に使われる関数が the_post_thumbnail() です。アイキャッチ画像を HTML の <img> タグとして出力します。

the_post_thumbnail();

サイズを指定して表示する例

the_post_thumbnail( 'thumbnail' ); // 小サイズ
the_post_thumbnail( 'medium' );    // 中サイズ
the_post_thumbnail( 'large' );     // 大サイズ
the_post_thumbnail( 'full' );      // 元サイズ

カスタムサイズを登録して使用する例

// functions.php に追加
add_image_size( 'custom-thumb', 300, 200, true );

// テンプレートで使用
the_post_thumbnail( 'custom-thumb' );

出力されるHTMLの例

<img width="150" height="150" src="https://example.com/wp-content/uploads/2023/01/image.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" />

<img> タグが直接出力され、サイズやクラス、alt属性も自動で挿入されます。

get_the_post_thumbnail() – HTMLを取得して加工・保存に使う

the_post_thumbnail() が「表示」するのに対し、get_the_post_thumbnail() は「HTMLを取得」するための関数です。テンプレート内で加工やキャッシュ処理をしたいときに便利です。

$html = get_the_post_thumbnail( get_the_ID(), 'medium' );
echo '<div class="image-wrap">' . $html . '</div>';

こちらも the_post_thumbnail() と同様にサイズ指定やカスタムサイズが使えます。

アイキャッチの画像URLだけを取得する方法

get_the_post_thumbnail_url() を使ってURLを簡単に取得

アイキャッチ画像のURLを取得するには、get_the_post_thumbnail_url() 関数を使うのがもっとも簡単です。

この関数は、投稿IDとサイズを指定して、指定されたサイズのアイキャッチ画像のURLを返します。

$url = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
echo $url;

第2引数には 'thumbnail', 'medium', 'large', 'full' などのサイズ指定が可能です。省略すると 'post-thumbnail' が使われます。

条件分岐と組み合わせた例

if ( has_post_thumbnail() ) {
    $url = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
    echo '<img src="' . esc_url( $url ) . '" alt="">';
}

この方法は wp_get_attachment_image_src() を使うよりもシンプルで、アイキャッチ画像のURL取得には非常に便利です。URLだけが必要な場合は、get_the_post_thumbnail_url() を優先して使うとよいでしょう。

wp_get_attachment_urlを使った方法

以下のように get_post_thumbnail_id() と wp_get_attachment_url() を組み合わせ取得することもできます。

$thumbnail_id = get_post_thumbnail_id( get_the_ID() );
$thumbnail_url = wp_get_attachment_url( $thumbnail_id );

echo $thumbnail_url;

さらに細かくサイズを指定したURLを取得したい場合は、wp_get_attachment_image_src() を使います。

$thumb_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
$thumb_url = $thumb_info[0];

echo $thumb_url;

投稿一覧ページなどで使う例

ループの中で一覧表示にアイキャッチを表示するコード例です。

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        if ( has_post_thumbnail() ) {
            echo '<a href="' . get_permalink() . '">';
            the_post_thumbnail( 'thumbnail' );
            echo '</a>';
        }
        the_title( '<h2>', '</h2>' );
    endwhile;
endif;

アイキャッチが未設定のときの代替処理

if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'medium' );
} else {
    echo '<img src="' . get_template_directory_uri() . '/images/no-image.png" alt="No Image">';
}

代替画像を表示させることで、デザインの崩れを防ぐことができます。

テーマ側で代替画像を用意する以外にも、カスタマイザーでデフォルト画像を設定できるようにする方法もあります。

まとめ

WordPressのアイキャッチ機能は視覚的な訴求力を高める重要な要素です。

has_post_thumbnail() で存在確認、the_post_thumbnail() で表示、get_the_post_thumbnail() で取得といった形で使い分けることで、柔軟な実装が可能になります。

また、画像URLだけを取得する方法を知っておくと、背景画像やOGP画像などにも応用できます。