WordPressのテーマにtheme.jsonを追加したら起きること

WordPress のテーマ（クラシックテーマ）に theme.json を追加したら何が起きるのか？　を調べていたところ、DOM の構造や適用される CSS の変化など、思った以上にたくさんの影響が起きていました。

影響（全 28 項目 ＋ すべてのテーマに影響する 1 項目）と、その影響が起きる条件（トリガーとなるもの）は一覧表にしてこの記事の最後に掲載しました。

これだけあると、影響を受けないテーマを探す方が大変です。

そのため、個々の影響の詳細や対策方法については、実例と合わせて『WordPress ノート クラシックテーマにおける theme.json の影響と対策 2023』にしっかりとまとめましたので、参考にしてください。

何が起きるかを調べようと思ったきっかけ

現在の WordPress ではブロックテーマがスタンダードとなり、theme.json で機能の有効化やレイアウトのコントロールが行われます。さらに、新しい機能にも theme.json を必要とするものが増えてきました。

こうなってくると、従来のテーマ（クラシックテーマ）でも theme.json を使いたくなります。しかし、theme.json を追加するとレイアウトが崩れることも少なくありません。既存コンテンツへの影響も気になります。

もともと、「WordPress 6.x 対応のクラシックテーマはどのように作成するのが最適なのか？」を考えていたのですが、このような実情を前に明確な答えを出せず、モヤモヤとしていました。

ただ、モヤモヤするのは「theme.json を追加すると実際に何が起きるのか」を把握できていないせいなのでは？　と思い至り、きちんと調べてみることにしました。

「グループブロックの div がなくなってレイアウトが崩れる」という話はあちこちで目にしていましたが、それ以外は「なんとなく他にも細かく変わっているような？」ぐらいの認識だったためです。

調べてみたものの…

調べてみて痛感したのは「情報がほとんどない」ということです。WordPress の開発がブロックテーマ中心になったことで、クラシックテーマに関する最新の情報は激減しています。

さらに、デフォルトテーマがブロックテーマになったことで、現状の WordPress にマッチしたクラシックテーマがありません。クラシックテーマベースのデフォルトテーマは Twenty Twenty-One（2021）を最後にリリースされていないのです。

かといって、ブロックテーマ側から見ても、影響を把握するのは困難です。

実際のテーマで確認することに

そこで、実際のクラシックテーマに theme.json を追加して、どのような影響が出るかを確認することにしました。

確認に使用したのは、クラシックテーマのスターターとして長年親しまれてきた、Automattic 社の「_s（underscores）」から CSS を除去したものです。
さらに、CSS を持つクラシックテーマとして、Twenty Twenty-One（2021）以前のデフォルトテーマも使用しました。

その結果見えてきたのは、クラシックテーマに theme.json を追加すると「WordPress の動作モードがブロックテーマに準拠したものに切り替わる」ということです。

WordPressの動作モード

クラシックテーマとブロックテーマでは、テーマの方向性がまったく異なっています。

そのため、クラシックテーマに theme.json を追加した場合、今回の確認をするまでは「クラシックテーマの動作モードにブロックテーマの機能が取り込まれる」とイメージしていました。

しかし、リストアップした影響全体を見ると、「ブロックテーマの動作モードに切り替わっている」ということがわかります。

ブロックテーマと同じレイアウト機能などが動作するようになるのですから、当然と言えば当然なのですが…。このイメージの違いは大きいです。

「ブロックテーマの動作モードに切り替わる」と捉えれば、theme.json ありきでクラシックテーマを作ることは「現在の WordPress のスタンダードに準拠した形でテーマを作ること」になります。

さらに、この動作モードで作成・管理したコンテンツは、将来、ブロックテーマへスムーズに移行していくことにもつながっていくでしょう。

影響一覧

theme.json の有無や設定に応じてクラシックテーマに起きる影響（全 28 項目 ＋ すべてのテーマに影響する 1 項目）と、その影響が起きる条件（トリガーとなるもの）をリストアップしたものです。

条件は表示に影響が出るものをピックアップし、次のように用意しています。

条件
theme.json なし	theme.json がない場合
theme.json あり	空の theme.json を用意した場合
横幅	空のtheme.json に横幅の指定（contentSize と wideSize）を追加した場合
間隔	空のtheme.json に間隔を有効化する指定（blockGap）を追加した場合
左右	空のtheme.json に左右の余白の指定（padding）を追加した場合
全幅	空のtheme.json に左右の余白を全幅対応にする指定（useRootPaddingAwareAlignments）を追加した場合

「theme.jsonなし」という条件を用意したのは、現在の WordPress では、テーマの theme.json の有無と関係なくグローバルスタイルが出力され、すべてのテーマの表示に影響するようになっているためです。この影響は「00」として一番最初に取り上げています。

このように、theme.json の設定に応じてさまざまな影響が起きますが、個別の影響はシンプルです。theme.json を追加するときはもちろん、テーマの新規作成時にどの機能を選択するかなど、theme.json への足がかりとして活用していただければと思います。