2026年5月20日

WordPressのフルサイト編集（FSE）の使い方と仕組み

カスタマイズ

はじめに

フルサイト編集（FSE：Full Site Editing）は、WordPress 5.9以降で導入されたブロックベースのテーマ編集機能です。ヘッダー・フッター・テンプレートをGUIで編集でき、PHPテンプレートの知識なしにサイト全体のデザインを変更できます。

症状・原因

ヘッダーやフッターをGUIで変更したい
テーマのPHPを触らずにテンプレートを編集したい
FSEとクラシックテーマの違いが分からない
theme.jsonとサイトエディタの関係を理解したい

解決手順

ステップ1：サイトエディタを開く

管理画面 → 外観 → エディタ（サイトエディタ）

※「外観 → カスタマイザー」がある場合はクラシックテーマ
※「外観 → エディタ」がある場合はブロックテーマ（FSE対応）

サイトエディタの主要パネル:
・テンプレート   → 投稿、固定ページ、アーカイブなど
・テンプレートパーツ → ヘッダー、フッターなど
・スタイル       → グローバルスタイル（色・フォント）
・ナビゲーション → メニュー管理
・パターン       → ブロックパターン

ステップ2：ブロックテーマのディレクトリ構成

themes/my-block-theme/
├── theme.json              # デザイン設定
├── style.css               # テーマ情報ヘッダー + 最小CSS
├── functions.php           # ブロックサポート宣言
├── templates/
│   ├── index.html          # デフォルトテンプレート
│   ├── single.html         # 投稿テンプレート
│   ├── archive.html        # アーカイブテンプレート
│   ├── 404.html            # 404テンプレート
│   └── front-page.html     # トップページ
└── parts/
    ├── header.html         # ヘッダーパーツ
    └── footer.html         # フッターパーツ

ステップ3：テンプレートHTMLファイルの書き方

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

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

<!-- wp:post-title {"level":1} /-->
<!-- wp:post-featured-image {"isLink":false} /-->
<!-- wp:post-content /-->

<!-- wp:post-comments-form /-->

</main><!-- /wp:group -->

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

<!-- parts/header.html -->
<!-- wp:group {"tagName":"header","style":{"color":{"background":"#1d2327"}}} -->
<header class="wp-block-group">
<!-- wp:site-logo /-->
<!-- wp:navigation /-->
</header><!-- /wp:group -->

ステップ4：functions.phpでブロックサポートを有効化

// functions.php
add_action('after_setup_theme', function(): void {
    // FSEに必要なサポートを追加
    add_theme_support('block-templates');

    // 翻訳
    load_theme_textdomain('my-block-theme', get_template_directory() . '/languages');
});

ステップ5：サイトエディタでカスタマイズした変更を確認する

# サイトエディタで編集した内容はDBに保存される
# wp_template / wp_template_part カスタム投稿タイプとして保存

# WP-CLIで確認
wp post list --post_type=wp_template
wp post list --post_type=wp_template_part

# テーマのファイルに書き出す（開発用）
wp block-template export --theme=my-block-theme

注意事項

FSEはブロックテーマ（theme.json + templates/*.html）でのみ使用できます。Twenty Twenty-TwoやTwenty Twenty-Four等がブロックテーマです
サイトエディタで行った変更はデータベースの wp_template に保存され、テーマファイルより優先されます。テーマ更新時も変更は保持されます
クラシックテーマ（Twenty Twentyなど）にFSEを追加することはできません。ブロックテーマに切り替える必要があります

まとめ

FSEはブロックテーマの templates/ にHTMLファイルを配置することでテンプレートを定義します。サイトエディタ（外観 → エディタ）からGUIで編集でき、変更はDBに保存されます。ブロックテーマへの移行には add_theme_support('block-templates') と theme.json が必要です。

Post Views: 9