WordPressのヘッダー画像が表示されないときの確認手順と直し方

WordPress のヘッダー画像が表示されないときは、原因がどこにあるかを順に切り分けると早く片づきます。確認する順番は次のとおりです。

1. 使っているテーマがヘッダー画像の機能（custom-header）に対応しているか
2. ヘッダー画像の設定が今のテーマに保存されているか
3. テンプレートが画像を出力しているか
4. 画像の URL が開けるか、CSS で隠れていないか
5. キャッシュに古いページが残っていないか

この記事の内容は WordPress 6.9 のソースコードで確認しています（2026年10月時点）。

症状から見当をつける

1. テーマが custom-header に対応しているか確かめる

ヘッダー画像の設定画面は、テーマが add_theme_support( 'custom-header' ) で機能を宣言しているときだけ表示されます。対応していれば、「外観」→「ヘッダー」か「外観」→「カスタマイズ」→「ヘッダー画像」（動画にも対応したテーマでは「ヘッダーメディア」）から設定できます。

WP-CLI が使える場合は、次のコマンドで対応の有無がわかります。

wp eval 'var_dump( current_theme_supports( "custom-header" ) );'

bool(false) なら、そのテーマにはヘッダー画像の機能がありません。対処は次のどちらかです。

• ブロックテーマ（Twenty Twenty-Two 以降の標準テーマなど）の場合: ヘッダーはサイトエディターで編集します。「外観」→「エディター」でヘッダーのテンプレートパーツを開き、画像ブロックやカバーブロックを置きます。カスタマイザーのヘッダー画像は使いません。
• クラシックテーマで機能がない場合: テーマ独自の設定画面にヘッダー画像の項目がないか確認します。自作テーマや子テーマで機能を足すなら、functions.php で宣言します。

<?php
// functions.php（クラシックテーマ）
add_action( 'after_setup_theme', function () {
	add_theme_support(
		'custom-header',
		array(
			'width'       => 1920,
			'height'      => 400,
			'flex-width'  => true,
			'flex-height' => true,
			'header-text' => false,
		)
	);
} );

width と height は推奨サイズで、カスタマイザーで画像を選ぶときの切り抜きの基準になります。flex-width と flex-height を true にすると、その方向は推奨サイズと違う画像も受け付けます。宣言しただけでは画像は表示されないので、手順3のテンプレートの出力も必要です。

2. ヘッダー画像の設定値を確かめる

画像を選んだはずなのに表示されない場合は、保存されている値を見ます。

wp theme mod get header_image

ヘッダー画像の設定は、テーマごとに theme_mods_テーマのフォルダー名 というオプションに保存されます。そのため、親テーマから子テーマに切り替えた直後や、別のテーマに切り替えた後は、前のテーマで選んだ画像は引き継がれません。今のテーマでカスタマイザーを開き、画像を選び直して「公開」を押してください。

3. テンプレートが画像を出力しているか確かめる

クラシックテーマでは、ヘッダー画像を表示するコードが header.php などのテンプレートに必要です。テーマ（子テーマの場合は子テーマ側にコピーした header.php を含む）に、次のような出力があるか確かめます。

画像タグとして出力するなら、the_header_image_tag() が手軽です。width・height・alt と、使える場合は srcset も付いた img タグを出力します。

<?php if ( has_header_image() ) : ?>
	<div class="site-header-image">
		<?php the_header_image_tag(); ?>
	</div>
<?php endif; ?>

URL だけが必要な場合は、関数の違いに注意します。

テンプレートの中で直接出力するなら header_image() を使います。

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

PHP の変数に入れて使う場合は get_header_image() を使い、出力するときに esc_url() を通します。esc_url( header_image() ) と書くと、header_image() がその場で URL を出力してしまい、esc_url() には何も渡らないため、意図した場所に URL が入りません。

<?php
// functions.php：背景画像として CSS に書き出す例
add_action( 'wp_head', function () {
	if ( ! has_header_image() ) {
		return;
	}
	printf(
		'<style>.site-hero{background-image:url("%s");}</style>' . "\n",
		esc_url( get_header_image() )
	);
} );

背景画像として表示する場合、要素に高さがないと画像は見えません。.site-hero に min-height などを指定してください。

4. 画像の URL と CSS を確かめる

手順2で取り出した URL をブラウザーで直接開きます。

• 404 になる: メディアライブラリから画像を削除した、サイトを移転して古いドメインの URL が残っている、などが考えられます。画像を選び直すのが簡単です。移転でまとめて URL が古いままなら、シリアライズされた値も正しく置き換えられる wp search-replace を使います。先に --dry-run で件数を確かめてから実行し、作業前にデータベースのバックアップを取ってください。

wp search-replace 'http://old.example.com' 'https://www.example.com' --dry-run

• 画像は開けるがページに出ない: ブラウザーの開発者ツールで、ヘッダー部分の要素を選びます。display: none や高さ 0 になっていないか、コンソールに混在コンテンツ（https のページで http の画像を読み込む）の警告が出ていないかを見ます。

5. キャッシュを消して確認する

設定を変えても古い画像が見える場合は、キャッシュが残っています。消す順番は次のとおりです。

1. ブラウザー: シークレットウィンドウで開き直すと、ブラウザーのキャッシュの影響を除けます
2. ページキャッシュのプラグイン: 使っているプラグインの管理画面や管理バーにある、キャッシュを削除する機能を使います
3. サーバーや CDN のキャッシュ: レンタルサーバーのキャッシュ機能や CDN を使っている場合は、その管理画面から削除します
4. オブジェクトキャッシュ: Redis や Memcached を使っている場合は、WP-CLI で削除できます

wp cache flush

wp cache flush はオブジェクトキャッシュを空にするコマンドで、ページキャッシュのプラグインが作った HTML のキャッシュは消えません。--hard のようなオプションはないので、ページキャッシュはプラグインの機能で消してください。

子テーマでヘッダー画像の設定を変える

親テーマが決めた推奨サイズなどを子テーマで変えたいときは、add_theme_support( 'custom-header' ) の動きに注意が必要です。同じ機能を2回宣言した場合、WordPress は先に登録された値を優先します。さらに width・height・header-text・default-image・default-text-color は、最初に登録されたときの値が定数（HEADER_IMAGE_HEIGHT など）に固定されます。そのため、親テーマより後（after_setup_theme の優先度11など）で宣言し直しても、いったん remove_theme_support() で外してから登録し直しても、親テーマの高さや幅は変わりません。

子テーマの値を使わせるには、親テーマより先に登録します。子テーマで指定しなかった項目は、後から登録される親テーマの値で補われます。

<?php
// 子テーマの functions.php
add_action( 'after_setup_theme', function () {
	add_theme_support(
		'custom-header',
		array(
			'default-image' => get_stylesheet_directory_uri() . '/images/header-default.jpg',
			'height'        => 600,
			'flex-height'   => true,
		)
	);
}, 9 ); // 親テーマ（優先度10で登録している場合）より先に実行する

この例では、高さは子テーマの 600、幅などの指定しなかった項目は親テーマの値になります。親テーマがどこで登録しているかは、親テーマのファイルで add_theme_support( 'custom-header' を検索して確かめます。

• after_setup_theme に優先度を指定せずに登録している（優先度10）場合は、上の例の 9 で先に登録できます
• 優先度が 9 以下の場合は、子テーマ側をそれより小さい数にします
• フックを使わずに functions.php の中で直接登録している場合は、子テーマ側も functions.php の中で直接 add_theme_support() を書きます。子テーマの functions.php は親テーマの functions.php より先に読み込まれるためです

default-image に指定した画像は、ヘッダー画像をまだ一度も選んでいないテーマで表示されます。手順2で remove-header になっている場合は表示されません。

まとめ

• まず current_theme_supports( 'custom-header' ) でテーマの対応を確かめる。ブロックテーマはサイトエディターでヘッダーを編集する
• wp theme mod get header_image で設定値を見る。設定はテーマごとなので、子テーマに切り替えたら選び直す
• テンプレートでは the_header_image_tag() か header_image() で出力する。変数に入れるときは get_header_image() と esc_url() を使う
• 画像の URL を直接開き、404・CSS・混在コンテンツを確かめる
• wp cache flush はオブジェクトキャッシュだけを消す。ページキャッシュはプラグインや CDN の機能で消す