いよいよブロックを組んでいきます。最初はヘッダーです。
ここで「入れ子（ネスト）」の考え方をつかんでおくと、フッターも一覧ページも「同じ要領」で進められるようになります。丁寧に進めていきましょう。
テンプレートファイルに最低限のコードを入れておく
先に最低限のコードを追加して、サイトを表示できる状態にしておきましょう！！
管理画面 → ツール（or 外観） → テーマファイルエディター から以下のファイルを選択して、コードを貼り付けてください。
🏠 ホームページ型
templates/front-page.html
🗞️ ブログ型
templates/index.html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->サイトエディターで保存する前に知っておくトラップ
ヘッダーを組む前に、ひとつだけ知っておいてほしいことがあります。知らずに進むと「ファイルを変えたのに反映されない！」で詰まります。
原因はデータベースとファイルの優先順位にあります。
WordPressの優先順位
データベース（サイトエディターで保存した内容）
こちらが優先される
テーマファイル（管理画面で編集・FTPでアップしたファイル）
データベースに保存済みの場合は無視される
サイトエディターで一度でも「保存」を押すと、以降はファイルを書き換えても反映されません。
💡 もし誤って保存してしまったら
● サイトエディター → テンプレートパーツ → ヘッダーを開いて、右上の「︙」→「リセット」を選ぶとファイルの内容に戻せます。
● テンプレートやテンプレートパーツ一覧の右下「︙」からも「リセット」ができます。
💡 自作テーマ作業中のコツ
● エディターは「組む場所」です。保存しません。
● ファイルに「初期状態」を保存します。
● タブを3つ開いておくと作業がスムーズです。
① サイトエディター → ブロックを組む
② サイト（フロント） → 実際の見た目を確認する
③ テーマファイルエディター → コードを貼り付ける
ヘッダーのブロック構造を考える
ヘッダーを組む前に、どんなブロック構造にするかを考えておきましょう。ここで「入れ子（ネスト）」の考え方をつかんでおくと、フッターもその他のテンプレートも同じ要領で作れるようになります。
なぜ外側グループが必要なの？
「背景色を画面いっぱいに広げたい」——そのために全幅の設定が必要なのですが、実はどこでも全幅が選べるわけではありません。
💡 「コンテンツ幅を使用するインナーブロック」とは？
constrained とも呼ばれるこの設定をオンにすると、中のブロックがtheme.jsonで設定したcontentSizeの幅に収まり、自動的に中央寄せになります。
また、全幅を使うためには外側のブロックでこの設定がオンになっている必要があります。これが外側グループが必要な理由です。
ヘッダーの完成イメージ
各グループの役割
計算の基準になる親。constrained（コンテンツ幅オン）に設定する。
背景色とテキスト色を設定する。全幅にして画面いっぱいに広げる。
サイトタイトルとナビゲーションを横並びにする。全幅に広がった内側グループの中で、左右にパディング（余白）をつけてコンテンツの端を調整する。
💡 背景色とテキスト色は内側グループにセットで設定するのがポイントです。
色を設定したブロックの内側にあるブロックは色を継承するので個別に設定する必要はありません。濃い背景には「白」、薄い背景には「ベーステキスト」の2択で考えましょう。
エディターで組んでみる
構造が決まったら実際に組んでいきます。リストビューで確認しながら進めましょう。
ヘッダーを開く
外観 → エディター → パターン → ヘッダーを選択して開く
左上の「リストビュー」アイコンをクリックして開いておく
外側グループを追加する
「＋」からグループを追加する
選択肢が出たら一番左の「グループ」を選ぶ
リストビューで「グループ」が選択中になっていることを確認
右パネル「設定」→「レイアウト」→「コンテンツ幅を使用するインナーブロック」がオンになっていることを確認する
内側グループを追加する（全幅・背景色・テキスト色）
外側グループの中の「＋」からグループを追加する
リストビューで「グループ」が外側グループの中に入っていることを確認
右パネル「設定」→「レイアウト」→「コンテンツ幅を使用するインナーブロック」をオフにする
ブロックの上に表示されるツールバーの配置アイコンから「全幅」を選択する
右パネル「スタイル」→「色」→ 背景にメイン、テキストに白を選択する
続けて「余白」→ 上下左右のパディングをあわせて調整しておきましょう。背景色と余白はセットで同じブロックに設定するのが管理しやすいと思います。
最内側グループを追加する（横並び・サイトタイトル＋ナビ）
内側グループの中の「＋」から横並びを追加する
選択肢が出たら真ん中の「横並び」を選ぶ
横並びの中にサイトタイトルブロックを追加する
横並びの中にナビゲーションブロックを追加する
横並びを選択した状態で、右パネル「設定」→「レイアウト」→「配置」→「項目の間隔（左右配置する）」をオンにする
サイトタイトルが左端、ナビゲーションが右端に配置されます。
コードをコピーしてファイルに貼り付ける
リストビューで一番外側のグループを選択する
リストビューの「グループ」の右側の︙をクリック → 「コピー」を選択する
メモ帳などに貼り付けて内容を確認する
管理画面 → ツール（or 外観） → テーマファイルエディター → parts/header.html を選択する
コピーしたコードを貼り付けて「ファイルを更新」をクリックする
サイトを開いてヘッダーが表示されていることを確認する
💡 コードの中の "ref":4 について
これはナビゲーションメニューのIDです。ファイルに貼り付けるときに削除しておきましょう。
// 削除前
<!– wp:navigation {“ref”:4} /–>// 削除後
<!– wp:navigation /–>ナビゲーションの中身（カテゴリ・固定ページのリンクなど）は、サイトのコンテンツが整った段階でサイトエディターを操作して作り込んでいきます。今は「ナビゲーションの場所を確保しておく」だけでOKです。
エディターで組む → コピー → ファイルに貼り付け、この流れが基本です。
💡 キリのいい間隔で、手元のファイルのバックアップもお忘れなく！
FTPでファイルをダウンロードするか、手元のファイルにもコピペしておきましょう。
コードの中身を確認する
コピーしたコードはこんな感じです。入れ子になっていて、そのままでは読みにくいですよね😅
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"backgroundColor":"primary","textColor":"white","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull has-white-color has-primary-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:site-title /-->
<!-- wp:navigation /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->コードの構造をしっかり理解したい場合や、自分で書き換えたい場合はAIに整形・解説してもらうのがおすすめです。
💬 AIへの質問例
「このWordPressのブロックマークアップを整形して、どの部分が何をしているか説明してください」
参考まで：「ブロックマークアップ」についてこちらで👇解説しています。
【WordPress】ブロックマークアップの読み方・書き方入門
目次ブロックテーマはどんな仕組み？ブロックマークアップとは基本のルールコードを「書かない」裏ワザまとめ ブロックマークアップはエディターからそのままコピーできます。 大事なのは書き方の暗記ではなく、「こういう仕組みで動い […]
次回はフッターを組みます。基本的な構造はヘッダーと同じ要領でOKです。同じ流れで進めていきましょう。