いよいよブロックを組んでいきます。最初はヘッダーです。
ここで「入れ子（ネスト）」の考え方をつかんでおくと、フッターも一覧ページも「同じ要領」で進められるようになります。丁寧に進めていきましょう。
テンプレートファイルに最低限のコードを入れておく
先に最低限のコードを追加して、サイトを表示できる状態にしておきましょう！！
管理画面 → ツール（or 外観） → テーマファイルエディター から以下のファイルを選択して、コードを貼り付けてください。
🏠 ホームページ型
templates/front-page.htmltemplates/index.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（コンテンツ幅オン）に設定する。
背景色とテキスト色を設定する。全幅にして画面いっぱいに広げる。
サイトタイトルとナビゲーションを横並びにする。
💡 背景色とテキスト色は、内側グループに設定するのがポイントです。
色を設定したブロックの内側にあるブロックは色を継承するので個別に設定する必要はありません。
エディターで組んでみる
完成イメージ
ヘッダーを開く
外観 → エディター → パターン → ヘッダーを選択して開く
左上の「リストビュー」アイコンをクリックして開いておく
外側グループを追加する
「＋」からグループを追加する
選択肢が出たら一番左の「グループ」を選ぶ
リストビューで「グループ」が選択中になっていることを確認
右パネル「設定」→「レイアウト」→「コンテンツ幅を使用するインナーブロック」がオンになっていることを確認する
内側グループを追加する（全幅・背景色・テキスト色）
外側グループの中の「＋」からグループを追加する
リストビューで「グループ」が外側グループの中に入っていることを確認
右パネル「設定」→「レイアウト」→「コンテンツ幅を使用するインナーブロック」をオフにする
※ 中に入る「サイトタイトル＋ナビ」を両端いっぱいに広げるためです
ブロックの上に表示されるツールバーの配置アイコンから「全幅」を選択する
右パネル「スタイル」→「色」→ 背景にメイン、テキストに白を選択する
続けて「余白」→ 上下左右のパディングをあわせて調整しておきましょう。
できるだけ背景色と余白はセットで同じブロックに設定するのが管理しやすいです。
最内側グループ（横並び）を追加する（サイトタイトル＋ナビ）
内側グループの中の「＋」から横並びを追加する
選択肢が出たら真ん中の「横並び」を選ぶ
横並びの中にサイトタイトルブロックを追加する
横並びの中にナビゲーションブロックを追加する
横並びを選択した状態で、右パネル「設定」→「レイアウト」→「配置」→「項目の間隔（左右配置する）」をオンにする
サイトタイトルが左端、ナビゲーションが右端に配置されます。
コードをコピーしてファイルに貼り付ける
リストビューで一番外側のグループを選択する
リストビューの「グループ」の右側の︙をクリック → 「コピー」を選択する
メモ帳などに貼り付けて内容を確認する
管理画面 → ツール（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です。同じ流れで進めていきましょう。