フルサイト編集（サイトエディター）では、ヘッダーは「テンプレートパーツ」という部品として管理されており、ブロックを組み合わせてロゴ・ナビゲーション・ボタンの配置から固定表示まで、コードを書かずに作り込めます。この記事では、ヘッダーのテンプレートパーツを開くところから、横並びのレイアウト、スマートフォン用メニュー、上部への固定、ページごとのヘッダーの使い分け、変更をテーマのファイルに残す方法までを順に説明します。
前提：ブロックテーマでのみ使える
サイトエディターでヘッダーを編集できるのは、Twenty Twenty-Five や Twenty Twenty-Four のようなブロックテーマを使っている場合です。管理画面の「外観」に「エディター」が表示されていればブロックテーマ、「カスタマイズ」や「ウィジェット」が中心ならクラシックテーマと考えてください。クラシックテーマのヘッダーは header.php とカスタマイザーで管理するため、本記事の手順は当てはまりません。
作業前には、サイトのバックアップを取っておきます。サイトエディターでの変更はデータベースに保存され、後から取り消すこともできますが、テーマ全体を作り替えるような作業になる場合は、ステージング環境で試すほうが安全です。
ヘッダーのテンプレートパーツを開く
- 外観 → エディター を開きます。
- 「パターン」を選び、テンプレートパーツの中の「ヘッダー」を開きます。WordPress のバージョンによって、テンプレートパーツの一覧への入り方や表記は少し異なります（2026年10月現在）。
- 編集画面が開いたら、右上の「ドキュメント概観」（リスト表示）を開いて、ヘッダーの中身の構造を確認します。
ここで理解しておきたいのは、ヘッダーのテンプレートパーツは、多くのテンプレート（トップページ、投稿、固定ページ、アーカイブなど）から共通で読み込まれているという点です。テンプレートのファイルには次のような記述があり、これが「ここにヘッダーを入れる」という指定になっています。
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->そのため、ヘッダーのテンプレートパーツを1回編集すれば、サイト全体のヘッダーが変わります。特定のページだけ変えたい場合の方法は後半で説明します。
基本のレイアウトを組む
ヘッダーのよくある形は「左にロゴとサイト名、右にメニュー」です。ブロックの組み合わせは次のようになります。
- グループ：ヘッダー全体を包む外枠。背景色と上下の余白を設定します。
- 横並び：中身を横に並べるためのブロック。配置を「両端揃え」にすると、左右に振り分けられます。
- サイトロゴ／サイトのタイトル：左側。ロゴ画像は「サイトロゴ」ブロックから設定でき、幅もブロックの設定で調整できます。
- ナビゲーション：右側。メニュー項目を管理します。
- ボタンや検索：必要に応じて右端に追加します。
既存のヘッダーを一から組み直すより、まず今の構造を活かして、要素の追加・削除と配置の調整から始めると崩れにくくなります。ブロックを並べ替えるときは、リスト表示の中でドラッグすると、入れ子の階層を間違えにくくなります。
余白や色は、ブロックの設定サイドバーの「スタイル」で指定します。ここでパレットの色や、テーマが用意した余白のサイズを選んでおくと、後でサイト全体のスタイルを変えたときにヘッダーも追従します。任意の数値やカラーコードを直接入れると、その部分だけ取り残されやすくなります。
ナビゲーションとスマートフォン表示
ナビゲーションブロックを選ぶと、設定サイドバーでどのメニューを表示するかを選べます。メニューの中身（リンクの追加や並べ替え）も、サイドバーやリスト表示から編集できます。サブメニューを持つ項目は、ホバーで開くかクリックで開くかを設定で切り替えられます。タッチ操作の端末も考えると、クリックで開く設定のほうが扱いやすい場合があります。
スマートフォンでの表示は、ナビゲーションブロックの「オーバーレイメニュー」の設定で決まります。
- モバイル：画面が狭いときだけハンバーガーアイコンになり、タップすると全画面のメニューが開きます。多くのサイトではこれが適しています。
- 常に：パソコンでもアイコン表示にします。
- オフ：アイコンにせず、常に項目を並べて表示します。項目が多いと狭い画面で折り返して崩れます。
設定後は、エディター上部のプレビュー切り替えでモバイル表示を確認し、さらに実機でもメニューが開閉できるか、閉じるボタンが押しやすいかを確かめてください。オーバーレイメニューの背景色と文字色は、ナビゲーションブロックのスタイル設定で個別に指定できます。
ヘッダーを画面上部に固定する
スクロールしてもヘッダーを上に残したい場合、WordPress 6.2 以降ではグループブロックの「位置」の設定で「固定」（sticky）を選べることがあります。ただし、この項目はブロックの置かれている階層によっては表示されません。
表示されない場合や、管理バーと重なるなど思いどおりにならない場合は、CSSで指定します。外観 → エディター → スタイル の「追加CSS」や子テーマの style.css に、次のように書きます。
header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 100;
}
/* ログイン中は管理バーの高さぶん下げる */
.admin-bar header.wp-block-template-part {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar header.wp-block-template-part {
top: 46px;
}
}ヘッダーのテンプレートパーツは header タグで出力され、wp-block-template-part というクラスが付くため、このセレクターで指定できます。固定ヘッダーは背景が透明だと下の文字と重なって読みにくくなるので、ヘッダーのグループに背景色を付けておいてください。また、親要素に overflow: hidden が指定されていると sticky が効かないことがあります。
ページごとにヘッダーを使い分ける
トップページだけ大きなヘッダー、それ以外は標準のヘッダー、といった使い分けは、ヘッダーのテンプレートパーツを複数作って、テンプレートごとに割り当てることで実現します。
- 既存のヘッダーを複製するか、テンプレートパーツを新規作成し、種類（エリア）を「ヘッダー」にします。
- 新しいヘッダーを編集して保存します。
- 使い分けたいテンプレート（例：フロントページ）を開き、ヘッダー部分を選んで、ツールバーやサイドバーから別のヘッダーに置き換えます。
テンプレートパーツの名前は、後から見て用途が分かるもの（「ヘッダー（トップ用）」など）にしておくと管理しやすくなります。
変更の取り消しとテーマファイルへの保存
サイトエディターで編集したヘッダーは、テーマのファイル（parts/header.html）ではなく、データベースに保存されます。このため、次の性質があります。
- 編集内容はテーマを更新しても消えません。その代わり、テーマ側でヘッダーが改善されても反映されません。
- 編集前に戻したいときは、テンプレートパーツの一覧からカスタマイズを取り消す操作で、テーマの初期状態に戻せます。リビジョン（変更履歴）から以前の状態を選んで戻すこともできます。
- テーマを切り替えると、編集したヘッダーは新しいテーマでは使われません。
作ったヘッダーをテーマのファイルとして残したい場合は、WordPress.org で配布されている「Create Block Theme」プラグインを使うと、サイトエディターでの変更をテーマや子テーマのファイルに書き出せます。手作業で行う場合は、エディターの「コードエディター」でヘッダーのブロックのマークアップをコピーし、子テーマの parts/header.html に保存します。親テーマのファイルを直接書き換えると更新時に上書きされるので、子テーマを使ってください。
まとめ
- フルサイト編集のヘッダーはテンプレートパーツとして管理され、1か所の編集がサイト全体に反映されます。ブロックテーマでのみ使えます。
- グループ・横並び・サイトロゴ・ナビゲーションの組み合わせで基本形を作り、色や余白はパレットとプリセットから選びます。
- スマートフォン表示はナビゲーションブロックのオーバーレイメニューで設定し、実機で開閉を確認します。
- 固定表示は「位置」の設定か、
header.wp-block-template-partへのCSSで実現します。管理バーとの重なりに注意します。 - ページごとの使い分けは複数のヘッダーパーツで行い、変更をファイルに残すなら Create Block Theme か子テーマの
parts/header.htmlを使います。