ブロックテーマとは何か — クラシックテーマとの違いを、乗り換える人の目線で

雪谷匡良のアバター

·

·

32〜48分
青いブロックの台の上に、オレンジ色のブロックが 1 つだけ置かれている

いま使っている WordPress サイトは問題なく動いている。でも「ブロックテーマ」という言葉をよく見かけるようになったし、管理画面に「サイトエディター」という見慣れないメニューが増えていた、テーマを変えたら「外観 > カスタマイズ」が消えていた——そんなきっかけで気になり始めた方も多いのではないでしょうか。

この記事は、いまクラシックテーマを使っていて、ブロックテーマが気になっている方に向けて書いています。用語の定義から始めて、具体的に何が違うのか、乗り換えると作業がどう変わるのか、何が引き継がれず何が失われるのかまで、順番に整理します。

事実の部分は、すべて WordPress の公式ドキュメントとプラグインディレクトリから 2026 年 9 月 22 日に確認したものです。出典は本文中にリンクで置きます。

ブロックテーマとは

ブロックテーマとは、サイトの全体(ヘッダー・フッター・投稿一覧・記事ページなど)をブロックで組み立てるテーマのことです。WordPress の公式ドキュメントでは、次のように説明されています。

A block theme is a theme that uses blocks for all parts of a site, including navigation menus, header, content, and site footer.
(ブロックテーマとは、ナビゲーションメニュー・ヘッダー・コンテンツ・フッターを含むサイトのすべての部分にブロックを使うテーマです。)

出典:WordPress.org Documentation – Block themes

登場したのは 2022 年 1 月 25 日にリリースされた WordPress 5.9 です。このバージョンでフルサイト編集(Full Site Editing)が正式に入り、同時に WordPress の歴史で最初の既定のブロックテーマとして Twenty Twenty-Two が同梱されました。(出典:WordPress.org Documentation – Version 5.9)

それ以前のテーマは、記事の本文だけがブロックエディターで編集でき、ヘッダーやフッターはテーマの PHP ファイルの中にありました。ブロックテーマではその境目がなくなり、サイトのほぼ全域が同じエディターで編集できます。区別のために、従来型のテーマは「クラシックテーマ」と呼ばれるようになりました。

クラシックテーマと何が違うのか

まず全体像を並べます。どちらが優れているという話ではなく、設定の置き場所と編集の入口が変わるのが本質です。

項目クラシックテーマブロックテーマ
テンプレートindex.php などの PHP ファイルtemplates/index.html などの HTML ファイル
ヘッダー・フッターheader.php / footer.phpテンプレートパーツ(管理画面で編集可能)
色・文字サイズの定義CSS とテーマのオプション画面theme.json
見た目の調整外観 > カスタマイズ外観 > エディター(サイトエディター)
メニュー外観 > メニューナビゲーションブロック
ウィジェット外観 > ウィジェットテンプレートパーツに直接ブロックを置く

ここから、影響の大きい 3 つを順番に見ていきます。

違い 1:デザインの設定が theme.json に集まる

ブロックテーマでいちばん大きい変化が theme.json です。テーマの直下に置く 1 枚の JSON ファイルで、色のパレット、文字サイズの段階、余白の段階、コンテンツの幅、ブロックごとの初期スタイルをまとめて定義します。(参考:WordPress Developer Resources – Global Settings and Styles)

たとえば文字サイズをここで 8 段階定義しておくと、ブロックエディターのサイズ選択肢がその 8 段階になります。書き手は「16px」「18px」と数字を入力するのではなく、用意された段階から選ぶことになります。書き方はこのような形です。

{
  "version": 3,
  "settings": {
    "typography": {
      "customFontSize": false,
      "fontSizes": [
        { "slug": "small",  "size": "0.8rem", "name": "S" },
        { "slug": "medium", "size": "1rem",   "name": "M" },
        { "slug": "large",  "size": "1.25rem","name": "L" }
      ]
    }
  }
}

ポイントは "customFontSize": false です。これを入れておくと、エディターから自由入力の欄そのものが消えます。色についても settings.color.custom を false にすれば、カラーピッカーが閉じてパレットから選ぶだけになります。

これが効いてくるのは引き渡したあとです。クラシックテーマでは、制作時にどれだけ整えても、運用のなかで本文に直接 style が書き込まれたり、見出しだけ別の色になったりして、少しずつ崩れていくことがありました。選択肢そのものを絞っておけば、崩れる余地が減ります。

違い 2:テンプレートが PHP から HTML になる

コードエディターにソースコードが表示されているディスプレイ
写真:Ilya Pavlov

クラシックテーマの single.php にあたるものが、ブロックテーマでは templates/single.html になります。中身は PHP ではなく、ブロックのコメント記法で書かれた 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-content /-->
</main>
<!-- /wp:group -->

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

PHP が書けなくてもテンプレートを触れるようになった一方で、PHP でしかできなかったことが素直には書けません。条件分岐や、ループの中で独自のクエリを回すといった処理は、そのままの形では持ち込めません。ここは後述の「つまずきやすいところ」で触れます。

違い 3:見た目の変更が管理画面で完結する

「外観 > エディター」から開くサイトエディターで、ヘッダーのロゴ位置、フッターの文言、記事一覧の並び方といった、これまで FTP でファイルを触っていた部分が編集できます。編集した内容はテーマのファイルではなくデータベースに保存されるため、テーマを更新しても上書きされません。

公式ドキュメントによると、サイトエディターを開いたときに見えるメニューは次の 6 つです(出典:WordPress.org Documentation – Site Editor、最終更新 2026 年 9 月 14 日)。

  • Identity:サイトタイトル、キャッチフレーズ、ロゴ、サイトアイコン
  • スタイル:配色・タイポグラフィ・レイアウトと、スタイルバリエーションの切り替え
  • ページ:固定ページの中身をサイトエディターの中で編集する
  • ナビゲーション:メニューの一覧と基本的な編集
  • パターン:同期パターンとテンプレートパーツの管理
  • テンプレート:各ページ種別のレイアウト(検索結果、404 など)

なお WordPress 7.1 からは、サイトエディターのどの画面でも管理バーが常時表示されるようになりました。編集中に管理画面へ戻る導線が分かりにくい、という以前の不満はここで解消されています(同上)。

これは子テーマの役割が小さくなることを意味します。クラシックテーマでは「テンプレートを 1 行だけ変えたいので子テーマを作る」という場面が多くありましたが、ブロックテーマではサイトエディターで変えて保存すれば済むことが増えます。

おまけ:配色をまるごと切り替えられる

ブロックテーマには「スタイルバリエーション」というしくみがあります。テーマの styles/ フォルダに theme.json と同じ形式のファイルを置くと、サイトエディターの「スタイル」からワンクリックで配色やタイポグラフィを切り替えられます。

クラシックテーマでも「カラースキーム」を持つものはありましたが、テーマごとに独自実装でした。ブロックテーマではこれが標準のしくみなので、どのテーマでも同じ場所・同じ操作で切り替えられます。提案の場で配色案を 3 つ見せる、といった使い方がしやすくなりました。

クラシックエディターはいつまで使えるのか

乗り換えを考えるときに、いちばん気になるのがここだと思います。まず事実だけを並べます。

「Classic Editor」は WordPress チームが管理している公式プラグインで、2026 年 9 月 22 日時点の状況は次のとおりです(出典:WordPress.org プラグインディレクトリ – Classic Editor)。

バージョン1.7.0
最終更新2026-05-28
有効インストール800 万以上
検証済みの WordPress7.0.5

プラグインの説明文には「2024 年まで、あるいは必要とされる限り、完全にサポート・メンテナンスされます」と書かれています。この文言自体は以前から変わっていませんが、実際には 2026 年 5 月にも更新されており、いまも維持されています。

つまり「明日使えなくなる」という話ではありません。一方で「いつまで」の確約もありません。ここは急いで乗り換える理由にも、乗り換えない理由にもしないのが妥当だと思います。判断材料はむしろ次の点です。

WordPress の新しい機能は、ブロックエディターを前提に作られるようになっています。たとえば WordPress.org 自身が公開している公式の AI プラグインには、「WordPress ブロックエディターが必要です。Classic Editor プラグインおよびブロックエディター以外の編集環境はサポートされません」と明記されています(出典:WordPress.org プラグインディレクトリ – AI)。使えなくなるのではなく、新しく増える機能の対象から外れていく、という形で差が開いていきます。

乗り換える前にやっておくこと

ここからは実務の話です。WordPress 公式の学習サイト Learn WordPress が、クラシックテーマからブロックテーマへ切り替える手順を公開しています(出典:Learn WordPress – How to switch from a classic to a block theme)。要点をまとめます。

  1. バックアップを取る。データベース、メディアファイル、テーマファイルを含めた完全なバックアップ
  2. ステージング環境で試す。本番でいきなり切り替えず、ローカルかステージングで先に問題を洗い出す
  3. プラグインの対応を確認する。いま使っているプラグインがブロックテーマで動くかを、切り替え前に確かめる
  4. スタイルを整える。サイトエディターの「スタイル」で、配色・タイポグラフィ・余白を先に決める
  5. テンプレートを調整する。テンプレートとテンプレートパーツを必要な形に直す
  6. 本番へ反映し、もう一度確認する。

3 番を軽く見ないことをおすすめします。ここで漏れると、切り替えたあとに戻すことになります。

乗り換えるときにつまずきやすいところ

「外観 > カスタマイズ」が消える

ブロックテーマに切り替えると、カスタマイザーのメニューは原則として表示されなくなります。これは不具合ではありません。設定の入口がサイトエディターに移ったためです(前掲の公式ドキュメント「Block themes」にも、カスタマイザーはブロックテーマでは利用できないと明記されています)。運用をクライアントに引き渡している場合は、切り替えの前に「どこで何を変えるか」を説明し直す必要があります。

カスタム CSS が消える

公式の手順書でもはっきり書かれています。前のテーマに当てていたカスタム CSS は引き継がれません。カスタマイザーの「追加 CSS」に書いていたものは、切り替え前に控えておいてください。

ただし、控えた CSS をそのまま貼り直すのは最後の手段にしたほうがよいと思います。そのうちの多くは、theme.json やブロックの設定で書かずに済むようになっているからです。まず「この CSS は何を直すために書いたのか」を確認し、標準の設定で代用できないかを見てから移すと、残す量がかなり減ります。

ウィジェットとメニューの設定が引き継がれない

ウィジェットエリアとナビゲーションメニューは、ブロックテーマでは別のしくみ(テンプレートパーツとナビゲーションブロック)に変わります。クラシックテーマで登録していた内容はそのままでは移りません。メニューは作り直しになりますが、リンク先の固定ページや投稿はそのまま使えます。切り替え前に、どのウィジェットをどこに置いていたかを控えておくと作業が楽になります。

ヘッダーが編集できない/サイトエディターが出てこない

「ヘッダーのロゴを差し替えたいのに編集画面が見つからない」「外観にエディターの項目が見当たらない」——このどちらも、有効化しているテーマがブロックテーマではないことが原因であることがほとんどです。公式ドキュメントにも、サイトエディターはブロックテーマを有効化しているときだけ使えると書かれています。

いま使っているテーマがどちらなのかは、テーマのフォルダを見ればわかります。templates/ ディレクトリと theme.json があればブロックテーマ、header.php や footer.php が並んでいればクラシックテーマです。管理画面からは「外観」に「エディター」があるかどうかが目印になります。

PHP 前提のカスタマイズが持ち込めない

テンプレート内で条件分岐したい、フックを差し込みたい、といった要件は、HTML テンプレートだけでは表現できません。このあたりは functions.php とブロックのフィルターで組み直すか、必要な機能を持つプラグインを併用することになります。既存サイトの乗り換えでは、ここの棚卸しを先にやっておくと見積もりが大きく外れません。

全部を一度に変えなくてもよい

「クラシックテーマか、ブロックテーマか」の二択に見えますが、実際には間の段階があります。

クラシックテーマに theme.json を 1 枚足すだけでも、ブロックエディター側の配色パレットや文字サイズの選択肢を、テーマの側からコントロールできるようになります。テンプレートは PHP のまま、デザインの土台だけ先に揃える、という進め方です。このように一部だけブロックの仕組みを取り入れたテーマは「ハイブリッドテーマ」と呼ばれます(分類上はクラシックテーマのままです)。

既存サイトを抱えている場合は、いきなり全面移行を狙うより、この段階を挟むほうが安全です。そのうえで、次に新しく作るサイトからブロックテーマにする、という順番が現実的だと思います。

ブロックテーマが向いている場合・そうでない場合

判断の材料として、向き不向きを並べておきます。

向いている

  • これから新しく作るコーポレートサイト・ビジネスサイト
  • 引き渡したあと、クライアント自身が更新していくサイト
  • ページ数が多く、デザインの一貫性を保ちたいサイト
  • 長期運用で、テーマの独自機能に依存したくないサイト
  • AI を使った執筆・編集を取り入れていきたいサイト

慎重に検討したほうがよい

  • PHP のテンプレート改修を前提に作り込んだ既存サイト
  • クラシックエディター前提のプラグインを業務の中心で使っているサイト
  • すでに運用が安定していて、変更の必要がないサイト

クラシックテーマが動かなくなるわけではありません。急いで乗り換える理由がなければ、次に新しく作るサイトから試すのが現実的な進め方だと思います。

まとめ

  • ブロックテーマは、サイト全体をブロックで組み立てるテーマ。WordPress 5.9(2022 年 1 月 25 日)から使える
  • 色・文字・余白の定義は theme.json に集まり、書き手は用意された選択肢から選ぶ形になる
  • テンプレートは PHP から HTML へ。ヘッダー・フッターも管理画面で編集できる
  • Classic Editor は公式プラグインとしていまも維持されているが、新しい機能はブロックエディターを前提に作られている
  • カスタム CSS・カスタマイザー・ウィジェット・メニューの設定は引き継がれないので、乗り換え前に棚卸しとバックアップが要る
  • 全面移行が重いなら、クラシックテーマに theme.json を足す段階を挟める

ブロックエディターへの移行は、AI を使った制作を検討している場合の前提条件にもなっています。そちらは WordPress で AI を使うには — 公式の Abilities API・MCP アダプター・AI プラグインの現在地 で整理しました。


shitate は、この記事で説明したブロックテーマのうち、フルサイト編集専用の無料テーマです。文字サイズと余白を 1 つの比率から生成する設計で、選ぶだけで全体が揃うことを目指しています。WordPress 公式ディレクトリから入手できます。

ノートパソコンに表示した shitate 公式サイト

shitate の仕様について / WordPress.org のテーマページ

タイポグラフィスケール

変更はこのページに即時反映され、あなたのブラウザ内にだけ記憶されます。サイト側には何も保存されません。

比率が大きいほど見出し間のコントラストが強くなります(typescale.com と同じ考え方)。

画面幅 375px で使う比率。1260px までにメイン比率へなめらかに変化し、メディアクエリなしでスマホでは文字も余白も引き締まります。

本文の文字サイズ。スケール全体はここから計算されます。

すべての文字段を偶数ピクセル(2px)にスナップします。

Small / X-Small / XX-Small を比率で割らず 0.95rem / 0.8rem / 0.75rem に固定します(比率で割ると小さすぎて読みにくくなる場合の対策)。

この画面幅での実サイズ
Display / H1 –
Huge / H2 –
Extra Large / H3 –
Large / H4 –
Medium / 本文 –
Small / H6 –
X-Small –
XX-Small –