フルサイト編集（FSE）とは｜サイトエディターの使い方とブロックテーマ

フルサイト編集は、WordPressでヘッダーやフッターまで含めて、ブロックだけでサイト全体を組める機能です。かつては「フルサイト編集（FSE、Full Site Editing）」と呼ばれていましたが、現在のWordPress公式ドキュメントでは「サイトエディター」という名称で説明されています。検索でFSEという語をよく見かけるのは、この呼び方が広まった時期の情報が残っているためです。

この記事では、最小構成のブロックテーマを作って表示を確認し、テンプレートパーツ・theme.json・ブロックパターンの扱いまでを順に見ていきます。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

まず2ファイルで表示を確認する

テスト用WordPressのwp-content/themes/waza-minimal-demo/に次の2ファイルを作成します。本番のテーマは切り替えず、テスト環境で有効化して表示を確認してください。これは仕組みを学ぶ最小例で、投稿一覧や個別記事の内容を表示する完成テーマではありません。

style.css

/*
Theme Name: WAZA Minimal Demo
Text Domain: waza-minimal-demo
*/

templates/index.html

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group"><!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">最小ブロックテーマ</h1>
<!-- /wp:heading -->
<!-- wp:paragraph --><p>テンプレートから表示しています。</p><!-- /wp:paragraph -->
</main><!-- /wp:group -->

不要になったらテスト環境の外観→テーマで元のテーマへ戻します。エディターで作ったカスタマイズをクリアするときは、先にエクスポートまたはバックアップしてください。以下の管理画面画像は過去の撮影で、現在のメニュー名や配置とは異なる場合があります。

必要ファイルはWordPress公式のテーマ構成、保存先と優先順位はテンプレートの解説を参照してください。

フルサイト編集（FSE）とサイトエディターの関係

• 公式の名称は「サイトエディター（Site Editor）」
• 「フルサイト編集」「FSE」は、機能が登場した頃の呼び方
• サイトエディターは、サイト全体をブロックで編集する機能群の中心となる編集画面

この記事でも以降はサイトエディターと書きます。

使うにはブロックテーマが必要

サイトエディターは、ブロックテーマを有効化しているときだけ使えます。

公式ドキュメントにも、ブロックテーマをインストールして有効化した場合にのみ利用できると明記されています。

SWELLのようなクラシックテーマを使っている場合、外観のメニューに「エディター」は出てきません。

ブロックテーマを探すときは、外観 ＞ テーマ ＞ 新規追加 から「ブロックテーマ」で絞り込めます。

開き方

ブロックテーマを有効化したあと、管理画面の 外観 ＞ エディター から開きます。

サイトエディターでできること

WordPress公式のサイトエディター解説では、主に次の編集機能を案内しています。メニューの名称や配置はWordPressのバージョンにより異なります。

• 識別情報：サイトのタイトル、キャッチフレーズ、ロゴ、サイトアイコン
• スタイル：配色やタイポグラフィなど、サイト全体の見た目
• ページ：ページの内容をサイトエディターの中で編集する
• ナビゲーション：メニューの確認と編集
• パターン：同期パターンとテンプレートパーツの管理
• テンプレート：検索結果や404などを含む、ページ種別ごとのレイアウト

コマンドパレット（WindowsではCtrl+K）から、テンプレートやページを名前で呼び出すこともできます。

以降は、ブロックテーマを自分で組む場合の具体的な手順です。

まずは完成しているテーマを見てみる

フルサイト編集（FSE）について簡単に概要を把握するために、Vektor,Inc.の動画や制作されたテーマを見ると良いです。

X-T9 WordPress Theme

X-T9 クイックスタート | X-T9 WordPress Theme ビジネスサイトの雛形を3分でセットアップ！インポートするデータはプラグイン「All-in-One WP Migration」を使い、テーマ / 推奨プラグイン / コンテンツデータなどを一つ…

とはいえ、すでに出来上がったデータを見てもわからないこともありますので、

一から簡単にフルサイト編集（FSE）のテーマを作成してみます。

フルサイト編集（FSE）を最小限の構成で表示する

配布されているデータだけでは把握しづらいこともあるので、最小限の構成で表示を確認してみます。

各種ファイルを用意する

まずは以下のファイルを用意します。

※index.phpは今は必要なくなりました。

ブロックテーマとして認識させる最小構成はstyle.cssとtemplates/index.htmlです。theme.jsonとfunctions.phpは必須ではありません。theme.jsonを作るなら空ファイルではなく有効なJSONを記述します。

基本的な自作テーマの基本パーツについては下記の記事に詳細を書いています。

あわせて読みたい

WordPress自作テーマ制作①│超最小構成で自作テーマを作る方法 対象はPHPテンプレートを使うクラシックテーマです。最小の認識条件と、記事を実際に表示できる状態を分けて説明します。ブロックテーマの作成手順ではありません。過去…

ブロックテーマの必須ファイルはstyle.cssとtemplates/index.htmlの2つです（公式のテーマ構成）。index.phpは必要ありません。

管理画面 ＞ 外観 ＞ エディターからフルサイトの編集画面が表示されるのを確認します。

style.cssとtemplates/index.htmlの最小構成でも、サイトエディターでindexテンプレートを編集できます。ここからはヘッダーとフッターを共通パーツに分けるため、

もう少し形を整えていきます。

フルサイト編集（FSE）でテンプレートパーツを読み書きする

先ほど作成したindex.htmlに下記のコードを挿入します。

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

続いてpartsフォルダを作成して、header.htmlとfooter.htmlを格納します。

エディターを開き直すと、headerとfooterを共通のテンプレートパーツとして編集できます。パーツがないとindex全体を編集できない、という意味ではありません。

中身を作っていきます。いったん空のヘッダーとフッターのブロックを削除。

プラスボタンからヘッダーとフッターを選択して、初めから用意されているテンプレートを適用します。

適用後は以下の通りです。

右側のテンプレートメニューがヘッダー / フッターと表記されていれば共通パーツとして認識されています。

テンプレートをエクスポートする

この作成したブロック群をそれぞれの共通パーツとして登録しましょう。

左メニューからテンプレートパーツを選択。

さらにすべてのテンプレートパーツを表示を選択します。

先ほど選んだパーツのHTMLが生成されるのでどちらかを選択（Header with hero image）

サイトエディターのエクスポートで、現在のテーマをZIP形式で保存します。保存済みテンプレートはtemplates/、保存済みテンプレートパーツはparts/に含まれます。下の画像は当時の操作画面です。現在のメニューの位置が異なる場合があります。

ZIPを展開し、parts/内のヘッダー用HTMLを確認してから、テーマ側の対応するパーツへ移します。ファイル名は保存したパーツのスラッグにより異なります。移す前に現在のファイルを保存してください。

フッターも同様に、ZIPのparts/内にある対応ファイルから移します。

テンプレートを削除する前に確認すること

テーマファイルへの移行前に、元のテンプレートを削除しないでください。ファイルの表示を確認する際は、ZIPまたはバックアップを残してから、対応する保存済みカスタマイズをクリアします。

再読み込みすると移植した表示が反映されています。

テンプレートの状態をリセット（カスタマイズをクリア）

このときエリア名が「一般」になっていたので、ヘッダーとフッターに変更して保存します。

エディターで保存したテンプレートはwp_template、テンプレートパーツはwp_template_partという投稿タイプとしてデータベースに保存されます。保存済みのカスタマイズがあると、テーマファイル側の変更より優先されます。

もしテンプレートの状態をリセットしたい場合は

テンプレート一覧からカスタマイズをクリアを押すとリセットされます。

このようにテンプレートを編集してエクスポートし、テーマファイル側に上書きすることで、テンプレートの初期状態を更新できます。

theme.jsonの設定

theme.jsonはサイト全体の設定、プリセットを登録できます。

文字や色だけでなく、特定の条件のCSSも生成することができます。

たとえば下記のように書くと、スタイルのテーマの項目にプリセットの赤色が表示されます。versionは現行の3を指定しています（WordPress 6.6以降）。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "red",
					"color": "#FF0000",
					"name": "Red"
				}
			]
		}
	}
}

設定できる項目は多いため、一覧はWordPress公式のtheme.jsonリファレンスで確認してください。

自作のブロックパターンの作成

自作パターンの登録に、既存パターンの無効化は必須ではありません。WordPressコアの標準パターンを使わない場合のみ、次の設定を追加します。

テスト用テーマのfunctions.phpのPHP領域に次のコードを追加します。対象はコアの標準パターンです。テーマ・プラグインが登録したパターンや、保存済みのユーザーパターンをすべて削除するコードではありません。詳しくは公式のパターン登録・解除の説明を参照してください。元に戻す場合は、この追加行を削除します。

//デフォルトのブロックパターンを削除
remove_theme_support('core-block-patterns');

パターンを作成します。

適当にブロックをいくつか作成して、全体を選択した状態で右クリックからコピーを選びます。

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:avatar {"size":113,"isLink":true,"align":"center"} /-->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size"><strong>すいみん</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

あとはブロックパターンを登録します。

次のPHPコードもテスト用テーマのfunctions.phpのPHP領域へ追加します。testというカテゴリーに、表示名avatar・登録名mytheme/avatarでパターンを登録します。アバターは投稿者の情報を参照するブロックですが、「すいみん」という名前は固定の文章です。利用するサイトに合わせて変更してください。編集前にファイルを保存し、不具合が出たら追加部分を取り除いて戻します。

//ブロックパターンを登録
add_action('init', function () {
    register_block_pattern_category('test', ['label' => 'test']);

    $content = <<<'EOD'
    <!-- wp:group {"layout":{"type":"constrained"}} -->
    <div class="wp-block-group"><!-- wp:avatar {"size":113,"isLink":true,"align":"center"} /-->
    <!-- wp:paragraph {"align":"center","fontSize":"small"} -->
    <p class="has-text-align-center has-small-font-size"><strong>すいみん</strong></p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:group -->
    EOD;

    $pattern = [
        "title" => "avatar",
        "categories" => ["test"],
        "description" => "",
        "content" => $content,
    ];

    register_block_pattern('mytheme/avatar', $pattern);
});

以上でオリジナルのブロックパターンが登録されました。

こんな感じでブロックからパターンを作り、それをテンプレートパーツやテンプレートにはめ込んでサイトを作成していきます。

サイトエディターで保存した内容を確かめる

最小構成のブロックテーマを有効にし、サイトエディターのテンプレート一覧からIndexを開きます。本文の段落を変更して保存し、保存通知が出てから公開ページを開いてください。コードエディターを使う場合も、編集したHTMLをファイルへ保存する操作とは異なります。

過去の検証環境ではIndexの段落を「サイトエディターで保存したテンプレートです。」へ変更しました。保存通知と、PC幅1280px・スマホ幅390pxの公開表示を確認しています。その後templates/index.html側の段落を一時的に変えても、公開側はエディターで保存した内容を表示しました。ファイルを変更したのに反映されない場合は、同じテンプレートの保存済みカスタマイズを確認してください。

戻す前に、現在のテンプレート内容を控え、ファイルとデータベースをバックアップします。その検証環境ではエクスポート操作時に「Zip Export not supported.」が表示され、ZIPの取得は確認できませんでした。書き出し成功やテンプレートパーツの編集・リセット操作は、その検証の確認範囲に含まれていません。2026年10月21日の本文見直しでは、これらの実機操作を再検証していません。保存内容を失う操作を、バックアップの代わりに行わないでください。

まとめ

今回はフルサイト編集（FSE）の自作テーマの基本的な機能を確認してみました。

テンプレートとテンプレートパーツで基礎部分を作成。

ブロックパターンを駆使して、ページのレイアウトを作成していきます。

また設定やプリセットまわりはtheme.jsonで制御できます。

標準ブロックで足りない機能は、目的に合うプラグインやカスタムブロックによる拡張を検討します。

理論的にはこれらを駆使して、ノーコードでサイト制作が可能だと思います。

気になった方は是非さわってみてください。

GitHubの過去の例は今回の修正と同期していません。現行の説明とコードはこの記事を参照してください。過去のコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。

WordPressの使い方はWordPressの使い方まとめから探せます。

よくある質問：フルサイト編集（FSE）・サイトエディターを使うとき

フルサイト編集（FSE）とは、何ですか？

記事では、WordPressでヘッダーやフッターまで含めて、ブロックだけでサイト全体を組める機能です。かつては「フルサイト編集（FSE、Full Site Editing）」と呼ばれていましたが、現在のWordPress公式ドキュメントでは「サイトエディター」という名称で説明されています。

使うには、何が必要ですか？

記事では、ブロックテーマが必要です。管理画面の 外観 ＞ エディター から開きます。

ブロックテーマとして認識させる最小構成は？

記事では、style.cssとtemplates/index.htmlです。theme.jsonとfunctions.phpは必須ではなく、theme.jsonを作るなら空ファイルではなく有効なJSONを記述します。index.phpは必要ありません。

試すときの注意点は？

記事では、テスト用WordPressのテーマフォルダに作成し、本番のテーマは切り替えず、テスト環境で有効化して表示を確認します。不要になったらテスト環境の外観→テーマで元のテーマへ戻します。エディターで作ったカスタマイズをクリアするときは、先にエクスポートまたはバックアップします。

サイトエディターでは、何を編集できますか？

記事では、識別情報（サイトのタイトル、キャッチフレーズ、ロゴ、サイトアイコン）、スタイル（配色やタイポグラフィ）、ページ、ナビゲーション、パターン（同期パターンとテンプレートパーツの管理）、テンプレート（検索結果や404などを含む、ページ種別ごとのレイアウト）が並びます。コマンドパレットから、テンプレートやページを名前で呼び出すこともできます。

エディターで編集した内容は、テーマのファイルと、どちらが優先されますか？

エディター側が優先されます。記事では、エディターで保存したテンプレートはwp_template、テンプレートパーツはwp_template_partという投稿タイプとしてデータベースに保存され、保存済みのカスタマイズがあると、テーマファイル側の変更より優先されます。リセットしたい場合は、テンプレート一覧からカスタマイズをクリアします。

エディターで作ったテンプレートを、テーマに反映するには？

記事では、サイトエディターのエクスポートで、現在のテーマをZIP形式で保存します。保存済みテンプレートはtemplates/、保存済みテンプレートパーツはparts/に含まれます。ZIPを展開し、parts/内のHTMLを確認してから、テーマ側の対応するパーツへ移します。移す前に現在のファイルを保存します。

theme.jsonには、何を設定できますか？

記事では、theme.jsonはサイト全体の設定、プリセットを登録できます。文字や色だけでなく、特定の条件のCSSも生成できます。バージョンは現行の3を指定しています（WordPress 6.6以降）。設定できる項目は多いため、一覧はWordPress公式のtheme.jsonリファレンスで確認します。