WordPressでヘッダーを固定（フィックスド）表示にする方法【コピペで使えるCSS付き】

「外観 → カスタマイズ → 追加CSS」を使うのが最も手軽です。テーマファイルを直接編集する場合は、必ず子テーマ（チャイルドテーマ）のstyle.cssに記述してください。親テーマを直接編集すると、テーマ更新時にすべての変更が消えてしまいます。

ヘッダー部分を右クリックして「検証」（ブラウザの開発者ツール）を開き、ヘッダー全体を囲んでいる要素のclassまたはidを確認します。多くのテーマではheader、.site-header、#mastheadのような名前になっています。

Apuraテーマの場合、開発者ツールで確認すると次のような構造になっています。この記事のCSSサンプルで使っている .site-header は、<header> タグに付与されたクラス名です。

<!-- ブラウザの開発者ツールで見えるHTML（出力例） -->
<header id="masthead" class="site-header">
  <div class="header-inner">

    <!-- ① ロゴ・サイト名エリア -->
    <div class="site-branding">
      <a href="https://example.com/" class="custom-logo-link" rel="home">
        <img src="logo.png" class="custom-logo" alt="サイト名" />
      </a>
    </div>

    <!-- ② グローバルナビゲーション -->
    <nav id="site-navigation" class="main-navigation" aria-label="グローバルメニュー">
      <ul class="nav-menu">
        <li><a href="/about/">About</a></li>
        <li><a href="/contact/">Contact</a></li>
      </ul>
    </nav>

  </div><!-- .header-inner -->
</header><!-- #masthead -->

上記のHTMLを出力している header.php の該当部分は次のとおりです。子テーマでクラス名を変更したい場合や、独自のヘッダー要素を追加したい場合の参考にしてください。

<!-- header.php（Apuraテーマ・該当部分の抜粋） -->
<header id="masthead" class="site-header">
    <div class="header-inner">

        <!-- ① ロゴ・サイト名 -->
        <div class="site-branding">
            <?php if ( has_custom_logo() ) : ?>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="custom-logo-link" rel="home">
                    <?php the_custom_logo(); ?>
                </a>
            <?php else : ?>
                <p class="site-title">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                        <?php bloginfo( 'name' ); ?>
                    </a>
                </p>
            <?php endif; ?>
        </div><!-- .site-branding -->

        <!-- ② グローバルナビゲーション -->
        <nav id="site-navigation" class="main-navigation"
             aria-label="<?php esc_attr_e( 'グローバルメニュー', 'apura' ); ?>">
            <?php
            wp_nav_menu( [
                'theme_location' => 'primary',
                'menu_class'     => 'nav-menu',
                'container'      => false,
            ] );
            ?>
        </nav><!-- #site-navigation -->

    </div><!-- .header-inner -->
</header><!-- #masthead -->

確認したクラス名に合わせて、以下のCSSを書き換えて追加します。.site-headerの部分は実際のクラス名に置き換えてください。

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

/* ヘッダーの高さ分だけ本文を下にずらし、コンテンツが隠れるのを防ぐ */
body {
  padding-top: 80px; /* ヘッダーの実際の高さに合わせて調整 */
}

保存後、ページをスクロールしてヘッダーが上部に固定されているか確認します。padding-topの数値は、ヘッダーの実際の高さ（開発者ツールで確認できます）にぴったり合わせるとズレがなくなります。スマートフォン表示も忘れずに確認してください。