2026年8月6日

2026年8月6日

FSE対応のブロックテーマでサイトエディターを活用する手順

ブロックテーマ(FSE対応テーマ)では、ヘッダー・フッター・記事ページの枠組み・配色や文字の設定まで、管理画面のサイトエディターから編集できます。ただし、サイトエディターでの変更はテーマのファイルではなくデータベースに保存されるため、仕組みを知らずに触ると「テーマを更新したのに反映されない」「子テーマに切り替えたら変更が消えた」といったつまずきが起きます。この記事では、編集を始める前の準備から、スタイル・テンプレート・パターンの使い分け、変更の戻し方と書き出しまでを順に説明します。

対象は、Twenty Twenty-Five などのブロックテーマを使っていて、これからサイトエディターで見た目を整えたい人です。

サイトエディターが使える条件を確かめる

サイトエディターは、有効化しているテーマがブロックテーマのときに「外観」メニューの「エディター」から開けます。テーマフォルダに templates/index.html があり、テンプレートがHTML(ブロックのマークアップ)で書かれているのがブロックテーマの目印です。従来型のクラシックテーマでは「カスタマイズ」や「ウィジェット」が表示され、サイトエディターでのテンプレート編集はできません(パターンの管理など、一部の機能はクラシックテーマでも使えます)。

開けるのは edit_theme_options 権限を持つユーザー、通常は管理者だけです。メニューの位置や名称はWordPressのバージョンで変わってきたため、見当たらない場合は「外観」配下を探してください(2026年10月現在)。

編集を始める前に決めておくこと

子テーマを使うかを先に決める

サイトエディターで保存したテンプレートやスタイルは、そのときに有効なテーマに結び付いて保存されます。親テーマで編集を進めてから子テーマに切り替えると、それまでの変更は子テーマ側には引き継がれません。後からファイルでの調整(独自のCSSや関数の追加)をする見込みがあるなら、最初に子テーマを作って有効化してから編集を始めます。

ブロックテーマの子テーマは、style.css のヘッダーと、必要に応じて theme.json を置くだけで作れます。

/*
Theme Name: My Child Theme
Template: twentytwentyfive
Version: 1.0.0
*/

Template には親テーマのフォルダ名を書きます。ブロックテーマでは style.css が自動では読み込まれないことが多いため、子テーマの style.css に見た目のCSSを書く場合は functions.php で読み込みます。

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'my-child-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

バックアップとステージング

テンプレートの編集はサイト全体の表示に影響します。データベースを含むバックアップを取り、可能ならステージング環境で試してから本番に反映します。特に、ヘッダーやフッターのテンプレートパーツは全ページに出るため、壊すと影響範囲が広くなります。

スタイル:サイト全体の配色と文字を整える

サイトエディターの「スタイル」では、色・文字(フォントやサイズ)・余白・レイアウト幅などをサイト全体に対して設定します。ブロックの種類ごと(見出し、ボタン、引用など)の見た目もここで決められます。個々の記事でブロックを1つずつ装飾するより、ここで全体のルールを決めておくほうが統一感が出て、後からの変更も一か所で済みます。

テーマによっては、配色や文字の組み合わせをまとめた「スタイルバリエーション」が用意されています。まずバリエーションから近いものを選び、細部を調整すると早く仕上がります。

ここでの変更は wp_global_styles という内部の投稿としてデータベースに保存され、テーマの theme.json の値の上に重ねて適用されます。テーマ側の初期値は消えないため、変更をやめたいときは「スタイル」のメニューにあるリセット操作で既定に戻せます。比較的新しいバージョンでは、スタイルの変更履歴(リビジョン)を見て以前の状態に戻すこともできます。

選べる値を絞る

複数人でサイトを運用する場合、自由に色や文字サイズを選べると見た目がばらつきます。子テーマの theme.json で、使える色をパレットに限定し、自由入力を止められます。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "custom": false,
      "customGradient": false,
      "palette": [
        { "slug": "brand", "color": "#1e5aa8", "name": "ブランド" },
        { "slug": "text", "color": "#222222", "name": "本文" }
      ]
    },
    "typography": {
      "customFontSize": false
    }
  }
}

version の 3 は WordPress 6.6 以降で使う形式です。子テーマで同じ設定を書くと親テーマの値が上書きされるため、親のパレットの色を残したい場合は子テーマ側にも書き、エディター上で色の一覧を確認します。

テンプレートとテンプレートパーツ:ページの枠組みを編集する

「テンプレート」は、記事ページ・固定ページ・アーカイブ・検索結果・404など、ページの種類ごとの枠組みです。WordPressはテンプレート階層に従って、表示するページに合うテンプレートを選びます。例えば記事ページを変えたいなら「単一投稿」系のテンプレートを、全種類に共通する土台なら「インデックス」を編集します。

「テンプレートパーツ」は、ヘッダーやフッターのように複数のテンプレートで共有する部品です。ヘッダーを1か所直せば、そのパーツを使うすべてのテンプレートに反映されます。

編集のときのつまずきやすい点は次のとおりです。

  • 特定の記事だけ見た目を変えたいのにテンプレートを直すと、同じテンプレートを使う全記事が変わります。固定ページなら、新しいテンプレートを追加してそのページだけに割り当てる方法が安全です
  • ナビゲーションブロックのメニュー項目は、テンプレートとは別のデータとして保存されます。メニューを直すつもりでテンプレートの構造まで変えないよう、どこを編集しているかを画面上部の表示で確かめます
  • 「投稿コンテンツ」ブロックを消すと、記事の本文が表示されなくなります。テンプレートの中で残すべきブロックを把握してから作業します

パターン:繰り返し使う部品をまとめる

よく使うブロックの組み合わせ(料金表、問い合わせへの誘導、著者紹介など)はパターンとして登録しておくと、どの記事からも呼び出せます。パターンには、元を直すと使用箇所すべてに反映される「同期」タイプと、挿入後はそれぞれ独立して編集できる「非同期」タイプがあります。全ページで同じ内容を保ちたい告知などは同期、ひな形として使うものは非同期が向いています。以前の「再利用ブロック」は、同期パターンとして扱われるようになりました。

テーマが用意したパターンは、テーマの patterns/ フォルダに PHP ファイルとして置かれています。自作のパターンをテーマのファイルとして持たせたい場合は、子テーマの patterns/ に置く方法もあります。

変更が反映されないときの確認

ブロックテーマで多いのは、「テーマのファイルを直したのに表示が変わらない」という相談です。サイトエディターで一度でも保存したテンプレートは、データベース側の内容がファイルより優先されます。テーマを更新しても、編集済みのテンプレートには更新が届きません。

どのテンプレートが編集済みかは、サイトエディターのテンプレート一覧で確認できます。WP-CLIが使える環境なら、データベースに保存されているものを一覧できます。

wp post list --post_type=wp_template --fields=ID,post_name,post_modified
wp post list --post_type=wp_template_part --fields=ID,post_name,post_modified

ファイル側の内容に戻したい場合は、サイトエディターでそのテンプレートを開き、テーマの初期状態に戻す操作(リセットやカスタマイズの削除)を選びます。戻すと自分の変更は失われるため、残したい部分は先にパターンとして保存しておきます。

これに加えて、キャッシュ系のプラグインやサーバーのキャッシュが古いHTMLを返していることもあります。保存後はキャッシュを削除し、ログアウトした状態のブラウザで表示を確認します。

変更をファイルとして残す

データベースに保存された変更は、サイトの移行やテーマの作り直しのときに扱いにくくなります。そこで、ある程度仕上がったらファイルとして書き出しておくと管理しやすくなります。

  • サイトエディターのオプションメニューにあるエクスポート機能で、変更を含めたテーマをzipで保存できます
  • WordPress.org が公開している「Create Block Theme」プラグインを使うと、エディターでの変更をテーマのファイルに書き戻したり、現在の状態から子テーマを作ったりできます。機能名や画面の構成は版によって変わるため、使う前にプラグインの説明を確認してください

ファイルに書き戻した後は、データベース側の変更をリセットしておくと、ファイルとデータベースのどちらが効いているのか迷わずに済みます。Gitなどでテーマを管理していれば、変更の差分も追えるようになります。

まとめ

  • サイトエディターはブロックテーマで使え、変更はテーマのファイルではなくデータベースに、テーマごとに保存される
  • 後からファイルで調整する予定があるなら、編集を始める前に子テーマを作って有効化する
  • 全体の見た目は「スタイル」、ページの枠組みは「テンプレート」、共通部品は「テンプレートパーツ」、繰り返す内容は「パターン」と使い分ける
  • テーマを更新しても反映されないときは、編集済みのテンプレートがファイルより優先されていないかを確かめる
  • 仕上がったらエクスポートや Create Block Theme でファイルとして残し、バックアップとステージングでの確認を続ける

お気軽にご相談ください

お見積りへ お問い合わせへ
▲