2026年7月20日

WordPressで固定ヘッダーを実装する方法

テーマ・デザイン

はじめに

固定ヘッダーは、ユーザーがページをスクロールしながらも常に視界に入るようにするための重要なUI要素です。WordPressテーマで固定ヘッダーを実装することで、サイトのナビゲーション性やユーザーエクスペリエンス(UX)が向上します。

症状・背景

この記事が必要になる主な場面:

ユーザーがページをスクロールしながらも常に視界に入るようにしたい
ステイタスバーの上にヘッダーを固定表示させたい
サイトナビゲーションやログインボタンなどを常に画面のトップに表示する必要がある

手順・設定方法

ステップ1: ヘッダーセクションのCSS追加

# ファイルを編集します。通常、functions.phpやカスタムCSSファイルにスタイルを追加します。
function my_theme_styles() {
    wp_enqueue_style( 'custom-styles', get_template_directory_uri() . '/css/custom.css' );
}
add_action('wp_enqueue_scripts', 'my_theme_styles');

# カスタムCSSファイルを作成または編集し、以下のようなスタイルを追加します。
.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

ステップ2: ヘッダーセクションのHTML構造変更

# テーマのheader.phpファイルを編集します。
<div class="header-fixed">
    <div class="container">
        <!--ヘッダー内容ここに挿入-->
        <h1>サイトタイトル</h1>
        <nav id="site-navigation" role="navigation">
            <ul id="menu-primary-menu" class="nav-menu">
                <!-- メニュー項目 -->
            </ul>
        </nav>
    </div>
</div>

ステップ3: JavaScriptを用いたスムーズなスクロール

# jQueryを使用してヘッダーが固定される点でアニメーションを追加します。
function addStickyHeader() {
    var header = $('.header-fixed');
    $(window).scroll(function() {
        if($(this).scrollTop() > 50) {
            header.addClass('sticky');
        } else {
            header.removeClass('sticky');
        }
    });
}
add_action( 'wp_enqueue_scripts', function(){
    wp_enqueue_script( 'custom-script', get_template_directory_uri().'/js/custom.js', array(), null, true );
});

ステップ4: レスポンシブデザインの考慮

# メディアクエリを使用して、固定ヘッダーがスマートフォンやタブレットなどで適切に表示されるようにします。
@media (max-width: 768px) {
    .header-fixed.sticky {
        position: relative;
        top: auto;
        width: initial;
        z-index: unset;
    }
}

注意事項

CSSの優先度や衝突を避けるため、独自CSSファイルを作成して使用すること。
スクロール位置や固定ヘッダーのサイズに応じたJavaScriptの調整が必要な場合があります。
JavaScriptを使用する際は、ページの読み込み速度やセキュリティに影響を与えないよう注意してください。
レスポンシブデザインに対応させることで、モバイルデバイスでのUXを向上させることが可能です。

まとめ

1. CSS追加: 固定ヘッダーのスタイルをカスタムCSSファイルに追加します。

2. HTML構造変更: ヘッダーセクションのHTMLを修正し、固定ヘッダークラスを適用します。

3. JavaScript使用: スクロール位置に基づいてヘッダーが固定される点でアニメーションを追加します。

4. レスポンシブデザイン対応: メディアクエリを使用して固定ヘッダーの表示を調整します。

5. テストと改善: 各ブラウザやデバイスでの動作確認を行い、必要に応じて調整を行ってください。

Post Views: 1