クラシックテーマにtheme.jsonを取り入れてみる【WordPress】

WordPress5.9がリリースされました。このバージョンアップではこれまでのテーマとは異なるブロックテーマが実装され、FSE（フルサイトエディター）によるサイト全体の編集が可能になっているようです。しかしこれまでのテーマ（クラシックテーマ）が無くなるわけではなく、私の環境ではクラシックテーマに携わるほうがまだまだ多い状況です。

とはいえエディター周りの設定が便利そうな theme.json は取り入れたいので、数年前に制作したテーマに組み込みつつ今後に向けたテーマファイル構成を考てみたいと思います。

使用したバージョン WordPress5.9

クラシックテーマにtheme.jsonを取り入れる
- そもそもtheme.jsonとは
- 今回の目的・やりたいこと
古いテーマの確認
- 修正前の状態を確認
修正のポイント
theme.jsonを設置してみて

クラシックテーマにtheme.jsonを取り入れる

そもそもtheme.jsonとは

テーマを構成するファイルのひとつです。テーマフォルダ直下に置かれ、WordPress5.8以降のクラシックテーマ及びブロックテーマで利用できます。主にブロックエディターに関する設定をjson形式で記述します。主な役割として次のようなものがあります。

ブロックエディターの機能管理ができる。
テーマの基本的なスタイルを設定する。
theme.jsonによって変更された外観はエディターとフロントエンド（公開ページ）の両方に自動的に適用される。

参考リンク
WordPress.org – グローバル設定とスタイル (theme.json)

今回の目的・やりたいこと

古いテーマにもtheme.jsonを設置してエディターとフロントエンドの表示を一元管理したい。
theme.jsonファイルを設置する際に注意すべきことを知る。
一連の作業を通してブロックテーマを視野に入れたファイル構成を考える

古いテーマの確認

修正前の状態を確認

このような構成のテーマへtheme.jsonを設置したいと思います。
エディターとフロントで読み込むCSSに違いが多いためそれぞれの表示で差異が生じてしまい、それをeditor-style.cssで無理矢理調整しています。今見ると我ながら無駄が多いです……

この問題をtheme.jsonを採用することで改善したいと思っています。

修正前のファイル構成

sample-theme/
├ index.php
├ functions.php
├ style.css           // エディターが関与しない部分のスタイル
└ css/
  ├ reset.css         // 一般的なreset.css
  ├ blocks.css        // エディターが書き出す要素のスタイル
  └ editor-style.css  // エディター表示調整用

修正のポイント

theme.jsonの設置

まずはtheme.jsonを設置します。このファイルにはテーマのデフォルトスタイルを記述していきます。

style.cssでtheme.jsonの補助

theme.jsonで対応できないデフォルトスタイルを追加します。add_editor_style()でエディターにもスタイルが反映されるようにしてフロントとの差異が生じないようにします。

フロントに反映されない一部のブロックエディターの設定もここで補います。

~~ボタンや~~プルクオートの “左寄せ” や “右寄せ” 等、一部のフロントに反映されないスタイルは自前で補う必要があります。

現行のエディター（WP5.9）ではボタンの左右配置は反映され、プルクオートは未だ反映されないようです。

.wp-block-button.alignleft, .wp-block-pullquote.alignleft {
  float: left;
}

.wp-block-button.alignright, .wp-block-pullquote.alignright {
  float: right;
}

blocks.cssは内容を移動して削除

エディターが書き出す要素のスタイルのみをまとめていましたが、可能なものはtheme.jsonで設定し、theme.jsonで設定できない要素・スタイルはstyle.cssにまとめます。

reset.cssを削除

エディターが書き出すブロックに影響を与えないようにするため削除します。エディターが関与しないコンテンツで影響が出る箇所は最後に修正します。（ここが一番大変でした）

theme.jsonを設置してみて

CSSファイルを整理できた

CSSファイルの内容を見直し・整理することができ、ファイル構成がシンプルになりました。テーマのデフォルトスタイルを変更する場合も編集するファイルが分かりやすくなっています。

修正後のファイル構成

sample-theme/
├ index.php
├ functions.php
├ style.css           // エディターが関与しない部分のスタイル・theme.jsonの補助
├ theme.json          // テーマのデフォルトスタイル・ブロック設定
└ css/
  └ editor-style.css  // エディター表示調整用