WordPressでフルサイト編集（FSE）を使いこなす方法・ブロックテーマ開発

はじめに

「テーマ全体をブロックエディターで管理したい」「theme.jsonでサイト全体のスタイルを一元管理したい」——フルサイト編集（FSE）はWordPress 5.9以降の標準機能で、ブロックテーマを使うことでヘッダー・フッター・テンプレートをすべてGUIで編集できます。

症状・原因

従来のクラシックテーマではPHPテンプレートファイルを直接編集しないとヘッダーやフッターを変更できませんでした。FSE対応のブロックテーマでは、管理画面の「外観→エディター」からすべての要素をGUI操作できます。theme.jsonで色・タイポグラフィ・スペーシングをグローバルに定義できます。

解決手順

ステップ1：ブロックテーマの基本構成を理解する

my-block-theme/
├── style.css              # テーマ識別（Requires PHP: 7.4以上）
├── theme.json             # グローバルスタイル定義
├── functions.php          # （オプション）追加機能
├── templates/             # ページテンプレート
│   ├── index.html         # デフォルトテンプレート（必須）
│   ├── single.html        # 投稿テンプレート
│   ├── archive.html       # アーカイブテンプレート
│   └── 404.html           # 404ページ
└── parts/                 # テンプレートパーツ
    ├── header.html        # ヘッダー
    ├── footer.html        # フッター
    └── sidebar.html       # サイドバー

/* style.css: テーマ識別情報 */
/*
Theme Name: My Block Theme
Description: FSE対応ブロックテーマ
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
*/

ステップ2：theme.jsonでグローバルスタイルを定義する

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "プライマリ",   "slug": "primary",   "color": "#2271b1" },
        { "name": "セカンダリ",   "slug": "secondary",  "color": "#1d2327" },
        { "name": "アクセント",   "slug": "accent",     "color": "#d63638" },
        { "name": "背景",         "slug": "background", "color": "#ffffff" }
      ],
      "custom": false
    },
    "typography": {
      "fontFamilies": [
        {
          "name": "Noto Sans JP",
          "slug": "noto-sans-jp",
          "fontFamily": "'Noto Sans JP', sans-serif"
        }
      ],
      "fontSizes": [
        { "name": "小",   "slug": "small",  "size": "13px" },
        { "name": "標準", "slug": "normal", "size": "16px" },
        { "name": "大",   "slug": "large",  "size": "24px" },
        { "name": "特大", "slug": "huge",   "size": "36px" }
      ],
      "customFontSize": false
    },
    "spacing": {
      "spacingScale": {
        "operator": "*",
        "increment": 1.5,
        "steps": 7,
        "mediumStep": 1.5,
        "unit": "rem"
      }
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--background)",
      "text": "var(--wp--preset--color--secondary)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--noto-sans-jp)",
      "fontSize": "var(--wp--preset--font-size--normal)",
      "lineHeight": "1.8"
    },
    "elements": {
      "h2": {
        "typography": { "fontSize": "var(--wp--preset--font-size--large)" },
        "border": { "bottom": { "width": "2px", "style": "solid", "color": "var(--wp--preset--color--primary)" } }
      },
      "link": {
        "color": { "text": "var(--wp--preset--color--primary)" }
      }
    }
  }
}

ステップ3：テンプレートファイルを作成する

<!-- templates/index.html: メインテンプレート -->
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

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

    <!-- wp:query {"queryId":1,"query":{"perPage":10,"offset":0,"postType":"post"}} -->
    <div class="wp-block-query">

      <!-- wp:post-template -->
      <!-- wp:group {"style":{"spacing":{"margin":{"bottom":"2rem"}}}} -->
      <div class="wp-block-group">
        <!-- wp:post-featured-image {"isLink":true} /-->
        <!-- wp:post-title {"isLink":true,"level":2} /-->
        <!-- wp:post-excerpt /-->
        <!-- wp:post-date /-->
      </div>
      <!-- /wp:group -->
      <!-- /wp:post-template -->

      <!-- wp:query-pagination -->
      <!-- wp:query-pagination-previous /-->
      <!-- wp:query-pagination-numbers /-->
      <!-- wp:query-pagination-next /-->
      <!-- /wp:query-pagination -->

    </div>
    <!-- /wp:query -->

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

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

<!-- parts/header.html: ヘッダーパーツ -->
<!-- wp:group {"tagName":"header","style":{"color":{"background":"#1d2327"}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<header class="wp-block-group">
  <!-- wp:site-logo /-->
  <!-- wp:navigation {"textColor":"white"} /-->
</header>
<!-- /wp:group -->

ステップ4：エディターでテンプレートを編集する

管理画面 → 外観 → エディター

【テンプレート】タブ:
  - index（ホーム）を選択
  - ブロックを追加・削除・並び替え
  - 「保存」でデータベースに保存

【テンプレートパーツ】タブ:
  - ヘッダー・フッターをGUI編集
  - 全テンプレートに反映される

【グローバルスタイル】（右上の○アイコン）:
  - 色・タイポグラフィを一括変更
  - theme.jsonの設定をGUIでオーバーライド可能

ステップ5：カスタムブロックパターンを登録する

// functions.phpでブロックパターンを登録
add_action( 'init', function() {
    register_block_pattern(
        'my-theme/hero-section',
        [
            'title'       => 'ヒーローセクション',
            'description' => '大見出しとCTAボタンのセット',
            'categories'  => ['featured'],
            'content'     => '<!-- wp:group {"align":"full","style":{"color":{"background":"#2271b1"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull">
<!-- wp:heading {"level":1,"style":{"color":{"text":"#ffffff"}}} -->
<h1 class="wp-block-heading has-white-color has-text-color">サービスのキャッチコピー</h1>
<!-- /wp:heading -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">今すぐ始める</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->',
        ]
    );
} );

注意事項

• FSEはブロックテーマ（theme.jsonを持つテーマ）でのみ動作します。Twenty Twenty-Three以降の公式テーマまたは自作ブロックテーマが必要です。クラシックテーマでは「外観→エディター」メニューが表示されません。
• テンプレートをエディターで保存するとデータベースのwp_posts（post_type: wp_template）に保存されます。テーマのPHPファイルより優先されます。テーマを更新・変更する際はカスタマイズが失われないよう確認してください。
• theme.jsonの"custom": falseを設定するとカラーピッカーが無効になり、パレット外の色を使用できなくなります。クライアント向けサイトでブランドカラーを統一したい場合に有効です。

まとめ

フルサイト編集は「theme.jsonでグローバルスタイル定義→templates/でテンプレート作成→parts/でヘッダー・フッター作成→管理画面エディターでGUI編集→ブロックパターンで再利用パーツ登録」の流れで整備できます。関連記事：WordPressでカスタムブロックを作成する方法、WordPressのブロックエディターをカスタマイズする方法。