• HOME
  • WordPressのテーマヘッダーエラーを解決する方法

2026年10月17日

  • シェア
  • ツイート

    • 2026年10月17日

    WordPressのテーマヘッダーエラーを解決する方法

    はじめに

    WordPressのテーマでヘッダーをカスタマイズしたのにサイトに反映されない・wp_head()を削除したらGoogleタグマネージャーやプラグインのスクリプトが動かなくなった・ナビゲーションメニューがヘッダーに表示されない・カスタムヘッダー画像を設定したのにデフォルト画像のまま変わらないといった問題は、WordPressのヘッダーテンプレートの仕組みと必須フックを理解することで解決できます。

    症状・原因

    • header.phpにが記述されておらず、CSSやJSが出力されていない
    • get_header()をテンプレートファイルで呼んでいないため、ヘッダーテンプレートが読み込まれない
    • register_nav_menus()をafter_setup_themeフック外で呼んでいるためメニューが登録されない
    • add_theme_support('custom-header')を設定していないためカスタムヘッダー機能が有効にならない

    解決手順

    ステップ1：ヘッダーエラーを診断する

    # wp_head が header.php に記述されているか確認
wp eval "
\$header = file_get_contents(get_template_directory() . '/header.php');
echo strpos(\$header, 'wp_head') !== false ? 'wp_head あり ✓' : 'wp_head なし ← 必須';
"

# 登録済みナビゲーションメニューを確認
wp eval "
\$menus = get_registered_nav_menus();
foreach (\$menus as \$location => \$label) {
    \$has = has_nav_menu(\$location);
    echo \$location . ': ' . (\$has ? '✓ 割り当て済み' : '× 未割り当て') . PHP_EOL;
}
"

# カスタムヘッダーのサポート確認
wp eval "echo current_theme_supports('custom-header') ? 'カスタムヘッダー: 有効' : 'カスタムヘッダー: 無効';"

# ヘッダーテンプレートファイルの存在確認
wp eval "
\$files = ['header.php', 'header-front.php', 'header-shop.php'];
foreach (\$files as \$f) {
    \$path = locate_template(\$f);
    echo \$f . ': ' . (\$path ? '✓ ' . \$path : '× なし') . PHP_EOL;
}
"

    ステップ2：wp_head()とヘッダーテンプレートを正しく設定する

    // header.php の必須構造
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); // ✅ 必須：CSS・JS・メタタグをここに出力 ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); // ✅ WP 5.2以降：GTMなどのbody直後スクリプト用 ?>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php if (has_custom_logo()): ?>
            <?php the_custom_logo(); ?>
        <?php else: ?>
            <a href="<?php echo esc_url(home_url('/')); ?>">
                <?php bloginfo('name'); ?>
            </a>
        <?php endif; ?>
    </div>

    <nav id="primary-navigation">
        <?php
        wp_nav_menu([
            'theme_location' => 'primary',      // ✅ register_nav_menus で登録した名前
            'container'      => false,
            'menu_class'     => 'nav-menu',
            'fallback_cb'    => false,           // メニュー未設定時に何も出力しない
        ]);
        ?>
    </nav>
</header>

// ✅ テンプレートファイルから呼び出す
<?php get_header(); ?>         // header.php を読み込む
<?php get_header('front'); ?>  // header-front.php を読み込む（フロントページ専用）

    ステップ3：ナビゲーションメニューを正しく登録する

    // ✅ functions.php でナビメニューを登録（after_setup_theme フック必須）
add_action('after_setup_theme', function(): void {
    register_nav_menus([
        'primary'  => 'メインナビゲーション',
        'footer'   => 'フッターナビゲーション',
        'mobile'   => 'モバイルメニュー',
        'social'   => 'ソーシャルリンク',
    ]);
});

// ✅ メニューにカスタムクラスを追加する
add_filter('nav_menu_css_class', function(array $classes, object $item, object $args): array {
    if ($args->theme_location === 'primary') {
        $classes[] = 'nav-item';
        if ($item->current) {
            $classes[] = 'nav-item--active';
        }
    }
    return $classes;
}, 10, 3);

// ✅ メニューにウォーカーを使ってBootstrapスタイルを適用
class Bootstrap_Nav_Walker extends Walker_Nav_Menu {
    public function start_lvl(string &$output, int $depth = 0, object $args = null): void {
        $output .= '<ul class="dropdown-menu">';
    }

    public function start_el(string &$output, object $item, int $depth = 0, object $args = null, int $id = 0): void {
        $classes = empty($item->classes) ? [] : (array) $item->classes;
        $classes[] = 'nav-item';
        if (in_array('menu-item-has-children', $classes, true)) {
            $classes[] = 'dropdown';
        }
        $output .= '<li class="' . esc_attr(implode(' ', $classes)) . '">';
        $atts = ['href' => esc_url($item->url), 'class' => 'nav-link'];
        if (in_array('dropdown', $classes, true)) {
            $atts['class']           .= ' dropdown-toggle';
            $atts['data-bs-toggle']   = 'dropdown';
        }
        $output .= '<a ' . $this->build_atts($atts) . '>' . esc_html($item->title) . '</a>';
    }
}

    ステップ4：カスタムヘッダーを正しく設定する

    // ✅ カスタムヘッダー画像のサポートを追加
add_action('after_setup_theme', function(): void {
    add_theme_support('custom-header', [
        'default-image'      => get_stylesheet_directory_uri() . '/images/header.jpg',
        'default-text-color' => 'ffffff',
        'width'              => 1920,
        'height'             => 400,
        'flex-width'         => true,
        'flex-height'        => true,
        'uploads'            => true,  // 管理画面からアップロード可能
        'video'              => true,  // ヘッダー動画を許可
    ]);

    // ✅ カスタムロゴのサポートも追加
    add_theme_support('custom-logo', [
        'height'      => 80,
        'width'       => 200,
        'flex-height' => true,
        'flex-width'  => true,
    ]);
});

// ヘッダー画像を出力する
// ✅ header.php で使用
$header_image = get_header_image();
if ($header_image): ?>
    <img src="<?php echo esc_url($header_image); ?>"
         width="<?php echo absint(get_custom_header()->width); ?>"
         height="<?php echo absint(get_custom_header()->height); ?>"
         alt="<?php bloginfo('name'); ?>">
<?php endif;

    ステップ5：ヘッダーのカスタマイズとパフォーマンス最適化

    // ✅ wp_body_open に対応する（GTM など）
add_action('wp_body_open', function(): void {
    // Google Tag Manager body スニペット
    if (defined('GTM_ID') && GTM_ID) {
        printf(
            '<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=%s" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>',
            esc_attr(GTM_ID)
        );
    }
});

// ✅ ヘッダーにスキーマ（構造化データ）を追加
add_action('wp_head', function(): void {
    $schema = [
        '@context' => 'https://schema.org',
        '@type'    => 'WebSite',
        'name'     => get_bloginfo('name'),
        'url'      => home_url('/'),
        'potentialAction' => [
            '@type'       => 'SearchAction',
            'target'      => home_url('/?s={search_term_string}'),
            'query-input' => 'required name=search_term_string',
        ],
    ];
    printf(
        '<script type="application/ld+json">%s</script>',
        wp_json_encode($schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)
    );
}, 1);

// ✅ ヘッダーのスティッキー対応（管理バーの高さを考慮）
add_action('wp_head', function(): void {
    if (is_admin_bar_showing()): ?>
    <style>
    .site-header.sticky { top: 32px; }
    @media (max-width: 782px) { .site-header.sticky { top: 46px; } }
    </style>
    <?php endif;
});

    注意事項

    • wp_head()はタグの直前に必ず記述してください。省略すると、プラグインのスクリプトやスタイルシート、SEOメタタグ、Googleアナリティクス等のトラッキングコードが出力されなくなります
    • wp_body_open()はWordPress 5.2以降で利用可能です。それ以前のバージョンとの互換性が必要な場合はfunction_exists('wp_body_open') && wp_body_open()のように呼び出してください

    まとめ

    WordPressのテーマヘッダーエラーの解決は①header.phpのwp_head()記述確認・locate_template()でファイル存在確認・メニュー登録状況確認、②wp_head()とwp_body_open()を正しい位置に配置・get_header('variant')でバリアントヘッダーを利用、③after_setup_themeフックでregister_nav_menus()・nav_menu_css_classフィルターでクラス追加・カスタムウォーカーでBootstrap対応、④add_theme_support('custom-header')とadd_theme_support('custom-logo')の設定・get_header_image()で画像出力、⑤wp_body_openフックでGTM対応・wp_headでスキーマ追加・スティッキーヘッダーの管理バー高さ調整の手順で解決します。

    Views: 10

    お気軽にご相談ください

    お見積りへ お問い合わせへ
    閉じる
    ▲