最近WordPressをインストールした際には、「Twenty Twenty-Two(TT2)」「Twenty Twenty-Three(TT3)」といったブロックテーマが初期状態で有効化されていて、WordPressではブロックテーマが今後のスタンダードになっていく予感がしますね。
以前のようにレイアウトやスタイルが予めある程度決められている「クラシックテーマ」と比べ、ブロックエディターを扱うのと同じような作業でレイアウトやスタイル指定ができるため、非常に自由度の高いテーマではあるものの、自由だからこその難しさも同時に感じるのかも知れません。
特に初めて触った時には、「theme.json」だの「グローバルスタイル」だのといったクラシックテーマ時代には見慣れない用語が出てきますし、それらがいったいどうなってるのかというのも理解に苦しむところではないでしょうか？
そこで、通常は親テーマ、または子テーマにコピーした「theme.json」の内容をPHPで編集できるようにしようと作成したのが、今回リリースした「HA Theme Json Changer」です。
「HA Theme Json Changer」は以下のページからダウンロードできます。
多分私同様ある程度仕組みを理解している方ならこのツールの利便性を感じることができるかと思いますが、それ以前に、theme.json？グローバルスタイル？という方もまだまだ多いと思いますので、ここでは、ブロックテーマの概要と仕組みについて以下に補足をしておきます。
ブロックテーマにおけるスタイル適用の仕組み
ブロックテーマのスタイルに関して出てくる機能や用語として、「theme.json」「グローバルスタイル」「各ブロックのスタイル」「スタイルシート（style.css）」などがあります。
クラシックテーマを使用して、何らかのデザイン的なカスタマイズをしたことのある方なら「スタイルシート」という言葉はご存じでしょうし、子テーマのスタイルシートにスタイルコードを追加したり、テーマカスタマイザーの追加CSSへスタイルコードを追加して外観を変えるということをしていたと思います。
そして、投稿の編集時などにブロックを挿入してコンテンツを追加するブロックエディター、挿入したブロックに右パネルからいろいろなスタイルの指定ができる「各ブロックのスタイル」というのも恐らくご存じでしょう。
そこへブロックテーマでは、クラシックテーマでいうスタイルシートの部分をjsonという形式のコードで追加する「theme.json」と、ブロックエディターのように選択式でスタイルを指定できる「グローバルスタイル」というのが追加され、コードを記述しなくても自由にスタイルが指定できるようになっています。
ブロックテーマにおいては、以下のような優先順で、基本的にスタイルが適用され、ページが表示されるようになっています。
※コードや読み込み順など特別な措置がされていない場合の優先度を高い順に示しています
- ブロック上で指定された各ブロックのスタイル
- スタイルシート上に記述されたスタイル
- サイトエディター上で指定されたグローバルスタイル
- 「theme.json」に記述されたスタイル
- WordPressデフォルトのスタイル
つまり、「theme,json」というのは、基礎の基礎、テーマをインストールした時に最低限設定されているスタイルということになります。
文字で表せば、WordPressとして基本となるスタイルが適用された上に「theme,json」のスタイルが上書きされ、さらにサイトエディターからスタイルを指定したものが上書きされ、さらにさらにスタイルシートのスタイルが上書きされ、最終的にブロックに指定されたスタイルが上書きされ．．という過程を経て、ページの見た目が決定されているのです。
もちろん赤字で記載したように、特別な措置を行った場合にはこの限りではないものの、基本としてはこのような形で優先適用されていきますので、ブロックテーマにおけるスタイルについては、まずこれを覚えておく必要があります。
「theme.json」の概要や規則
「theme.json」ファイルは、有効化しているテーマにこの名前と拡張子のファイルを設置することで機能します。
つまり、子テーマを有効化して、親テーマの「theme.json」をコピーして編集すれば、子テーマに指定のあるものはそれが適用され、ないものは親テーマの指定が適用されるという仕組みになっています。
この点は、テーマカスタマイズしたことのある方なら経験があるであろうスタイルコードやテンプレートの上書きと同じなので、理解いただけると思います。
「theme.json」は拡張子が「json」なので、スタイルを指定するファイルに使われる「css」や、WordPressを動かすための基本的なプログラムである「php」といった拡張子のファイルと同様に、記述に規則があります。
多分、初めて「theme.json」の中身を見た時には、私と同様「何これ？」という感想を持つでしょう（笑）。
「json」形式のファイルでは、「{」や「[」「,」といった記号の扱いが厳格なので、下手に触ってエラーとなるケースも多いので、興味本位に触って「えーーっ何で？」と感じる方も多いでしょうね（笑）。
WordPressの「theme.json」は、大きく分けて以下の4つの事柄について指定をしていくようになっています。
- customTemplates
- settings
- styles
- templateParts
この段階で既に大文字小文字が混在してたりして．．アレルギーが出そうです（笑）
「customTemplates」はサイトエディター上でそのテーマ標準で指定できるテンプレートの名前と投稿タイプの指定を、「templateParts」はサイトエディター上でそのテーマ標準で指定できるテンプレートの名前などを指定する項目になっています（あまり活用することはないと思うので、ここでは割愛します）。
「settings」では、基礎的な情報と、「styles」で文字の大きさなどを指定する際に簡単に統一的な記述ができるようにするための情報が書かれています。
これらを指定しておくことで、サイトエディター上で何もしなくても、見た目を統一させることができる、それが「theme.json」ファイルなのです。
ここまでを読んで、「theme.json」というファイルが何をしているのかというのは理解いただけたものとして（と信じて）、話を元に戻します。
まず、「theme.json」は有効化しているテーマ（親テーマ）のフォルダ内、または有効化している親テーマの子テーマフォルダ内に設置して初めて機能します。
クラシックテーマと同様に、テーマの更新時には、親テーマの内容は上書きされます。これは「theme.json」も同様です。したがって、「theme.json」で基礎的なスタイル情報を編集したい場合には、子テーマの利用が必須となります。これをプラグインからできないかという発想で作成したのが「HA Theme Json Changer」です。
次に、別に「theme.json」で編集しなくても、サイトエディターのグローバルスタイルで設定すれば優先されるんでしょ！と思った方、正解です（笑）。
ただ、グローバルスタイルで指定した内容は、WordPressの投稿や固定ページなどと同様に、データベース内へデータとして保存される仕組みになっています。
もしも、この設定を他のサイトでも使いたいとなった時、どのようにすればいいでしょうか？
一応やり方としては、
- サイトエディターの「エクスポート」を使ってテーマを保存する
- 移行先のサイトへ1を解凍したテーマフォルダをアップロードして有効化する
ことで、コピーすることができますが、今までグローバルスタイルの値としてデータベースに保存されていたものがテンプレートファイルに反映され、それがデフォルトになるという構造から、まったく同じものにはならない、つまりは別テーマになってしまうのです。この動きは実際に上記の方法で複製すればわかると思います。
それでも良ければ「HA Theme Json Changer」の出る幕はありません。
逆に、「HA Theme Json Changer」は、テーマから何かをするわけでもありませんし、データベースに何かを書き込むこともしないので、同じテーマを有効化している他サイトのプラグインフォルダを移行すれば完全にスタイルをコピーすることができるので、テーマの更新は適用させて維持させたい、グローバルスタイルなどは「theme.json」で適用させた上でそのサイトならではのスタイルとして設定するものという考えであれば、「HA Theme Json Changer」は非常に有効なプラグインでしょう。
また、何よりも今まで使用していた経験のあるPHPファイル上で編集できるので、コード内にコメントを入れたり、コードを下にコピーして、デフォルトのコードをコメントアウトしておくなんてこともできますから、json形式のファイルを編集するよりも分かりやすくなって便利です。
ただし、当然デメリットもあります。それは、あくまでも「theme.json」の内容に作用するものなので、既にグローバルスタイルでガリガリにカスタマイズしてしまっているサイトでこのプラグインを使うには、調整を行う必要があること、このプラグインは一度読み込まれた「theme.json」に対してPHPから上書きするという動作をするため、ページの表示速度に影響を与える可能性があるということです。
現在、このサイトでは子テーマの使用＋「theme.json」の編集＋グローバルスタイルの設定で運営していましたが、
を使って、子テーマに書いているカスタマイズコードを移行させ、今回リリースした「HA Theme Json Changer」を有効化して、「theme.json」の設定を移行させ、できるだけスタイルコードに書いていたものやグローバルスタイルで設定していたものを「HA Theme Json Changer」から上書きするようにして、子テーマからの完全離脱を行っているところです。
もしもこのサイトの表示速度が遅いと感じるのであれば、「HA Alt Childtheme」や「HA Theme Json Changer」はおすすめしませんが、そうでなければ、子テーマやグローバルスタイルでいろいろとしてしまう前に導入すると、有効に使えるかも知れません。
