theme.json 構造

theme.json ファイルは、次のコードスニペットに示すように、いくつかのトップレベルのセクションに分解できます： 

  1. {
  2.     "$schema": "https://schemas.wp.org/trunk/theme.json",
  3.     "version": 2,
  4.     "settings": {},
  5.     "styles": {},
  6.     "customTemplates": {},
  7.     "templateParts": {},
  8.     "patterns": []
  9. }

この章では、これらのプロパティのそれぞれについて学び、想像の中のデザインを実際のテーマに変える方法を学びます。

テーマ内で theme.json ファイルを直接カスタマイズするには、JSON コードに対するある程度の理解が必要です。専門家である必要はありません（コピー＆ペーストでかなりのところまで行けます）、しかし、JSON のフォーマット方法についての基本的な知識があれば、確実に役立ちます。

また、CSS の基本的な理解も必要です。theme.json で CSS コードを直接書く必要はありませんが、多くの機能は CSS プロパティと値にマッピングされています。theme.json 設定とスタイル、およびそれらの CSS 対応物との関係を理解することは、長期的に見て役立ちます。

JSON と CSS に関する詳細情報は、次をお読みください：

theme.json プロパティ

前のセクションで見たように、theme.json ファイルにはいくつかのトップレベルプロパティがあります。これらの中には単一の値だけを受け入れるものもありますが、ほとんどは独自の値を持つネストされたサブプロパティを持っています。

theme.json で設定できる現在のトップレベルプロパティは次のとおりです：

  • version: あなたが構築している theme.json スキーマのバージョン。
  • $schema: サポートされているJSONスキーマを定義するために使用され、リアルタイムのヒントやエラーレポートを提供するために多くのコードエディタと統合されます。
  • settings: どのブロックコントロールが表示されるかを定義し、プリセットを構成するために使用されます。
  • styles: ウェブサイトやブロックに色、フォントサイズ、カスタム CSS、その他のスタイルを適用するために使用されます。
  • customTemplates: テーマの/templatesフォルダで定義されたカスタムテンプレートのメタデータ。
  • templateParts: テーマの/partsフォルダで定義されたテンプレートパーツのメタデータ。
  • patterns: パターンダイレクトリから登録されるパターンスラグの配列です。

バージョンの追加

少なくとも、version プロパティを theme.json ファイルに設定する必要があります。これは、あなたの theme.json コードを読み取り理解するために使用される API バージョンと一致する整数である必要があります。

API は現在 2 バージョンです。最新のバージョンは、theme.json Living Reference ドキュメントで常に確認できます。

あなたの theme.json ファイルに必要な最小限のコードは次のとおりです： 

  1. {
  2.     "version": 2
  3. }

このハンドブックのすべての theme.json コード例には、version プロパティが含まれています。これは常に設定されるべきです。

技術的には、バージョンを省略することもできますが、WordPress はあなたのコードを API の 1 バージョンであるかのように読み取ります。古いバージョンを使用すると、少なくともこのハンドブックに記載されているように、あなたのコードが無効になる可能性があります。

常に最新の API バージョンを維持し、theme.json ファイルに設定されていることを確認するよう努めるべきです。

JSON スキーマの追加

theme.json に追加できるオプションのプロパティは、JSON スキーマへの URL です。これは、現代のコードエディタで作業する際に特に役立ちます。$schema プロパティを追加すると、多くのコードエディタでリアルタイムのヒントやエラーレポートが得られ、強く推奨されます。

JSON スキーマのサポートを追加するには、theme.json ファイルにこれを追加します： 

  1. {
  2.     "$schema": "https://schemas.wp.org/trunk/theme.json",
  3.     "version": 2
  4. }

再度言いますが、これは技術的にはオプションのプロパティです。しかし、これを省略する良い理由はほとんどありません。含めることは良い開発の慣行です。

設定、スタイルなどの追加

theme.json を通じて利用可能な他のプロパティは、この紹介でカバーできるよりも詳細なドキュメントが必要です。それぞれは、このハンドブックのこの章に独自のページ（およびいくつかは複数のサブページ）を持っています。

さて、theme.json についてもっと学ぶ時が来ました。次のドキュメントステップはお好みで進めていただけますが、推奨される読み順にリストされています：

  • 設定: theme.json を通じて構成できる標準およびカスタム設定の各ドキュメント。
  • スタイル: 標準デザインシステムを使用して、theme.jsonを通じてスタイルを適用する方法を学びます。これにより、ユーザーインターフェースとも統合されます。
  • カスタムテンプレート: あなたのテーマのためにカスタム投稿、ページ、およびCPT（カスタム投稿タイプ）テンプレートを登録する方法。
  • テンプレートパーツ: あなたのテーマ全体で再利用できるカスタムテンプレートパーツを登録する方法。
  • パターン: あなたのテーマに公式パターンリポジトリからパターンをバンドルする方法。
  • スタイルのバリエーション: ユーザーに選択肢を提供するカスタムtheme.jsonスタイルのバリエーションを作成するためのドキュメント。