ブロックテーマ（FSE）入門｜サイトエディターでデザインを組む手順
生徒WordPressの管理画面に「サイトエディター」ってのが出てきたんですが、これ何ですか？ 今までのカスタマイザーと違うんですか？
ペン博士ブロックテーマを使うと出てくる画面だね。ヘッダーもフッターもブロックで組むのが最大の違い。PHPを触らずにサイト全体を編集できる。今日は仕組みと手順を順番に見ていこう。
WordPressには現在、2種類のテーマがあります。従来型のクラシックテーマと、サイト全体をブロックで組むブロックテーマです。
ブロックテーマを有効化すると、管理画面に「サイトエディター」が現れ、ヘッダー・フッター・記事の並び方まで、記事を書くのと同じ操作で編集できるようになります。この仕組みがFSE（フルサイト編集）です。
この記事では両者の違いから始めて、サイトエディターの構成、テンプレートの編集手順、theme.jsonによる設定、既存サイトからの移行判断まで解説します。
- ブロックテーマとクラシックテーマの違い
- サイトエディターの5つの画面
- テンプレートとテンプレートパーツの関係
- ヘッダー・フッターを編集する手順
- 記事一覧の並びを変える（クエリループ）
- theme.jsonで色とサイズを一元管理する
- パターンで使い回す仕組み
- CSSの当て方と追加方法
- 既存サイトを移行すべきかの判断
- つまずきやすい点と対処
目次
ブロックテーマとクラシックテーマの違い
導入時に高確率で出る疑問と、その解決方法です。
| 症状 | 原因 | 対処 |
|---|---|---|
| 「カスタマイズ」が消えた | ブロックテーマ有効化 | 外観→エディターを使う |
| 変更が反映されない | 保存対象が未選択 | 保存ダイアログで確認 |
| テンプレートを壊した | 編集ミス | 右上メニューから初期化 |
| 色が選べない | theme.jsonでcustom:false | 設定を変えるか許可色を追加 |
| ウィジェットが使えない | FSEでは非対応 | パターンかブロックで置換 |
| プラグインの表示が崩れる | クラシック前提の設計 | 対応状況を確認する |
3つ目の「初期化」は覚えておく価値があります。テンプレートを編集して収拾がつかなくなっても、テーマの初期状態に戻せるため、思い切って試せます。
ブロックテーマの作り方（最小構成）
自作する場合、必要なファイルは驚くほど少なくて済みます。最小構成から始めて、必要に応じて足していきます。
必須は3ファイル
my-theme/
├── style.css # テーマ情報を書くヘッダーコメントのみ
├── theme.json # 設定
└── templates/
└── index.html # これが無いとテーマとして認識されない/*
Theme Name: My Block Theme
Theme URI: https://example.com/
Author: 制作者名
Description: ブロックテーマの最小構成サンプル
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: my-theme
*/<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:query {"query":{"perPage":10,"postType":"post"}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->
</main>
<!-- /wp:group -->この3ファイルをwp-content/themes/に置けば、もうサイトエディターで編集できる状態になります。あとはエディター上で組み立て、必要になった時点でファイルへ書き出します。
エディターの変更をテーマに反映する
サイトエディターでの編集内容は、初期状態ではデータベースに保存されます。テーマファイル側へ書き出したい場合は、エクスポート機能を使います。
外観 → エディター → 右上のオプション（︙）→「書き出し」
→ ZIPがダウンロードされる（templates/ と parts/ が最新の状態で入る）納品用のテーマにまとめるときや、Gitで管理したいときはこの手順を使います。データベース側の変更が残っていると、ファイルよりそちらが優先される点に注意してください。
よく使うブロックと役割
ブロックテーマで頻繁に使う「動的な」ブロックを整理します。記事を書くときのブロックとは別の系統です。
| ブロック | 役割 | 置く場所 |
|---|---|---|
| サイトロゴ | ロゴ画像を表示 | ヘッダー |
| ナビゲーション | メニューを表示 | ヘッダー |
| 投稿タイトル | その記事のタイトル | single・archive |
| 投稿コンテンツ | 本文が入る領域 | single・page |
| アイキャッチ画像 | サムネイル | single・一覧 |
| クエリループ | 記事一覧 | index・archive |
| 投稿日・投稿者 | メタ情報 | single |
| テンプレートパーツ | ヘッダー等の呼び出し | 各テンプレート |
混同しやすいのが「見出し」と「投稿タイトル」です。前者は固定の文字を置くブロック、後者は表示中の記事名が自動で入るブロックです。テンプレートでは後者を使います。
<!-- ✗ テンプレートに固定の見出しを置くと、全記事で同じ文字になる -->
<!-- wp:heading -->
<h1>記事タイトル</h1>
<!-- /wp:heading -->
<!-- ○ 投稿タイトルブロックを使う -->
<!-- wp:post-title {"level":1} /-->代表的なブロックテーマ
学習や検証に使いやすいテーマを挙げます。まずは公式テーマで構造を掴むのが近道です。
- Twenty Twenty-Four / Twenty Twenty-Five：WordPress公式。構造が素直で学習向き
- Ollie：パターンが豊富で、コーポレートサイトを組みやすい
- Blockbase系：クラシックテーマからの移行を意識した設計
公式テーマはtheme.jsonの書き方の見本にもなります。管理画面から有効化して、テンプレートとパーツの構成を実際に開いてみると理解が早まります。
制作フローの変化と分担
ブロックテーマを採用すると、制作の進め方そのものが変わります。どこが変わるのかを押さえておくと、見積もりや体制づくりを誤りません。
設計フェーズの比重が上がる
クラシックテーマではPHPで自由に組めたため、細部は実装しながら決められました。ブロックテーマではtheme.jsonで許可した範囲がそのまま制作の枠になるため、色・文字サイズ・余白の設計を先に固める必要があります。
| 工程 | クラシック | ブロック |
|---|---|---|
| 初期設計 | ざっくりでも進む | theme.jsonを先に固める |
| 実装 | PHP＋CSSで自由 | ブロック＋theme.json |
| 一覧の実装 | WP_Queryを書く | クエリループで設定 |
| 納品後の修正 | 制作側が対応 | 運用側で完結しやすい |
クライアントに渡せる範囲が広がる
ヘッダーのバナー差し替え、トップの記事件数変更、CTAの文言修正といった依頼が、運用側で完結します。制作側の細かな修正対応が減るぶん、保守契約の内容も見直す価値があります。
- 渡してよい：文言・画像・並び順・表示件数
- 渡さないほうがよい：テンプレート構造・theme.json
- 対策：編集者権限では触れる範囲が限られるため、権限設計で線を引く
権限は重要です。編集者ロールではサイトエディターを開けません（テンプレート編集には管理者権限が必要）。運用担当に何を任せるかで、付与する権限を決めてください。
見積もりで注意する点
「PHPを書かないから安い」と単純には言えません。ブロックの制約内でデザインを実現する調整や、パターンの整備には相応の時間がかかります。特に既存のデザインカンプをそのまま再現しようとすると、CSSでの上書きが増えて逆に手間になることがあります。
| 作業 | 工数の傾向 | 備考 |
|---|---|---|
| theme.json設計 | 増える | 最初に全部決める |
| ヘッダー・フッター | 減る | エディターで組める |
| 記事一覧・アーカイブ | 大きく減る | クエリループ |
| 独自デザインの再現 | 増えることがある | ブロックの制約と衝突 |
| 納品後の修正対応 | 減る | 運用側で完結 |
カンプ先行で作るなら、デザイン段階からブロックで表現できる構成にしておくのが最も効率的です。ブロックテーマは、デザインと実装を分断しない進め方と相性が良い仕組みだといえます.
まとめ
ブロックテーマは、ヘッダーからフッターまでをブロックで組み立てる仕組みです。「外観 → エディター」から、テンプレート（ページの型）とテンプレートパーツ（使い回す部品）を編集します。記事一覧はクエリループブロックで、PHPを書かずに条件と並び順を指定できます。色やフォントはtheme.jsonに定義すると、エディターの選択肢とCSS変数の両方に反映されるため、まずここを整えるのが近道です。既存サイトの移行は必須ではなく、新規制作やクライアント自身が更新するサイトから採用するのが現実的な進め方になります。
よくある質問（FAQ）
ブロックテーマかどうかはどこで見分けられますか？
管理画面の「外観」メニューを見てください。「エディター」があればブロックテーマ、「カスタマイズ」があればクラシックテーマです。両方表示される場合もありますが、その場合はテーマが部分的にブロック対応している状態です。
クラシックテーマは使えなくなりますか？
現時点で廃止の予定はありません。WordPressは両方式を並行してサポートしており、SWELLやCocoonのような高機能なクラシックテーマも活発に更新されています。急いで移行する必要はなく、新規案件から段階的に採用するのが現実的です。
theme.jsonは必ず書く必要がありますか？
ブロックテーマでは実質的に必須です。色・フォントサイズ・余白・レイアウト幅といった基本設定がここに集約されており、書かないとWordPress既定の設定がそのまま使われます。CSSで上書きすることもできますが、編集画面の表示と実際の表示がずれる原因になります。
ウィジェットやカスタマイザーはどうなりますか？
ブロックテーマではどちらも使いません。ウィジェットの役割はテンプレートパーツとブロックが担い、カスタマイザーの設定はサイトエディターの「スタイル」に移ります。ウィジェット前提のプラグインは、対応状況を事前に確認してください。
編集していてテンプレートを壊してしまいました。
サイトエディターでそのテンプレートを開き、右上のオプションメニューから「初期化（テーマの状態に戻す）」を選べば、テーマ同梱の初期状態に戻せます。ページごと・パーツごとに戻せるため、他の編集内容は保持されます。
あわせて読みたい関連記事
AIスキルで、未来の自分をアップデート！
今なら完全無料でAIを学べる！
- 動画や実践で楽しく学べる：初心者でも安心のカリキュラム
- スマホ・PCどちらでもOK：好きな時間に学習できる
- 料金は一切ナシ：0円でAIスキルが身につく
目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。
会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！
