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

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

ヘッダー部分を右クリックして「検証」（ブラウザの開発者ツール）を開き、ヘッダー全体を囲んでいる要素のclassまたはidを確認します。

多くのテーマではheader、.site-header、#mastheadのような名前になっています。

Apuraテーマの場合、開発者ツールで確認すると次のような構造になっています。

ヘッダー全体を囲む要素にはid="site-header"とclass="l-header"が付与されています。

この記事のCSSサンプルで使っている.site-headerは説明用の仮のクラス名なので、Apuraで実際にコピペする場合は.l-header（または#site-header）に置き換えてください。

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

      <!-- ① ロゴ・サイト名エリア -->
      <div class="header__title">
        <div class="site-branding">
          <p class="site-branding__title">
            <a href="https://example.com/" class="site-branding__link" rel="home">サイト名</a>
          </p>
        </div>
      </div><!-- .header__title -->

      <!-- ② グローバルナビゲーション -->
      <nav id="header-horizontal-nav" class="header__nav" aria-label="Primary navigation">
        <div class="header-horizontal-menu-container">
          <ul id="header-horizontal-menu" class="menu menu--header-horizontal">
            <li><a href="/about/"><span class="menu__text">About</span></a></li>
            <li><a href="/contact/"><span class="menu__text">Contact</span></a></li>
          </ul>
        </div>
      </nav><!-- .header__nav -->

    </div><!-- .header__row -->
  </div><!-- .header -->
</header><!-- #site-header -->

ここで一つ注意点があります。

Apuraテーマでは、上記のHTMLのようなheader.phpに直接書かれているわけではありません。

Apuraのheader.phpはapura_headerというアクションフックを実行するだけの薄い構造になっており、実際のマークアップはテーマのinc/structure/フォルダ内のファイルで、このフックに登録された関数が組み立てています。

<!-- header.php（Apuraテーマ・抜粋） -->
<div class="site-container">
    <?php
    do_action( 'apura_before_header' );
    do_action( 'apura_header' );        // ← ヘッダー本体はここでフック実行される
    do_action( 'apura_after_header' );
    ?>
    ...
</div><!-- .site-container -->

そしてapura_headerフックに登録されているのが、inc/structure/header.php内の関数です（抜粋）。

<?php
// inc/structure/header.php（抜粋）
add_action( 'apura_header', __NAMESPACE__ . '\site_header' );

function site_header() {
    ?>
    <header id="site-header" <?php apura_attr( 'header', [ 'class' => 'l-header' ] ); ?>>
        <?php
            do_action( 'apura_after_header_open' );
            do_action( 'apura_header_content' ); // ロゴ・ナビなどはさらにこのフックの先で組み立てられる
            do_action( 'apura_before_header_close' );
        ?>
    </header><!-- #site-header -->
    <?php
}

つまり、ロゴやナビゲーションの中身を変更したい場合も、header.phpやテーマ本体のstructureフォルダ内のファイルを直接編集するのではなく、apura_header_contentのような用意されたフックを使ってカスタマイズするのが安全です（テーマ本体のファイルは更新のたびに上書きされます）。

今回のようにCSSだけで固定ヘッダーを実装する場合は、このフック構造まで意識する必要はなく、実際に出力されているidやclassをそのままCSSのセレクタとして使えば十分です。

確認したクラス名に合わせて、以下のCSSを書き換えて追加します。

.site-headerの部分は実際のクラス名に置き換えてください。

ヘッダーを固定するCSSプロパティにはposition: fixedとposition: stickyの2種類があり、見た目はどちらも「スクロールしてもヘッダーが上に残る」ですが、挙動と実装の手間が異なります。

方法A：position: fixedを使う

fixedは要素を通常の文書の流れから完全に切り離して画面に固定するプロパティです。

そのため、切り離された分の高さをbodyのpadding-topで必ず補ってあげる必要があります。

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

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

方法B：position: stickyを使う（おすすめ）

stickyは要素を通常の文書の流れに残したまま、スクロールして指定位置（top: 0）まで到達すると固定表示に切り替わるプロパティです。

ヘッダーが元から占めていた高さ分の余白がすでに確保されているため、fixedのときのようなpadding-topでの帳尻合わせが不要になり、次で紹介する「本文の見出しがヘッダーの下に隠れる」不具合もそもそも起きにくくなります。

marginやpaddingの調整に自信がない場合は、まずこちらを試すのがおすすめです。

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

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