閉じる

WordPressでアイキャッチ画像を表示するthe_post_thumbnailの使い方とカスタマイズ解説

広告

WordPressのテーマ開発において、記事の魅力を視覚的に伝える「アイキャッチ画像」は非常に重要な要素です。

読者の目を引き、クリック率を向上させるためには、適切なサイズやレイアウトで画像を表示する必要があります。

本記事では、WordPressでアイキャッチ画像を表示するための標準的な関数であるthe_post_thumbnailの使い方について詳しく解説します。

基本的なコードの書き方から、実務で役立つ高度なカスタマイズ方法まで網羅的にご紹介しますので、ぜひ参考にしてください。

目次 [ close ]
  1. the_post_thumbnail関数とは
    1. アイキャッチ画像機能を有効化する方法
  2. the_post_thumbnailの基本的な使い方
  3. 画像サイズの指定方法
    1. 標準のキーワードによる指定
    2. カスタムサイズでの指定（配列形式）
  4. 属性のカスタマイズ（classやaltの追加）
  5. 画像が存在するか確認する方法（条件分岐）
  6. functions.phpでの画像サイズ定義
    1. add_image_sizeによる新規サイズ追加
  7. URLのみを取得したい場合
  8. パフォーマンス最適化：Lazy Loading（遅延読み込み）
  9. フィルターフックによる出力内容のカスタマイズ
  10. よくあるトラブルと解決策
  11. まとめ

the_post_thumbnail関数とは

the_post_thumbnailは、投稿や固定ページに設定されたアイキャッチ画像をHTML形式で出力するためのWordPress関数です。

この関数を使用することで、テーマのテンプレートファイル内で簡単に画像を表示させることができます。

通常、この関数は「WordPressループ」と呼ばれる記事の情報を取得するループ処理の中で使用されます。

アイキャッチ画像は、ブログの一覧画面や記事の詳細画面、さらにはSNSでのシェア時のサムネイルとしても活用されるため、正しい実装が求められます。

アイキャッチ画像機能を有効化する方法

WordPressの初期状態や自作テーマの場合、アイキャッチ画像機能が有効になっていないことがあります。

その場合、管理画面の投稿編集エディタに「アイキャッチ画像」の項目が表示されません。

機能を有効にするには、テーマ内のfunctions.phpに以下のコードを記述する必要があります。

PHP
// アイキャッチ画像（投稿サムネイル）機能を有効化する
add_theme_support('post-thumbnails');

この一行を追加することで、投稿や固定ページでアイキャッチ画像を設定できるようになります。

また、特定の投稿タイプに限定して機能を有効にすることも可能ですが、基本的には上記の設定で十分です。

the_post_thumbnailの基本的な使い方

もっともシンプルな使い方は、表示したい場所に以下のコードを記述することです。

PHP
<?php
if (have_posts()) :
    while (have_posts()) : the_post();
        // アイキャッチ画像を表示
        the_post_thumbnail();
    endwhile;
endif;
?>

このコードを記述すると、デフォルトの設定サイズで画像が出力されます。

出力されるHTMLには、imgタグだけでなく、クラス名やalt属性も自動的に付与されます。

実行結果
<img width="150" height="150" src="https://example.com/wp-content/uploads/image-150x150.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="記事のタイトル" />

このように、関数を呼び出すだけでタグ全体が生成される点が特徴です。

画像サイズの指定方法

the_post_thumbnail関数には、引数を渡すことで画像のサイズを指定できます。

WordPressには標準で定義されているキーワードがいくつか存在します。

標準のキーワードによる指定

以下の表は、WordPressでデフォルトで使用可能なサイズキーワードをまとめたものです。

キーワード説明デフォルトサイズ（幅x高さ）
thumbnailサムネイルサイズ150px x 150px
medium中サイズ300px x 300px
large大サイズ1024px x 1024px
fullフルサイズアップロード時の元サイズ

実際のコードでは、以下のように記述します。

PHP
// 中サイズ（medium）で表示する場合
the_post_thumbnail('medium');

カスタムサイズでの指定（配列形式）

キーワード以外にも、特定の幅と高さを数値で指定することができます。

ただし、この方法はサーバー上で動的にリサイズを行うわけではなく、既存の画像から最適なものを選択するため、必ずしも正確な数値にならない場合があります。

PHP
// 幅200px、高さ150pxに近い画像を指定
the_post_thumbnail(array(200, 150));

デザインに合わせて特定の比率を維持したい場合は、後述するadd_image_sizeを利用することをお勧めします。

属性のカスタマイズ（classやaltの追加）

画像に特定のCSSクラスを付与したい場合や、カスタム属性を追加したい場合は、第2引数に配列を渡します。

これにより、フロントエンドのスタイリングが非常に容易になります。

PHP
// クラス名「my-custom-image」を付与して表示
the_post_thumbnail('medium', array('class' => 'my-custom-image', 'alt' => 'カスタム説明文'));

このコードを実行すると、出力結果は以下のようになります。

実行結果
<img width="300" height="300" src="..." class="attachment-medium size-medium wp-post-image my-custom-image" alt="カスタム説明文" />

class属性を指定しても、デフォルトのクラスが消えるわけではなく、追加される点に注意してください。

画像が存在するか確認する方法（条件分岐）

記事にアイキャッチ画像が設定されていない場合、the_post_thumbnailは何も出力しません。

しかし、画像がない場合に「No Image」の画像を表示したいといったケースが多いでしょう。

その場合は、has_post_thumbnail関数を使って条件分岐を行います。

PHP
<?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail('medium'); ?>
<?php else : ?>
    <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="No Image" />
<?php endif; ?>

このように記述することで、画像未設定によるレイアウト崩れを防ぐことができます。

functions.phpでの画像サイズ定義

デザインの要件に応じて、特定の場所（トップページのリスト、サイドバーなど）に合わせた専用の画像サイズを作成することが推奨されます。

これは、大きな画像をそのまま縮小して表示するよりも、パフォーマンス（表示速度）の面で有利だからです。

add_image_sizeによる新規サイズ追加

functions.phpでadd_image_size関数を使用します。

PHP
// 新しい画像サイズ「featured-list」を追加
// 幅600px、高さ400pxで、中央から切り抜き（true）
add_image_size('featured-list', 600, 400, true);

第4引数のtrueは「クロップ（切り抜き）」を行うかどうかを指定するものです。

trueに設定すると、指定したアスペクト比に合わせて画像が強制的に切り抜かれます。

テンプレート側で呼び出す際は、定義した名前を指定します。

PHP
the_post_thumbnail('featured-list');

URLのみを取得したい場合

the_post_thumbnailはimgタグを丸ごと出力してしまいますが、背景画像として使いたい時など、URLだけが欲しい場合があります。

その際はget_the_post_thumbnail_url関数を使用します。

PHP
<?php
$thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
?>
<div style="background-image: url('<?php echo esc_url($thumbnail_url); ?>');">
    <!-- 背景画像として使用 -->
</div>

この関数を利用することで、HTMLの構成をより自由にコントロールできるようになります。

パフォーマンス最適化：Lazy Loading（遅延読み込み）

WordPress 5.5以降、アイキャッチ画像にはデフォルトでブラウザのネイティブ遅延読み込み属性であるloading="lazy"が付与されるようになっています。

これにより、特に設定を行わなくても表示速度の改善が期待できます。

ただし、ファーストビュー（画面上部）にある画像まで遅延読み込みされると、LCP（Largest Contentful Paint）という速度指標が悪化することがあります。

その場合は、特定の画像に対して遅延読み込みを無効にすることを検討してください。

PHP
// 遅延読み込みを無効にする（優先読み込み）
the_post_thumbnail('full', array('loading' => 'eager'));

フィルターフックによる出力内容のカスタマイズ

すべてのアイキャッチ画像に一括で特定の処理を施したい場合、post_thumbnail_htmlというフィルターフックが役立ちます。

例えば、すべてのアイキャッチ画像を<figure>タグで囲いたい場合は、以下のように記述します。

PHP
function wrap_post_thumbnail($html, $post_id, $post_thumbnail_id, $size, $attr) {
    return '<figure class="thumbnail-wrapper">' . $html . '</figure>';
}
add_filter('post_thumbnail_html', 'wrap_post_thumbnail', 10, 5);

このようにフックを活用することで、テーマ全体の保守性を高めることが可能です。

よくあるトラブルと解決策

アイキャッチ画像が表示されない場合、いくつかの原因が考えられます。

一つ目は、前述のadd_theme_support('post-thumbnails');が記述されていないことです。

二つ目は、投稿画面で右側の「アイキャッチ画像」パネルに画像が設定されていないことです。

三つ目は、「以前アップロードした画像には新しいサイズ設定が適用されない」という仕様です。

add_image_sizeで新しいサイズを追加した後は、過去にアップロードした画像に対してもそのサイズを生成する必要があります。

「Regenerate Thumbnails」といったプラグインを使用することで、過去の画像を再生成して新しいサイズに対応させることができます。

まとめ

WordPressのthe_post_thumbnail関数は、単に画像を表示するだけでなく、柔軟なサイズ指定や属性の付与が可能な非常に便利な機能です。

基本的な使い方をマスターしたら、次はadd_image_sizeによるオリジナルサイズの定義や、条件分岐によるエラー回避に挑戦してみましょう。

特にパフォーマンスを意識して、適切な画像サイズを選択することは、SEO対策やユーザーエクスペリエンスの向上にも直結します。

今回解説したテクニックを駆使して、より高品質なWordPressサイトの構築を目指してください。

URLをコピーしました！