2026年7月1日

WordPressのフルサイト編集でヘッダーとフッターをテンプレートパーツに分けて使い分ける方法

テーマ・デザイン

ブロックテーマ（フルサイト編集対応テーマ）では、ヘッダーとフッターを「テンプレートパーツ」という独立した部品として作り、各テンプレートから呼び出します。部品に分けておけば、ヘッダーを1か所直すだけで全ページに反映でき、さらに「通常ページ用」と「LP用の簡易ヘッダー」のように複数の種類を用意して、テンプレートごとに差し替えられます。この記事では、テーマのファイル構成、theme.json での登録、テンプレートからの呼び出し方、ページごとの使い分け、サイトエディターで編集した内容とファイルの関係、反映されないときの確認点までを説明します。

テンプレートとテンプレートパーツの関係

ブロックテーマでは、ページ全体の設計図を「テンプレート」、その中で使い回す部品を「テンプレートパーツ」と呼びます。ファイルの置き場所は決まっています。

templates/：index.html、single.html、page.html などのテンプレート
parts/：header.html、footer.html などのテンプレートパーツ
theme.json：テンプレートパーツの名前と「エリア」の登録

クラシックテーマの header.php と footer.php に近い役割ですが、中身はPHPではなくブロックのマークアップ（HTMLコメント形式のブロック区切り）です。PHPのように条件分岐は書けないため、「ページによってヘッダーを変える」場合は、ヘッダーの種類ごとに別のテンプレートパーツを作り、それを呼び出すテンプレートを分けるのが基本の考え方になります。

この記事は「ヘッダーとフッターを部品として分け、使い分ける」ことに絞っています。サイトエディター全体の操作や、ブロックテーマそのものの作り方は、最後に挙げる関連記事を参照してください。

作業前の準備

子テーマで作業する：配布テーマ（Twenty Twenty-Five など）を直接編集すると、テーマの更新で変更が消えます。ブロックテーマの子テーマは、style.css のヘッダーに Template: 親テーマのフォルダ名 を書くだけで作れ、子テーマの parts/header.html は親テーマの同名ファイルより優先されます。
バックアップとステージング：テンプレートの記述を誤ると、ヘッダーやフッターが空になったり、エディターに「ブロックに予期しないコンテンツが含まれています」といった警告が出たりします。変更前にバックアップを取り、ステージング環境で確認してから本番に反映してください。
自分のテーマがブロックテーマか確認する：管理画面の「外観」に「エディター」があり「カスタマイズ」が無ければ、ブロックテーマである可能性が高いです。クラシックテーマの場合は後半の「クラシックテーマで使う場合」を参照してください。

ヘッダーとフッターのテンプレートパーツを作る

子テーマのフォルダに parts フォルダを作り、header.html を置きます。サイト名とナビゲーションを横並びにする最小限の例です。

<!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group">
<!-- wp:site-title /-->
<!-- wp:navigation /-->
</div>
<!-- /wp:group -->

フッターも同じように parts/footer.html を作ります。

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">© My Site</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

ブロックのマークアップを一から手で書くと、属性と出力HTMLの食い違いで警告が出やすくなります。実務では、サイトエディターで見た目を作り、後述の方法でファイルに書き出すか、コードエディター表示からコピーして貼るほうが安全です。

theme.json にエリアを登録する

テンプレートパーツは、theme.json の templateParts に登録しておくと、サイトエディター上で「ヘッダー」「フッター」として分類されます。エリア（area）には header、footer、uncategorized などを指定します。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "templateParts": [
    { "name": "header", "title": "Header", "area": "header" },
    { "name": "header-simple", "title": "Simple Header", "area": "header" },
    { "name": "footer", "title": "Footer", "area": "footer" }
  ]
}

name は parts/ 内のファイル名（拡張子なし）と一致させます。エリアを登録しておくと、エディターでヘッダーを別の種類に差し替えるときに、同じエリアのパーツが候補として表示されるようになります。登録しなくてもパーツ自体は使えますが、分類されないため管理しづらくなります。

theme.json の version は、WordPress 6.6 以降で使えるバージョン3を前提にしています（2026年10月現在）。子テーマの theme.json は親テーマのものと統合されますが、templateParts の扱いで迷ったら、子テーマ側に使うパーツをまとめて書いておくと、どこで何が登録されているかが分かりやすくなります。

テンプレートからヘッダーとフッターを呼び出す

テンプレートでは、テンプレートパーツブロック（wp:template-part）でパーツを読み込みます。tagName を指定すると、出力時に header 要素や footer 要素で囲まれ、文書構造が分かりやすくなります。templates/page.html の例です。

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-title /-->
<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

slug が parts/ のファイル名に対応します。すべてのテンプレートで同じ header を呼んでいれば、parts/header.html を1回直すだけでサイト全体のヘッダーが変わります。

ページの種類ごとにヘッダーを使い分ける

キャンペーンページだけナビゲーションを外したい、といった場合は、別のヘッダーパーツと、それを呼ぶ専用テンプレートを用意します。

parts/header-simple.html を作る（ロゴだけのヘッダーなど）
theme.json の templateParts に登録する（前述の例に含めています）
templates/page-landing.html を作り、ヘッダーの slug を header-simple にする
theme.json の customTemplates に登録し、固定ページで選べるようにする

"customTemplates": [
  { "name": "page-landing", "title": "Landing Page", "postTypes": [ "page" ] }
]

customTemplates は templateParts と同じ階層（theme.json の最上位）に書きます。登録すると、固定ページの編集画面のテンプレート選択に表示され、ページごとに選べるようになります。

投稿・アーカイブのように「種類」で自動的に分けたい場合は、single.html や archive.html など、テンプレート階層に沿ったテンプレートの中で呼ぶパーツを変えます。

サイトエディターで編集した内容とファイルの関係

ここが一番つまずきやすい点です。サイトエディターでヘッダーを編集して保存すると、その内容はテーマのファイルではなく、データベースにテンプレートパーツの投稿（投稿タイプ wp_template_part）として保存されます。そして、データベースに保存された版がある間は、テーマの parts/header.html よりそちらが優先されます。

そのため、次のような症状が起きます。

ファイルを書き換えたのに表示が変わらない
子テーマに parts/header.html を置いたのに反映されない

原因は、過去にエディターで保存した版が残っていることです。サイトエディターで該当のテンプレートパーツを開き、カスタマイズをリセット（クリア）する操作を行うと、ファイルの内容に戻ります。メニューの表記はバージョンによって異なるため、テンプレートパーツの詳細メニューやパネル内で「リセット」に相当する項目を探してください。リセットするとエディターでの変更は消えるので、必要ならその前に内容をコピーしておきます。

反対に、エディターで作った変更をテーマのファイルとして残したい場合は、WordPress.org で配布されている Create Block Theme プラグインを使うと、サイトエディターでの変更をテーマのファイルに書き出せます（機能名や画面の表記はプラグインのバージョンにより異なります）。ファイルに書き出しておけば、Gitでの管理や、別サイトへの持ち出しがしやすくなります。

クラシックテーマで使う場合

クラシックテーマでも、ヘッダーやフッターだけをブロックで編集したい場合があります。WordPress 6.1 以降では、クラシックテーマが block-template-parts をサポートすると、テンプレートパーツの編集画面が使えるようになります（2026年10月現在）。

add_action( 'after_setup_theme', function () {
	add_theme_support( 'block-template-parts' );
} );

テーマの header.php などから、block_template_part() 関数でパーツを出力します。

<?php block_template_part( 'header' ); ?>

この場合も parts/header.html を子テーマに置きます。ただしナビゲーションやスタイルの扱いはテーマによって差があるため、合わない場合は無理に混在させず、ブロックテーマへの移行も検討してください。

反映されないときの確認ポイント

エディターで保存した版が優先されていないか：前述のとおり、リセットしてファイルの内容に戻るか確かめます。
**slug とファイル名が一致しているか**：header-simple と header_simple のような綴りの違いは、パーツが見つからない原因になります。
theme.json の書式：カンマの過不足など、JSONの文法エラーがあると設定全体が読まれません。エディターやJSONの検証ツールで確認してください。
キャッシュ：ページキャッシュやCDNを使っている場合は、パージしてから確認します。
エディターの警告：ブロックの警告が出たら、手書きしたマークアップの属性と中身が合っているかを見直します。

まとめ

ブロックテーマでは、ヘッダーとフッターを parts/ のテンプレートパーツとして作り、テンプレートからテンプレートパーツブロックで呼び出します。
theme.json の templateParts にエリアを登録すると、エディターで分類・差し替えがしやすくなります。
ページごとに別のヘッダーを使うには、別パーツと専用テンプレートを作り、customTemplates に登録します。
サイトエディターで保存した内容はデータベースに入り、ファイルより優先されます。ファイルの変更が反映されないときは、まずリセットを確認してください。
作業は子テーマで行い、バックアップとステージングでの確認を先に済ませます。