WordPressのヘッダーをカスタマイズする方法・ロゴ・スクリプト・スティッキーヘッダー

はじめに

「ヘッダーにロゴや電話番号を追加したい」「スクロールで固定されるスティッキーヘッダーを実装したい」——WordPressのヘッダーは子テーマとフックを組み合わせることで安全にカスタマイズできます。

症状・原因

ヘッダーのカスタマイズで多い問題は、メタタグの重複・スクリプトの読み込み順序エラー・スティッキーヘッダー実装時のz-indexの競合です。wp_head()フックを正しく理解することで、これらの問題を回避できます。

解決手順

ステップ1：カスタムロゴを設定する

// functions.phpでカスタムロゴを有効化
add_action( 'after_setup_theme', function() {
    add_theme_support( 'custom-logo', [
        'height'      => 60,
        'width'       => 200,
        'flex-height' => true,
        'flex-width'  => true,
        'header-text' => [ 'site-title', 'site-description' ],
    ] );
} );

// テンプレートでカスタムロゴを表示
if ( has_custom_logo() ) {
    the_custom_logo();
} else {
    echo '<a href="' . home_url() . '" class="site-title-link">';
    echo '<span class="site-title">' . get_bloginfo( 'name' ) . '</span>';
    echo '</a>';
}

管理画面での設定:
  外観 → カスタマイズ → サイト基本情報
  → ロゴを選択 → 画像を選択またはアップロード
  → 公開

ステップ2：wp_head()フックでメタタグを追加する

// wp_head()フックでカスタムメタタグを追加
add_action( 'wp_head', function() {
    echo '<meta name="author" content="' . get_bloginfo( 'name' ) . '">' . "\n";
    echo '<meta name="robots" content="index, follow">' . "\n";

    // ページ別のメタディスクリプション
    if ( is_single() || is_page() ) {
        $description = get_the_excerpt();
        if ( $description ) {
            echo '<meta name="description" content="'
                . esc_attr( wp_strip_all_tags( $description ) ) . '">' . "\n";
        }
    }
}, 1 ); // 優先度1（早めに実行）

// プリロードリンクを追加（LCP改善）
add_action( 'wp_head', function() {
    if ( is_singular() ) {
        $thumbnail = get_the_post_thumbnail_url( null, 'large' );
        if ( $thumbnail ) {
            echo '<link rel="preload" as="image" href="'
                . esc_url( $thumbnail ) . '">' . "\n";
        }
    }
}, 2 );

ステップ3：ヘッダーのスクリプトを最適化する

// 不要なデフォルトスタイルを削除
add_action( 'wp_enqueue_scripts', function() {
    // WordPressコアのブロックスタイルを条件付きで無効化
    if ( ! is_singular() || ! has_blocks() ) {
        wp_dequeue_style( 'wp-block-library' );
        wp_dequeue_style( 'wp-block-library-theme' );
        wp_dequeue_style( 'global-styles' );
    }

    // jQueryをフッターに移動（ヘッダーの読み込みを高速化）
    // ※依存関係に影響する場合があるので慎重に
    wp_scripts()->add_data( 'jquery', 'group', 1 );
    wp_scripts()->add_data( 'jquery-core', 'group', 1 );
    wp_scripts()->add_data( 'jquery-migrate', 'group', 1 );
} );

// メインCSSをインラインで埋め込む（Critical CSS）
add_action( 'wp_head', function() {
    $css_file = get_stylesheet_directory() . '/css/critical.css';
    if ( file_exists( $css_file ) ) {
        echo '<style id="critical-css">';
        echo file_get_contents( $css_file ); // phpcs:ignore
        echo '</style>';
    }
}, 5 );

ステップ4：スティッキーヘッダーを実装する

/* style.css: スティッキーヘッダーの基本スタイル */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

/* スクロール後にシャドウを強調 */
.site-header.scrolled {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* WordPress管理バーとの競合を避ける */
.admin-bar .site-header {
    top: 32px; /* 管理バーの高さ */
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

// スクロール検知でクラスを追加
document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('.site-header');
    if (!header) return;

    window.addEventListener('scroll', function() {
        header.classList.toggle('scrolled', window.scrollY > 50);
    }, { passive: true }); // passiveでスクロールパフォーマンス向上
});

ステップ5：ヘッダーにカスタム情報を追加する

// header.phpをオーバーライドせずにヘッダーコンテンツを追加
// テーマによってはアクションフックが提供されている
// 例: add_action('header_before_nav', ...)

// 汎用的にheader.phpをオーバーライドする場合
// cp parent-theme/header.php child-theme/header.php

// 電話番号・営業時間をトップバーに追加
add_action( 'wp_body_open', function() {
    echo '<div class="top-bar">';
    echo '<span class="tel">📞 03-1234-5678</span>';
    echo '<span class="hours">営業時間: 平日 9:00-18:00</span>';
    echo '</div>';
} );

注意事項

• wp_head()の呼び出しはタグの直前に必須です。省略するとWordPressのスクリプト・スタイルが読み込まれなくなります。
• スティッキーヘッダーはposition: fixedではなくposition: stickyを使うと、ページ先頭では通常表示、スクロール後に固定される自然な動作が実現できます。
• ヘッダーに電話番号等の情報を直接コーディングすると変更時にテーマファイルの編集が必要になります。カスタマイザー設定またはカスタムフィールドで管理する方法を検討してください。

まとめ

ヘッダーカスタマイズは「カスタムロゴ設定→wp_headフックでメタタグ追加→スクリプト最適化→スティッキーヘッダー実装→wp_body_openでトップバー追加」の流れで実現できます。テーマ更新への耐性を保つためにフックを積極的に活用しましょう。関連記事：WordPressのフッターをカスタマイズする方法、WordPressのCore Web Vitals（LCP）を改善する方法。