theme.jsonファイルはWordPressブロックテーマの重要な部分であり、サイトの外観と機能の多くの側面を制御します。最近クラシックテーマからブロックテーマに切り替えた場合、このファイルが何であるか、編集すべきかどうか疑問に思っているかもしれません。
あなただけではありません。私たちと多くのWPBeginnerユーザーも全く同じことを疑問に思っていました。そこで、このトピックを深く掘り下げ、包括的なガイドを提供することにしました。
この記事では、theme.jsonファイルとは何か、なぜ重要なのか、そしてWordPressサイトのカスタマイズにどのように使用できるかを説明します。
WordPressのtheme.jsonファイルとは何ですか？
theme.json ファイルは、WordPress 5.8 で導入された特別なテーマファイルです。これは、WordPress のブロックテーマのあらゆる側面を視覚的にカスタマイズできるフルサイト編集 (FSE) 体験において重要な役割を果たします。
essentially、theme.jsonファイルは、ブロックテーマのスタイリングと機能を制御するブループリントとして機能します。これには、色、タイポグラフィ、レイアウト、テンプレートなどのさまざまな要素がどのように表示され、動作するかをWordPressに指示するコードが含まれています。
WordPressブロックテーマにtheme.jsonファイルが必要なのはなぜですか？
WordPressでブロックテーマを編集することは、クラシックテーマを編集することとは異なります。
クラシックテーマでは、functions.phpファイルを使用して、add_theme_support()関数でカスタムメニューやアイキャッチ画像などの機能を有効にします。その後、CSSスタイルシート（style.css）ファイル内のCSSルールでこれらの機能をスタイル設定できます。
ブロックテーマでは、theme.jsonはブロックテーマの見た目と雰囲気を定義するすべてのものの中心的なハブとして機能します。これにより、functions.phpでのadd_theme_support()の必要性をなくし、フォント、色、レイアウトオプションなどを一元管理できます。
そのため、ブロックテーマのfunctions.phpファイルは、クラシックテーマの同等のファイルよりも小さいことがよくあります。
専用のtheme.jsonファイルを持つことは、以前のクラシックテーマシステムと比較していくつかの大きな利点があります。
まず、theme.json は WordPress のフルサイトエディターと連携して機能します。これにより、コードに触れることなく、エディター内で直接テーマのスタイルや設定を簡単にカスタマイズできます。
さらに、theme.jsonは、開発者とユーザーの両方に一貫したエクスペリエンスを作成することを目指しています。一部のユーザーは、完全に新しいレイアウトやスタイリングオプションを学習する必要があるため、テーマを変更する必要がある場合に非常にフラストレーションを感じます。
theme.jsonを使用すると、すべてが同様の方法で整理されているため、テーマの切り替えがよりスムーズなプロセスになります。
最終的に、theme.jsonを使用することで、WordPressがフルサイト編集機能を拡張し続けるにつれて、テーマ開発者とユーザーは将来にわたって作業を保護できます。
theme.json ファイルが何であるかを説明したので、さらに深く掘り下げてみましょう。以下のクイックリンクを使用して、このガイドをナビゲートできます。
- WordPressのtheme.jsonファイルはどこにありますか？
- theme.json ファイルはどのようなものですか？
- theme.jsonファイルを編集する前にすべきこと
- WordPress theme.json ファイルの編集方法
- ボーナスヒント：WPCodeを使用してカスタムコードをテーマに追加する
WordPressのtheme.jsonファイルはどこにありますか？
theme.json ファイルは、Web サーバー上のテーマ ディレクトリ内にあります。一般的なファイル パスは、public_html » wp-content » themes » your-theme-name » theme.json です。
アクセスするには、まずFTPまたはホスティングアカウントのファイルマネージャーを介してサイトに接続する必要があります。
Bluehostを使用している場合は、ログインして「Webサイト」タブに切り替えることができます。次に、ウェブサイトの下にある「設定」ボタンをクリックします。
次に、「概要」タブにいることを確認してください。
次に、下にスクロールして「ファイルマネージャー」ボタンをクリックします。
この方法でファイルマネージャーを開くと、自動的にウェブサイトのルートフォルダ内にいることになります。
ここで、「wp-content」ディレクトリを探して開きます。そこには、「themes」フォルダがあり、インストールされているすべての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": []
}
以下に簡単な内訳を示します。
スキーマ
この部分はブロックテーマではオプションなので、お使いのテーマに含まれている場合も含まれていない場合もあります。
schemaプロパティは、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"
},
これらは、後でスタイルセクションでプリセットを作成する際に役立ちます。プリセットについては、次のパートで説明します。
スタイル
設定セクションがテーマのデフォルトのカスタマイズオプションを定義するのに対し、スタイルセクションはそれらをテーマに適用します。
ここでは、カスタマイズ設定をウェブサイト全体、またはプリセットを使用してブロックレベルで適用できます。
次の例を見てみましょう。
{
"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)です。
したがって、styles内のコード"color": {"background": "var(--wp--preset--color--base)"は、このテーマの背景色が白であることを示しています。
カスタムテンプレート
WordPressブロックテーマ開発では、開発者はユーザーが使用できるカスタムページ、投稿、またはカスタム投稿タイプのために、事前定義されたレイアウトを作成できます。カスタムページ
例えば、Twenty Twenty-Fourテーマでは、theme.jsonファイルにPage No Title、Page With Sidebar、Page with wide Image、Single with Sidebarといったいくつかのカスタムテンプレートが定義されています。
これらのいずれかを使用してコンテンツを作成できます。
],
"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"
}
]
注意点として、theme.jsonファイルはテンプレートを名前で参照するだけで、タイトルや対象となる投稿タイプなどのメタデータを提供します。
ただし、カスタムテンプレートの実際の外観と機能は、テーマフォルダ内の個別のテンプレートファイルで定義されています。
それらを表示するには、public_html » wp-content » themes » your-theme-name » templates に移動します。
テンプレートパーツ
テンプレートパーツは、カスタム テンプレート全体に適用できる再利用可能な領域です。これらは、ヘッダー、フッター、サイドバーなどの要素です。
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ファイルはテンプレートを参照するだけです。
それらの実際の外観は、partsフォルダ内の独自のテンプレートパートファイルで定義されています。
パターン
パターンは、ページ、投稿、またはテーマの他の場所でカスタムコンテンツレイアウトを作成できる、あらかじめ作成されたブロックのコレクションです。
フルサイトエディターを開くと、パターンメニューに気づくかもしれません。これは、Gutenbergブロックテーマで利用可能なすべてのパターンを見つけることができる場所です。
theme.jsonを使用すると、テーマ開発者は公開されているパターンディレクトリからパターンを参照できます。これは、再利用可能なブロックを自分で設計することなく、より多くのカスタマイズオプションを提供する素晴らしい方法です。
例えば、Twenty Twenty-Fourテーマは、公式ディレクトリから2つのパターンを参照しています：サービスの3列とクライアントセクションです。
"patterns": [
"three-columns-of-services",
"clients-section"
]
これは、これらのパターンがフルサイトエディターのパターンメニューにあるためです。
ただし、それらはテーマディレクトリ内のpatternsフォルダにはありません。
注意: テーマディレクトリ内のテンプレート、パーツ、パターンのフォルダには、theme.json で指定されていないファイルが含まれている場合がありますが、それらはフルサイトエディターで引き続き表示されます。
もし興味があれば、これは WordPress が、これらのフォルダの名前規則とテーマディレクトリ内の場所に基づいて、自動的に認識して使用するように設計されているためです。
theme.jsonファイルを編集する前にすべきこと
theme.json はコアテーマファイルであるため、ライブの WordPressウェブサイト で直接編集すると、いくつかのリスクが伴います。誤った編集は、テーマやウェブサイトを破損させる可能性があります。
より安全なアプローチは、子テーマを使用することです。
子テーマは、親テーマ（使用しているブロックテーマ）のすべてのスタイルバリエーションと機能を継承しますが、親テーマ自体を変更せずにカスタマイズできます。これにより、親テーマがアップデートされても、カスタマイズが上書きされることはありません。
WordPressで子テーマを作成する方法については、WordPressで子テーマを作成する方法をご覧ください。この記事では、新しいtheme.jsonファイルを自動生成するCreate Block Themeプラグインを使用した簡単な方法を紹介します。これは子テーマ専用です。
スムーズな編集体験を確保し、ウェブサイトのダウンタイムを回避するために、WordPressウェブサイトのバックアップを作成することもお勧めします。これにより、問題が発生した場合でも、サイトを以前の状態に簡単に復元できます。
クイックで信頼性の高いバックアップソリューションとして、Duplicatorのようなプラグインの使用をお勧めします。
WordPressのライブサイトをローカルサーバーに移動する方法 | ローカルWordPress開発環境またはステージングサイトで作業することも推奨されます。これにより、ライブウェブサイトのレプリカが作成され、訪問者に影響を与えることなく安全に変更をテストできます。
その他、留意すべきヒントをいくつかご紹介します。
- theme.jsonファイルで小さな編集から始め、より複雑な変更を加える前に徹底的にテストしてください。
- theme.jsonファイル内の特定のプロパティまたは設定について不明な点がある場合は、公式WordPressドキュメントを参照してください。
- 問題が発生した場合は、テーマ開発者のサポートチームまたはWordPress.orgのサポートフォーラムに遠慮なく助けを求めてください。詳細については、WordPressサポートの適切な依頼方法に関するガイドをご覧ください。
WordPress theme.json ファイルの編集方法
当社の調査とテストに基づき、WordPressのtheme.jsonファイルを編集するには、フルサイトエディターを使用する方法とコードを使用する方法の2つの方法があることがわかりました。最初のオプションははるかに簡単で安全であり、ウェブサイトのフロントエンドから変更を確認できます。
一方、2番目の選択肢は、高度なWordPress開発に慣れている場合に推奨されます。
コードなしでテーマ.jsonを編集する（初心者向け）
コードに直接触れることなくtheme.jsonファイルを編集するには、Create Block Themeプラグインを使用できます。このプラグインは、公式のWordPress.orgチームによって公開されており、ユーザーがカスタムブロックテーマを作成したり、編集したり、ブロックテーマのスタイルバリエーションを保存したりできるようにします。
まず、管理画面にWordPressプラグインをインストールします。次に、外観 » エディターに移動して、フルサイトエディターを開きます。
これで、テーマを編集するためのいくつかのメニューが表示されます。
ここで、「スタイル」を選択します。
次に、「編集スタイル」の鉛筆アイコンをクリックします。
これにより、ウェブサイトのグローバル設定とスタイルを編集するためのブロックエディターに移動します。
これで、通常どおりテーマのスタイルを変更できます。WordPressのフルサイト編集ガイドのウェブサイトのグローバルスタイルを変更する方法のセクションを参照すると、詳細を確認できます。
例として、カスタムカラーパレットを作成してみましょう。
カラー スキームまたはパレットは、テキスト、背景、ボタンなどの要素のデフォルト カラーのセットです。これにより、ウェブサイト全体で統一感のある外観が保証されます。
同じカラープリセットを使用する要素は常に一致するため、ウェブサイトのデザインが洗練され、プロフェッショナルに見えます。
パレットを編集するには、スタイル設定のサイドバーで「色」を選択します。
次の画面で、テーマの色をカスタマイズするための設定が表示されます。
ここで、「パレット」セクションの「色」をクリックします。
この例では、Twenty Twenty-Fourテーマはすでにパレットに5色定義していますが、それらを変更してカスタムカラーをゼロから作成することもできます。
これを行うには、「テーマ」の下にある色のいずれかをクリックします。次に、カラーピッカーツールで任意のカラーを選択します。
現在、ウェブサイトをプレビューすると、以前の色を使用していた特定のブロックまたは要素が、パレットで選択した色に置き換えられていることがわかります。
各色について、同じ手順を繰り返すことができます。その後、「保存」をクリックします。
変更を保存したら、ブロックテーマを作成ボタン（レンチアイコン）をクリックします。
次に、「テーマへの変更を保存」を選択します。
次の画面で下にスクロールする必要があります。
その後、「変更を保存」をクリックします。これにより、WordPressはテーマに対して行ったすべての変更をtheme.jsonファイルに保存します。
これを行うと、ブロックエディターがリフレッシュされます。
再度「ブロックテーマを作成」ボタンをクリックし、「theme.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を使用する場合は、WordPressにファイルをアップロードするためにFTPを使用する方法に関するガイドをご覧ください。
theme.json ファイルを編集する簡単な例、カスタムフォントサイズの作成を試してみましょう。
ここでも、settings プロパティがテーマのデフォルトスタイルを指定し、styles プロパティがそれを実装することを覚えておいてください。このため、theme.json ファイルの settings プロパティを編集します。
子テーマを使用している場合は、テーマの 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
]
}
}
}
その後、上記のコードスニペットでそれらのコード行を置き換えます。ただし、構文エラーがないことを確認してください。
完了したら、ファイルを保存し、ウェブサイトをプレビューして変更を確認します。Bluehost ユーザーは、ファイルマネージャーのコードエディターで「変更を保存」をクリックするだけです。
theme.jsonファイルをさらに編集したい場合は、前のセクションで説明したように、ファイルの構造に慣れることを強くお勧めします。
また、利用可能な設定プロパティの完全なリストとそれらの使用方法が含まれている、公式WordPress設定リファレンスを読むこともお勧めします。
ボーナスヒント：WPCodeを使用してカスタムコードをテーマに追加する
このガイドでは、theme.json とテーマカスタマイズの可能性について学びました。しかし、直接編集するのはまだ少し圧倒されるように感じるかもしれません。
幸いなことに、カスタムコードを追加したり高度なカスタマイズを行ったりするための、もう一つのユーザーフレンドリーなオプションがあります：WPCodeです。
WPCodeを使用すると、テーマファイルを直接編集することなく、カスタムコードスニペットを挿入できます。これにより、カスタマイズ中にウェブサイトを破損させるリスクが大幅に軽減されます。
このコードスニペットプラグインについてさらに詳しく知りたい場合は、WPCode の完全なレビューをご覧ください。
また、WPCodeの使用を開始するための役立つチュートリアルをいくつかご紹介します。
- 初心者向けの便利なWordPressコードスニペット（専門家のおすすめ）
- WordPressで再訪問者向けに新しい投稿を強調表示する方法
- WordPressでテキストをハイライトする方法
- WordPressでボックスシャドウを簡単に追加する方法
この記事がWordPressのtheme.jsonファイルについて学ぶのに役立ったことを願っています。また、WordPressウェブサイトの編集方法に関する初心者向けガイドや、おすすめのWordPress用ドラッグ＆ドロップページビルダーに関する記事もご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
アレクサンダー
現在、独自のWordPressテーマを作成する方法を学んでいます。ブロックアプローチに完全に専念しているわけではなく、ハイブリッドアプローチにより重点を置いています。このチュートリアルは、「theme.json」ファイルについて基本的な理解を深めるのに役立ちました。ありがとうございます。
WPBeginnerサポート
Glad to hear our guide was helpful
管理者
オヤトグン・オルワセウン・サミュエル
ブロックテーマに焦点を当てたWordPressテーマの作成を検討し始めたばかりなので、ちょうど良いタイミングです。theme.jsonファイルでどれだけのカスタマイズができるか想像もつきません。
クラシックテーマよりもはるかに柔軟性があることがわかりました。共有していただきありがとうございます。
イジー・ヴァネック
数ヶ月前、アクティベートできないテンプレートの問題に遭遇しました。テーマのtheme.jsonファイルに問題があるというエラーメッセージが繰り返し表示されました。結局、問題を解決できなかったため、別のテンプレートに切り替えるしかありませんでした。今では、このファイルが何であるか、そしてその機能について、はるかに深く理解できるようになりました。ウェブサイトでの継続的な学習に感謝します。theme.jsonファイルにはジェネレーターがあるのでしょうか、それとも各テンプレートに固有のものがあるのでしょうか？もし再びこの問題に遭遇した場合に備えて。
WPBeginnerサポート
各テーマには通常、独自のtheme.jsonファイルがあります。
管理者
イジー・ヴァネック
`theme.json` ファイルが破損した場合、テーマ固有である必要があるため、ジェネレーターで新しいものを生成するだけでは不可能であることを理解しています。少なくともこれで、将来同様のことを試す問題が解決します。おそらく開発者に連絡するか、別のテーマを検討する必要があります。私のスキルでは修正するには不十分です。返信ありがとうございます。
Mrteesurez
素晴らしい、これは良いですね。ブロックテーマはWordPressの次の大きな目玉です。theme.jsonに関するあなたの説明は理解できました。私は主にクラシックテーマしか扱っていないので、今回初めて聞きました。ご紹介いただきありがとうございます。