WordPressのブロックテーマ（またはハイブリッドテーマ）で、基本の基本となるスタイル情報を出力する「theme.json」ファイル。
まずは、あんまりよく分からないという方のために冒頭で補足すると．．．。
「theme.json」ファイルに記述されている内容は、以下のページにあるWordPressのデフォルトスタイルと共に生成され、ブロックテーマの設定であるサイトエディターからグローバルスタイルを編集した値へと書き換わった最終的なコードとして「global-styles-inline-css」というIDでHTML上にインラインスタイル（ファイルへのリンクではなく直接出力）されるようになっています。
つまりこの「theme.json」ファイルをうまく編集すれば、サイトエディターで編集することなく、基本的なスタイルの指定が完了するので、他のサイトでの流用などがとても楽になります。
「theme.json」ファイルは、通常、親テーマのファイルそのものを編集するか、子テーマにコピーしたファイルを編集して適用させます、というかこの方法以外に適用させる方法がないので、親テーマの更新時に上書きされないようバックアップ＆復元を行うか、そのためだけに子テーマを使う必要があります。
また、慣れの問題ではあるのでしょうが、このファイルの形式である「json」は、「{}」「[]」や「,」などの扱いがとても厳格で、1つでも間違っているとエラーとなって適用されなくなってしまうことと、PHPやJSのようにコメントを書き記すことができないので、完全理解していないとエラーを起こしている箇所が分からず、イライラすることがあります。
これらを解消する方法として、WordPressでは「wp_theme_json_data_theme」というフックが用意されており、それを使うことでPHPファイルから「theme.json」の上書きが可能になります。
本サイト内の以下のページで配布している「Twenty Twenty-Two」「Twenty Twenty-Three」「Twenty Twenty-Four」用の「theme.json」上書き用プラグインは、各テーマ用の「theme.json」ファイルをPHPで認識できるように全行を書き換え、上記のフックを使用して上書きできるようにしたものです。
ただ、このプラグイン内のコードがどうなっているのかを理解していないと編集は難しいと思いますので、「theme.json」内のコードをPHPとして展開する方法などを補足事項として公開しておきます。
コードを使用する前に、ここをクリックして注意事項をご確認ください
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
派生（フォーク）したテーマや子テーマで機能を適用させる方法
WordPressでは現在、「Twenty Twenty-Two」「Twenty Twenty-Three」「Twenty Twenty-Four」という3つのブロックテーマが歴代デフォルトテーマとして配布されていますので、ここではその中の「Twenty Twenty-Three(以降TT3と略)」の場合を例に説明します。
以下の手順で作成していきます。
ファイルの作成・転送・サイトへの適用
パソコン上で「theme-json.php」というファイルを作成し、以下のコードを挿入して保存します。
function sample_overwrite_theme_json($theme_json , $schema ='' ) {
$new_data = array(
);
return $theme_json->update_with( $new_data );
}
add_filter( 'wp_theme_json_data_theme', 'sample_overwrite_theme_json' );フォークしたTT3テーマのフォルダ内、または子テーマのフォルダ内へ「theme-json.php」を転送します。
TT3の親テーマへ転送した場合、テーマ更新でこの内容は消失しますので、必ずフォークしたテーマか子テーマでおこなってください
フォークしたテーマ、または子テーマのfunctions.phpファイルへ以下のコードを追加します。
include get_theme_file_path( '/theme-json.php' );theme.jsonの内容をコピーしてPHP形式の記述へ変更する
「ツール」→「テーマファイルエディター」で、TT3のtheme.jsonをコピーして、theme-json.phpへ貼り付けます。
以下に従って、テーマファイルエディターですべの行を編集します。
| jsonの記述 | 変更する文字列 |
|---|---|
| 「{」「 [」 | 「array(」 |
| 「}」 | 「)」 |
| 「:」 | 「=>」 |
- たくさんの行がありますので慎重に行ってください。
- 「””」で囲まれた部分に使われている括弧は変更しないようにしてください。
- 編集に誤りがあるとエラーとなり、サイトが動作しないことがありますのでご注意ください。
先にファイルを作ってから転送、適用という手順にした場合、PHPファイルの記述に誤りがあるとサイトが停止してしまいますので、上記の手順で行うことをおすすめします
テーマファイルエディターの「ファイルを更新」をクリックして、何もエラーがでなければ、編集は完了です。
今後「theme-json.php」へ変更したいものを書いていけば、theme.jsonと同じ働きをします。
自分で作成するのが面倒な方向け．．
ここまで手順を紹介してきましたが、コードの加工をするのも面倒だし．．という方向けに、「Twenty Twenty-Three」のtheme.jsonファイルのコード変更・ユーザー定義関数化したものを以下で配布しますので自由に利用してください（その後編集しやすいよう、編集する大枠ごとに別ファイルにしています）。
「HA Theme Json Changer」に入れているコードと同じユーザー定義関数名のまま提供します。一応重複チェックは入れていますが、プラグインと併用するとエラーになることがありますのでご注意ください。
累計ダウンロード数：26回
また、そもそも作成なんてできないという方は、冒頭でも紹介した以下のプラグインを利用してください。
コメントを残す