WordPressのtheme.jsonファイルとは何ですか、そしてその使用方法
ブロックテーマを使用していて、WordPress で theme.json ファイルが表示されていますか?おそらく、このファイルの目的は何なのか、編集する必要があるのか疑問に思っているかもしれません。
theme.json ファイルは、WordPress での完全なサイト編集エクスペリエンスの重要な部分です。ブロック テーマがさらに普及するにつれて、theme.json の機能とそれを適切に編集する方法を理解することが重要になります。
そのため、WPBeginner はこの包括的なガイドを作成しました。この記事では、theme.json ファイルとは何か、そしてそれを使用して WordPress サイトをカスタマイズする方法について説明します。
WordPressのtheme.jsonファイルとは何ですか?
theme.json ファイルは、WordPress 5.8 で導入された特別なテーマ ファイルです。これは、完全なサイト編集 (FSE) エクスペリエンスにおいて重要な役割を果たし、WordPress ブロック テーマのあらゆる側面を視覚的にカスタマイズできるようになります。
基本的に、theme.json ファイルは、ブロック テーマのスタイルと機能を制御する青写真として機能します。これには、色、タイポグラフィ、レイアウト、テンプレートなどのさまざまな要素がどのように表示され、動作するかを WordPress に指示するコードが含まれています。
WordPress ブロックテーマに theme.json ファイルが必要なのはなぜですか?
WordPress でのブロックテーマの編集は、クラシックテーマの編集とは異なります。
クラシック テーマは、functions.php ファイルを使用して、add_theme_support() 関数でカスタム メニューや注目の画像などの機能を有効にします。次に、CSS スタイルシート (style.css) ファイルの CSS ルールを使用して、これらの機能のスタイルを設定できます。
ブロック テーマでは、theme.json がブロック テーマの外観を定義するすべての中心ハブとして機能します。これにより、フォント、色、レイアウト オプションなどを 1 か所で定義できるようになり、functions.php で add_theme_support() を使用する必要がなくなります。
そのため、ブロック テーマの function.php ファイルは、クラシック テーマの同等のファイルよりも小さいことがよくあります。
専用のtheme.jsonファイルを使用すると、以前のクラシックなテーマシステムに比べていくつかの大きな利点が得られます。
まず、theme.json は WordPress フルサイトエディターと連携して動作します。これにより、コードに触れることなく、テーマのスタイルと設定をエディター内で直接簡単にカスタマイズできます。
さらに、theme.json は、開発者とユーザーの両方に一貫したエクスペリエンスを作成することを目指しています。テーマを変更する必要がある場合、まったく新しいレイアウトやスタイルのオプションを学習する必要があるため、非常にイライラするユーザーもいます。
theme.json を使用すると、すべてが同様の方法で整理されるため、テーマの切り替えがよりスムーズになります。
最後に、テーマの開発者とユーザーは、theme.json を使用することで、WordPress が完全なサイト編集機能を拡張し続ける中で、将来も作業を保証できるようになります。
theme.json ファイルとは何かを説明したので、このトピックをさらに深く掘り下げてみましょう。以下のクイック リンクを使用して、このガイド内を移動できます。
WordPressのtheme.jsonファイルはどこにありますか?
theme.json ファイルは、Web サーバーのテーマ ディレクトリ内にあります。一般的なファイル パスは、public_html » wp-content »themes » your-theme-name »theme.json です。
これにアクセスするには、まず FTP またはホスティング アカウントのファイル マネージャー経由でサイトに接続する必要があります。
Bluehost を使用している場合は、ログインして [Web サイト] タブに切り替えることができます。次に、Web サイトの下にある [設定] ボタンをクリックします。
ここで、必ず「概要」タブを表示したままにしてください。
次に、下にスクロールして「ファイルマネージャー」ボタンをクリックします。
この方法でファイル マネージャーを開くと、自動的に Web サイトのルート フォルダー内に移動します。
ここで、「wp-content」ディレクトリを探して開きます。そこには、インストールされているすべての WordPress テーマが含まれる「テーマ」フォルダーがあります。
使用している特定のブロック テーマのフォルダーを開きます。 theme.json ファイルは、他のテーマ ファイルとともにこのテーマ ディレクトリ内に直接配置されます。
見つかったら、コード エディターを使用して、theme.json ファイルを表示できます。
theme.json ファイルはどのようなものですか?
theme.json ファイルには、WordPress ブロック テーマのすべてのグローバル設定を整理する特定の構造があります。
テーマがどれだけ複雑か単純かに応じて、ファイルは非常に短くなる場合もあれば、長くなる場合もあります。ただし、このファイルは 7 つの最上位セクションに簡単に分割できます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {},
"patterns": []
}
簡単な内訳は次のとおりです。
スキーマ
この部分は実際にはブロックテーマに含めるのはオプションなので、あなたのテーマに表示される場合と表示されない場合があります。
スキーマ プロパティは、URL を WordPress JSON スキーマにリンクします。このスキーマは、テーマのグローバル設定、スタイル、その他の構成を定義します。
バージョン
このセクションでは、ファイルで使用されている theme.json 形式の API バージョンを指定し、ファイルが正しい構造に従っていることを確認します。
この記事の執筆時点では、API はバージョン 2 です。
設定
このプロパティは、ユーザーがテーマをカスタマイズするために使用できるオプションとコントロールを定義します。これらには、テーマのカラーパレット、タイポグラフィ、間隔、グラデーション、影、境界線などのプリセットが含まれます。
以下は、設定プロパティがどのようなものかを示す非常に簡単な例です。
{
"settings": {
"color": {
"palette": [
{
"slug": "base",
"color": "#ffffff",
"name": "White"
},
{
"slug": "contrast",
"color": "#222222",
"name": "Dark"
},
{
"slug": "accent",
"color": "#f08080",
"name": "Pink"
},
{
"slug": "accent-2",
"color": "#90ee90",
"name": "Light Green"
},
{
"slug": "accent-3",
"color": "#e0ffff",
"name": "Light Blue"
}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "Open Sans, sans-serif",
"slug": "open-sans",
"name": "Open Sans"
},
{
"fontFamily": "Arial, sans-serif",
"slug": "arial",
"name": "Arial"
},
{
"fontFamily": "Times New Roman, serif",
"slug": "times-new-roman",
"name": "Times New Roman"
}
],
"fontSizes": [
{
"name": "Extra Small",
"slug": "xx-small",
"size": "0.75rem"
},
{
"name": "Small",
"slug": "small",
"size": "0.875rem"
},
{
"name": "Medium",
"slug": "medium",
"size": "1rem"
},
{
"name": "Large",
"slug": "large",
"size": "1.125rem"
},
{
"name": "Extra Large",
"slug": "x-large",
"size": "1.25rem"
},
{
"name": "XX-Large",
"slug": "xx-large",
"size": "1.5rem"
}
],
"spacing": {
"units": ["rem"],
"values": {
"small": "1rem",
"medium": "1.5rem",
"large": "2rem"
}
}
}
}
}
コードを見ると、使用されている言語は非常に理解しやすいです。この設定では、テーマで使用される色、フォント ファミリ、フォント サイズ、間隔が定義されていることがわかります。
ここまたはテーマに理解できない参照がある場合は、公式の WordPress 設定リファレンスを確認してください。
色やフォント ファミリなどの一部の要素には、次のようなスラッグがあります。
{
"settings": {
"color": {
"palette": [
{
"slug": "base",
"color": "#ffffff",
"name": "White"
},
これらは、後のスタイル セクションでプリセットを作成するのに役立ちます。これについては次のパートで説明します。
スタイル
設定セクションではテーマのデフォルトのカスタマイズ オプションを定義しますが、スタイル セクションではそれらをテーマに適用します。
ここでは、カスタマイズ設定を Web サイト全体に適用することも、プリセットを使用してブロック レベルで適用することもできます。
以下の例を確認してみましょう。
{
"settings": {
// Existing settings from the previous example
},
"styles": {
"color": {
"background": "var(--wp--preset--color--base)",
"text": "var(--wp--preset--color--contrast)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
},
"h1": {
"fontSize": "var(--wp--preset--font-size--xx-large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
},
"h2": {
"fontSize": "var(--wp--preset--font-size--x-large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
},
"h3": {
"fontSize": "var(--wp--preset--font-size--large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
}
}
}
}
ご覧のとおり、このスニペット全体に次のコード行が表示されます: var(--wp--preset--xxx) 。これらはプリセットであり、設定セクションで定義された値を参照するスタイル セクションのショートカットです。
たとえば、設定セクションの {"slug": "base", "color": "#ffffff", "name": "White"} について考えてみましょう。ここで、 "base" はスラッグで、この色の対応するプリセットは var(--wp--preset--color--base) です。
したがって、スタイルのコード "color": {"background": "var(--wp--preset--color--base)" は、このテーマの背景色が白であることを示します。
カスタム テンプレート
ブロック テーマの開発者は、ユーザーが使用できるカスタム ページ、投稿、または投稿タイプの事前定義済みレイアウトを作成できます。
たとえば、Twenty Twenty-Four テーマには、theme.json ファイルで定義されたいくつかのカスタム テンプレートがあります。タイトルなしのページ、サイドバー付きのページ、ワイド画像付きのページ、およびサイドバー付きの単一です。
これらのいずれかを使用してコンテンツを作成できます。
],
"customTemplates": [
{
"name": "page-no-title",
"postTypes": ["page"],
"title": "Page No Title"
},
{
"name": "page-with-sidebar",
"postTypes": ["page"],
"title": "Page With Sidebar"
},
{
"name": "page-wide",
"postTypes": ["page"],
"title": "Page with wide Image"
},
{
"name": "single-with-sidebar",
"postTypes": ["post"],
"title": "Single with Sidebar"
}
]
注意すべき点の 1 つは、theme.json ファイルはテンプレートを名前でのみ参照し、タイトルや対象となる投稿タイプなどのテンプレートに関するメタデータを提供することです。
ただし、カスタム テンプレートの実際の外観と機能は、テーマ フォルダー内の別のテンプレート ファイルで定義されます。
それらを確認するには、public_html » wp-content » テーマ » テーマ名 » テンプレート に移動します。
テンプレート パーツ
テンプレート パーツは、カスタム テンプレート全体に適用できる再利用可能な領域です。これらは、ヘッダー、フッター、サイドバーなどの要素です。
theme.json に登録されているテンプレート パーツは次のようになります。
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "sidebar", // Removed "uncategorized"
"name": "sidebar",
"title": "Sidebar"
},
{
"area": "post-meta", // Removed "uncategorized"
"name": "post-meta",
"title": "Post Meta"
}
]
カスタム テンプレートと同様、theme.json ファイルはテンプレートのみを参照します。
実際の外観は、パーツ フォルダー内の独自のテンプレート パーツ ファイルで定義されます。
パターン
パターンは、ページ、投稿、またはテーマ内の他の場所にカスタム コンテンツ レイアウトを作成できるようにする、事前に作成されたブロックのコレクションです。
フルサイトエディターを開くと、「パターン」メニューに気づくかもしれません。ここでは、Gutenberg ブロック テーマで利用可能なすべてのパターンを見つけることができます。
theme.json を使用すると、テーマ開発者はパブリックの Pattern ディレクトリからパターンを参照できます。これは、これらの再利用可能なブロックを自分で設計せずに、より多くのカスタマイズ オプションを提供する優れた方法です。
たとえば、Twenty Twenty-Four テーマは、公式ディレクトリの 2 つのパターン (サービスとクライアントのセクションの 3 つの列) を参照しています。
"patterns": [
"three-columns-of-services",
"clients-section"
]
これは、これらのパターンがフル サイト エディターの [パターン] メニューにあるためです。
ただし、テーマ ディレクトリ内のパターンフォルダーにはありません。
注: テーマ ディレクトリ内のテンプレート、パーツ、パターン フォルダーには、theme.json で指定されていないファイルが含まれていることに気づくかもしれませんが、これらは完全なサイト エディターでは引き続き表示されます。
興味があるかもしれませんが、これは、WordPress が命名規則とテーマのディレクトリ内の場所に基づいてこれらのフォルダーを自動的に認識して使用するように設計されているためです。
theme.json ファイルを編集する前に行うべきこと
theme.json はコアテーマファイルであるため、ライブ WordPress Web サイトで直接編集することにはある程度のリスクが伴います。うっかりミスをすると、テーマやウェブサイトが壊れる可能性があります。
より安全な方法は、子テーマを使用することです。
子テーマは親テーマ (使用しているブロック テーマ) のすべてのスタイルと機能を継承しますが、親テーマ自体を変更せずにカスタマイズすることができます。こうすることで、親テーマが更新を受け取った場合でも、カスタマイズが上書きされなくなります。
詳細については、WordPress で子テーマを作成する方法に関するガイドをご覧ください。この記事では、Create Block Theme プラグインを使用した簡単な方法を示します。このプラグインは、子テーマのみに新しい theme.json ファイルを自動的に生成します。
スムーズな編集エクスペリエンスを確保し、Web サイトのダウンタイムを回避するために、WordPress Web サイトの新しいバックアップを作成することもお勧めします。こうすることで、何か問題が発生した場合でも、サイトを以前の状態に簡単に復元できます。
迅速かつ信頼性の高いバックアップ ソリューションとして、Duplicator などのプラグインを使用することをお勧めします。
ローカルの WordPress 開発環境またはステージング サイトで作業することもお勧めします。これにより、訪問者に影響を与えることなく変更を安全にテストできるライブ Web サイトのレプリカが作成されます。
留意すべきヒントがさらにいくつかあります。
より複雑な変更を加える前に、theme.json ファイルの小さな編集から始めて徹底的にテストしてください。
theme.json ファイル内の特定のプロパティや設定について不明な点がある場合は、WordPress の公式ドキュメントを参照してください。
問題が発生した場合は、テーマ開発者のサポート チームまたは WordPress.org サポート フォーラムに遠慮なく助けを求めてください。詳細については、WordPress サポートを依頼する方法に関するガイドをご覧ください。
WordPressのtheme.jsonファイルを編集する方法
私たちの調査とテストに基づいて、WordPress の theme.json ファイルを編集するには、フルサイト エディターを使用する方法とコードを使用する 2 つの方法があることがわかりました。最初のオプションははるかに簡単かつ安全で、Web サイトのフロントエンドから変更を確認できます。
一方、高度な WordPress 開発に慣れている場合は、2 番目の選択肢をお勧めします。
コードなしでtheme.jsonを編集する（初心者向け）
コードに直接触れずにtheme.jsonファイルを編集するには、Create Block Themeプラグインを使用できます。このプラグインは、ユーザーがブロック テーマのスタイル バリエーションを作成、編集、保存できるようにするために、公式 WordPress.org チームによって公開されました。
まず、管理エリアに WordPress プラグインをインストールしてください。次に、外観 » エディタに移動して、フルサイト エディタを開きます。
テーマを編集するためのいくつかのメニューが表示されます。
ここでは「スタイル」を選択します。
次に、鉛筆の「スタイルの編集」アイコンをクリックします。
これにより、ブロック エディターが表示され、Web サイトのグローバル スタイルを編集できます。
これで、通常と同じようにテーマのスタイルを変更できます。詳細については、WordPress フルサイト編集ガイドのテーマのグローバル スタイルを編集する方法に関するセクションをご覧ください。
例としてカスタム カラー パレットを作成してみましょう。
カラースキームまたはパレットは、テキスト、背景、ボタンなどの要素のデフォルト色のセットです。ウェブサイト全体の統一感のある外観が保証されます。
同じ色のプリセットを使用する要素は常に一致するため、Web サイトのデザインは洗練されたプロフェッショナルに見えます。
パレットを編集するには、スタイル設定サイドバーで「カラー」を選択します。
次の画面では、テーマの色をカスタマイズするための設定がいくつか表示されます。
ここで、「パレット」セクションの色をクリックします。
この例では、Twenty Twenty-Four テーマはパレット内ですでに 5 つの色を定義していますが、それらのいずれかを変更してカスタムの色を最初から作成することができます。
これを行うには、[テーマ] の下にある色のいずれかをクリックします。次に、カラー ピッカー ツールで任意の色を選択します。
Web サイトをプレビューすると、以前の色を使用していた特定のブロックまたは要素が、パレットで選択した色に置き換えられていることがわかります。
色ごとに同じ手順を繰り返すことができます。次に、「保存」をクリックします。
変更を保存した後、[ブロック テーマの作成] ボタン (レンチ アイコン) をクリックします。
次に、「テーマへの変更を保存」を選択します。
次の画面では、下にスクロールする必要があります。
その後、[変更を保存] をクリックします。これにより、テーマに加えたすべての変更が WordPress に theme.json ファイルに保存されます。
これを実行すると、ブロック エディターが自動的に更新されます。
次に、[ブロック テーマの作成] ボタンをもう一度クリックし、[テーマ.json の表示] を選択します。
カスタム カラー パレットのコードを確認するには、次のように color と settings 内にネストされている palette を探します。
"settings": {
// Some code...
"color": {
// Some code...
"palette":
}
}
その下に、カスタム カラー パレットの新しい 16 進コードが表示されるはずです。
コードを使用して theme.json を編集する (上級ユーザー)
この方法は、WordPress テーマ開発者を目指している場合、またはコードの経験がある場合にお勧めします。
まず、WordPress ディレクトリにあるブロックテーマのtheme.jsonファイルを開きます。 Web ホストのファイル マネージャーのコード エディターを使用するか、ファイルをダウンロードしてコンピューター上で編集し、サーバーにアップロードし直すことができます。
デモンストレーションの目的で、Twenty Twenty-Four テーマと Bluehost のファイル マネージャーを使用します。 Bluehost ユーザーでファイル マネージャーを使用している場合は、theme.json ファイルを右クリックして [編集] をクリックするだけです。
FTP を使用する場合は、FTP を使用して WordPress にファイルをアップロードする方法に関するガイドをお読みください。
カスタム フォント サイズの作成という、theme.json ファイルの編集の簡単な例を試してみましょう。
繰り返しになりますが、settings プロパティはテーマのデフォルトのスタイルを指定し、styles プロパティはそれらを実装することに注意してください。このため、theme.json ファイルの設定プロパティを編集します。
子テーマを使用する場合は、次のコードをコピーして、theme.json ファイルに貼り付け、必要に応じてフォント サイズをピクセル単位で変更できます。
{
"settings": {
"typography": {
"fluid": false,
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "16px"
},
{
"name": "Medium",
"slug": "medium",
"size": "24px"
},
{
"name": "Large",
"slug": "large",
"size": "40px"
},
{
"name": "Extra Large",
"slug": "x-lagrge", // Typo fixed (large -> large)
"size": "48px"
}
]
}
}
}
注: 親テーマのファイルを直接編集している場合は、 fontSizes というコードを見つける必要があります。
次のように、 typography と settings 内にネストする必要があります。
{
"settings": {
// Some code...
"typography": {
// Some code...
"fontSizes": [
// Font size definitions here
]
}
}
}
その後、これらのコード行を上記のコード スニペットに置き換えます。構文エラーがないことを確認してください。
完了したら、ファイルを保存し、Web サイトをプレビューして変更を確認します。 Bluehost ユーザーの場合は、ファイル マネージャーのコード エディターで [変更を保存] をクリックするだけです。
theme.json をさらに編集したい場合は、前のセクションで説明したようにファイルの構造をよく理解することを強くお勧めします。
また、公式の WordPress 設定リファレンスを読むことをお勧めします。これには、利用可能な設定プロパティの完全なリストとその使用手順が含まれています。
ボーナスヒント: WPCode を使用してテーマにカスタム コードを追加する
このガイドでは、theme.json とテーマのカスタマイズの可能性について学びました。しかし、直接編集するのはまだ少し圧倒されるかもしれません。
幸いなことに、カスタム コードを追加して高度なカスタマイズを行うための別のユーザーフレンドリーなオプション、WPCode があります。
WPCode を使用すると、テーマ ファイル自体に手を加える必要がなく、カスタム コード スニペットを挿入できます。これにより、カスタマイズ中に Web サイトが破損するリスクが大幅に軽減されます。
このコード スニペット プラグインについて詳しく知りたい場合は、WPCode の完全なレビューをご覧ください。
また、WPCode の使用を開始するのに役立つチュートリアルがいくつかあります。
初心者向けの便利な WordPress コード スニペット (エキスパートが選ぶ)
WordPress で再訪問者向けに新しい投稿を強調表示する方法
WordPress でテキストを強調表示する方法
WordPress にボックスシャドウを簡単に追加する方法
この記事が WordPress の theme.json ファイルについて学習するのに役立つことを願っています。 WordPress Web サイトの編集方法に関する初心者向けガイドや、専門家が選んだ WordPress に最適なドラッグ アンド ドロップ ページ ビルダーもご覧ください。
この記事が気に入っていただけましたら、WordPress ビデオ チュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。