2026年5月20日

WordPressのアイキャッチ画像が表示されない場合の解決方法

エラー・白い画面

はじめに

記事にアイキャッチ画像を設定しているのに一覧ページや記事ページに表示されない場合、テーマがアイキャッチ機能に対応していないか、テンプレートの実装が不完全なことが原因です。

症状・原因

アイキャッチ設定欄が管理画面に表示されない → add_theme_support('post-thumbnails') 未設定
設定はできるが表示されない → テンプレートに the_post_thumbnail() がない
一部のサイズが表示されない → サムネイルが再生成されていない
OGP画像として使われない → og:image 出力コードが未実装

解決手順

ステップ1：テーマにアイキャッチ機能を追加

// functions.php（子テーマ推奨）
add_action('after_setup_theme', function() {
    // アイキャッチ画像（サムネイル）機能を有効化
    add_theme_support('post-thumbnails');

    // カスタムサイズを追加
    add_image_size('card-thumb',   400, 300, true); // クロップあり
    add_image_size('hero-image',  1200, 600, true);
    add_image_size('ogp-image',   1200, 630, true);
});

ステップ2：テンプレートに出力コードを追加

// single.php や archive.php に追加
<?php if (has_post_thumbnail()) : ?>
    <figure class="featured-image">
        <?php the_post_thumbnail('large', [
            'loading' => 'lazy',
            'alt'     => esc_attr(get_the_title()),
        ]); ?>
    </figure>
<?php endif; ?>

ステップ3：アイキャッチ画像のURLを取得する

// URLとして取得（<img>タグではなくURLが必要な場合）
$thumb_id  = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_url($thumb_id, 'large');

// フォールバック付き
$image_url = $thumb_url ?: get_template_directory_uri() . '/images/default.jpg';

ステップ4：既存画像のサムネイルを再生成

新しいサイズを add_image_size() で追加しても、既存の画像は自動的に再生成されません。

# Regenerate Thumbnails プラグインを使う
wp plugin install regenerate-thumbnails --activate
wp eval 'regenerate_thumbnails_main();'

# または WP-CLI で直接実行
wp media regenerate --yes

ステップ5：カスタム投稿タイプのアイキャッチ対応

// カスタム投稿タイプで個別にサポートを追加
register_post_type('portfolio', [
    'supports' => ['title', 'editor', 'thumbnail'],  // thumbnail を追加
    // ...
]);

ステップ6：REST APIでアイキャッチURLを取得

ヘッドレスWordPressやブロックテーマで使う場合：

// REST APIのレスポンスにアイキャッチURLを追加
add_action('rest_api_init', function() {
    register_rest_field('post', 'featured_image_url', [
        'get_callback' => function($post) {
            $id = get_post_thumbnail_id($post['id']);
            return $id ? wp_get_attachment_image_url($id, 'large') : null;
        },
    ]);
});

注意事項

add_theme_support('post-thumbnails') は after_setup_theme フック内で呼ぶ必要があります
画像サイズは追加後にアップロードされた画像にのみ自動適用されます（既存画像は wp media regenerate が必要）
アイキャッチ画像をOGPにも使う場合は別途 og:image タグの出力が必要です

まとめ

アイキャッチが表示されない場合は、まず add_theme_support('post-thumbnails') の有無を確認し、テンプレートに the_post_thumbnail() を追加します。カスタムサイズを追加した後は wp media regenerate --yes で既存画像を再生成してください。

Post Views: 29