2026年5月20日

WordPressのヘッダー画像が表示されない場合の解決方法

テーマ・デザイン

はじめに

WordPressのヘッダー画像が表示されない原因は主に3つです。①テーマが custom-header をサポートしていない、②テンプレートで header_image() を呼んでいない、③キャッシュが残っているです。順番に確認しましょう。

症状・原因

外観 → ヘッダーで画像を設定しても反映されない
ヘッダー画像の設定メニュー自体が表示されない
画像を変えても古い画像が表示される

解決手順

ステップ1：テーマがcustom-headerをサポートしているか確認する

// functions.php に以下が必要
add_theme_support('custom-header', [
    'default-image'      => '',
    'width'              => 1920,
    'height'             => 400,
    'flex-width'         => true,
    'flex-height'        => true,
    'header-text'        => false, // テキストオーバーレイの有無
    'uploads'            => true,
]);

これがない場合、「外観 → ヘッダー」メニュー自体が表示されません。子テーマを使っている場合は親テーマの functions.php で定義されているか確認してください。

ステップ2：テンプレートにheader_image()があるか確認する

// header.php
<?php if (has_header_image()) : ?>
    <div class="site-header-image">
        <img src="<?php header_image(); ?>"
             width="<?php echo get_custom_header()->width; ?>"
             height="<?php echo get_custom_header()->height; ?>"
             alt="<?php bloginfo('name'); ?>">
    </div>
<?php endif; ?>

または背景画像としてCSSで表示する場合：

// header.php
<?php if (has_header_image()) : ?>
    <div class="site-hero"
         style="background-image: url('<?php header_image(); ?>')">
    </div>
<?php endif; ?>

// CSSにインラインで出力する方法（functions.php）
add_action('wp_head', function(): void {
    if (!has_header_image()) return;
    $url = esc_url(header_image());
    echo "<style>.site-hero { background-image: url({$url}); }</style>";
});

ステップ3：画像URLを直接確認する

// デバッグ用（確認後は削除すること）
var_dump(get_header_image()); // 設定されている画像URLを出力
var_dump(has_header_image()); // trueかfalseか確認

ステップ4：キャッシュをクリアする

# WP-CLIでキャッシュをクリア
wp cache flush

# オブジェクトキャッシュ（Redis・Memcachedなど）もクリア
wp cache flush --hard

プラグイン経由の場合：

W3 Total Cache: パフォーマンス → すべてのキャッシュを空にする
WP Super Cache: 設定 → キャッシュを削除
LiteSpeed Cache: LiteSpeed Cache → ツール → キャッシュを消去

ステップ5：子テーマでヘッダーをカスタマイズする

// 子テーマの functions.php
add_action('after_setup_theme', function(): void {
    // 親テーマのヘッダー設定を上書き
    add_theme_support('custom-header', [
        'default-image' => get_stylesheet_directory_uri() . '/images/header-default.jpg',
        'width'         => 1920,
        'height'        => 600,
        'flex-height'   => true,
    ]);
}, 11); // 親テーマより後（優先度11）に実行

注意事項

custom-header の width と height は推奨サイズです。flex-width: true を設定すると任意サイズの画像も受け付けます
ヘッダー画像の設定は カスタマイズ → ヘッダー画像 からも変更できます
header_image() は設定されているURLを出力します。画像タグ全体を出力する the_header_image_tag() も利用できます

まとめ

add_theme_support('custom-header', [...]) でサポートを宣言し、header.php で has_header_image() を確認してから header_image() でURL出力するのが基本です。設定後に表示されない場合はキャッシュのクリアを試してください。

Post Views: 24