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

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

そもそもtheme.jsonとは

テーマを構成するファイルのひとつです。テーマフォルダ直下に置かれ、WordPress5.8以降のクラシックテーマ及びブロックテーマで利用できます。主にブロックエディターに関する設定を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()でエディターにもスタイルが反映されるようにしてフロントとの差異が生じないようにします。

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

.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  // エディター表示調整用

エディターとフロントの表示について

theme.jsonを取り入れたからと言ってエディターとフロントの表示が完全に一致するわけではなく、いくつかの要因を合わせて利用する必要もあります。今回は次のようなものも設定しました。

• add_editor_style()でエディターにフロントと同じスタイルを適用する。
• 一部のブロックのスタイルをフロントに反映するadd_theme_support( 'wp-block-styles' )を使用。
• フロントに反映されない一部のスタイルを補う必要がある。

いずれブロックテーマに役立てたい

一通り作業してみて今後の方向性が少し見えたような気がしました。
ブロックテーマを作るには他にもまだ必要な要素がありますが、順を追って取り入れていきたいと思います。