theme.jsonの活用方法─WordPressテーマを賢くカスタマイズ

WordPressエコシステムは成長を続けており、これまで以上にWordPress開発に柔軟性がもたらされています。フルサイト編集（FSE）では、特にtheme.jsonファイルを活用することで、誰でもゼロからテーマを開発することができます。

theme.jsonファイルを使えば、複雑なプログラミング言語の扱いに煩わされることなく、WordPressテーマをきめ細かくカスタマイズ可能です。

この記事では、フルサイト編集との関係性を含め、theme.jsonファイルの可能性を探ります。また、開発経験を問わず、theme.jsonファイルを使用しておしゃれでパフォーマンスに優れたサイトを構築する方法もご紹介していきます。

theme.jsonファイルとは

theme.jsonは、WordPressテーマの設定とスタイルを定義する設定ファイルです。JavaScript Object Notation（JSON）を使用し、親言語のキーと値のペアを継承した構造化データでコードを書くことができます。

theme.jsonファイルは、カラーパレット、タイポグラフィ設定、レイアウトオプション、各ブロックのスタイリング、カスタムCSSなど、テーマのあらゆる側面を制御するのに重要な役割を担います。この詳細については、本記事を通してご紹介していきます。

そしてこのtheme.jsonファイルは、今後のWordPress開発の鍵を握る存在です。

theme.jsonとWordPressテーマ開発の関係性

WordPressのテーマ開発とプラグイン作成は、PHPを使ったテンプレートファイルの編集、functions.phpファイルの使用など、技術的な作業を中心に展開されるのが一般的でした。

theme.jsonファイルは、特にテーマ開発において変革をもたらしています。

• テーマの設定とスタイルを一箇所で定義できることで、CSSファイルやPHPファイルが散在することがなくなる。
• スタイルと設定を一元的に宣言するというアプローチにより、WordPressがより効率的にCSSを生成できる。jQueryのようなフレームワークを使用する場合と比較してパフォーマンスが向上する可能性がある。
• サイトや個々のブロックのスタイリングがこれまで以上に柔軟になり、テーマ開発の敷居が下がる。
• 今後もフルサイト編集が進化し続けるにつれて、テーマ、グローバルスタイル、ブロックエディターすべての相互作用において、theme.jsonファイルがさらに重要な役割を持つようになる。

このような側面をすべて組み合わせることで、テーマの設定やスタイルを定義する方法が標準化されます。さまざまなテーマを理解して扱いたい場合には、theme.jsonを採用することで、より堅牢で柔軟、ユーザーフレンドリーなWordPressテーマを作成することができます。さらに、WordPressの将来的な方向性にも沿ったアプローチになります。

theme.jsonファイルの場所

theme.jsonファイルは、従来のテーマやクラシックテーマには存在しません。使用するには専用のブロックテーマが必要になります。WordPress 5.8以上であれば、どのテーマでも作成可能です。

theme.jsonファイルは、「wp-content/themes/(your-theme) 」に格納されるのが一般的です。ファイルがない場合には、任意のコードエディターでファイルを作成しましょう。ファイルの中身については後ほどご説明します。

ゼロからファイルを作成することになりますが、どんな感じになるかを事前に確認したい場合は、デフォルトテーマのTwenty Twenty-Fourを確認してみてください。

ブロックテーマには、これを表示するtheme.jsonファイルが存在します。次のセクションでファイル構造を見ていきますので、このファイルは開いておくと便利です。

theme.jsonファイルを扱うための前提条件

設定ファイルは、誰もが開いて編集できるというわけではありません。テーマを構築してカスタマイズするには、以下のような基本知識が求められます。

• JSONの基礎知識─基本的な知識であれば習得は比較的容易だが、JSONの構文と構造に精通していることが重要。
• CSSの基礎知識─多くのオブジェクトとプロパティがCSSに対応しているため、CSSの知識があると役立つ。
• WordPressブロックエディターの使用経験─ブロックの仕組みとカスタマイズ機能を理解していると、構築が効率化される。

加えて、必須というわけではありませんが、theme.jsonファイルをより効果的に活用するため、フルサイト編集の概念は理解しておくことをおすすめします。最終的にユーザーが行うカスタマイズにどのような影響を与えるかがわかります。また、特定の機能を実現するために、HTMLやJavaScriptを使用することになる可能性もあります。

また、以下のようなツールも用意しておきましょう。

• コードエディター：JSON構文のシンタックスハイライトと検証を提供する質の高いエディターを選ぶと、ワークフローが効率化される。
• ローカル開発環境：DevKinstaなどのローカル開発ツールでテーマを作成することで、本番環境に影響を与えることなく、変更を素早く試してテストを実行することができる。

以上のツールと知識があれば、theme.jsonを使用してWordPressテーマ開発を行うことができます。

theme.jsonの構造と階層

まずは、theme.jsonの構造を把握することが重要です。また階層構造を持つ要素も見ていきましょう。

設定ファイルの構造と階層の理解がおそらく最も複雑な部分になりますが、コンセプト自体は簡単に理解できるはずです。

まずはtheme.jsonの構造から見ていきましょう。

基本構造

ファイルがJSON形式であることを考慮すれば、一般的な概念はすでにお分かりかもしれません。まず、ファイルオブジェクト全体、そしてその中にあるオブジェクトは波括弧（{}）で囲います。各オブジェクトはキーと値のペアで構成され、キーには一重引用符（’）または二重引用符（”）を使用し、行末にはカンマ（.）を使用します。

theme.jsonファイルに必須のオブジェクトはversion、settings、stylesです。

{
    "version": 2,
    "settings": {
      // ここに全体の設定
    },
    "styles": {
      // ここにグローバルスタイル
    }
}

settingsとstylesオブジェクトについては説明不要でしょう。versionの値は、ファイルの読み込みに使用するAPIバージョンに一致する整数になります。現在のAPIバージョンは3ですが、バージョン2も一般的で、古いバージョンからの移行も可能です。

ほとんどのtheme.jsonファイルにはスキーマも含まれます。スキーマはコードエディターで自動補完を使用したり、ファイルの検証を行ったりするためのもので、ファイルの先頭に追加します。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
    },
    "styles": {
    }
}

ここから、さまざまなプロパティやオブジェクトをsettingsとstylesに追加し、ファイルを構築していきます。

階層

theme.jsonファイルは階層構造に従っており、サイト全体の設定やスタイルに関する階層の一部に過ぎません。この複雑さはCSSのそれと似ているため、CSSの知識を持つ方は理解しやすいかもしれません。

要するに、theme.jsonで行ったカスタマイズは、必ずしもサイトのフロントエンドに表示されるわけではなく、ユーザーの設定が最優先されます。つまり、WordPress管理画面の「外観」＞「エディター」で行われた変更はすべてフロントエンドに表示されます。

子テーマを使用してtheme.jsonファイルを含めた場合、サイトエディターで行なった変更以外のすべての変更が上書きされます。同様に、親テーマの設定ファイルで定義したものは、WordPressのデフォルト設定とスタイルを上書きします。WordPressには独自のtheme.jsonファイルもありますが、今回は子テーマおよび親テーマの設定ファイルに焦点を当てます。

また、本記事では取り上げませんが、フックやフィルターを使用して値を上書きすることも可能です。動的なフィルターを使用することで、テーマやプラットフォームの設定やスタイルを変更するプラグインやテーマを構築できます。

ブロックの形式と構文

WordPressのブロックエディターやサイトエディターにアクセスし、投稿や固定ページを開いてコードエディターに切り替えると、以下のようにコンテンツ内にHTMLコメントのようなものが多数あることがわかります。

これは、ブロックテーマがPHPファイルを使用する代わりに、HTMLファイルとコメント、ブロックのマークアップを使用してサイトを構築するためです。これらの要素を組み合わせて、theme.jsonファイルを記述するのに必要な「ブロック構文」ができあがります。

段落ブロックのようにコンテンツを含むブロックの場合は、コンテンツを以下のように囲みます。

<!-- wp:paragraph -->
    <p>ここにコンテンツ</p>
<!-- /wp:paragraph -->

そうでなければ、一行コメントや自己修了型のコメントだけで済むかもしれません。 一部ブロックでは、タイプを組み合わせてレイアウトやデザインを作成します。またコメントを入れ子にすることも可能です。

<!-- wp:columns -->
<div class="wp-block-columns">
    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
    

    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

上記はブロックの開始と終了を示すコメントを使用して、カラムブロックを作成する例です。この中にカラムをデザインするためのHTMLを追加し、個々のラッパーを含めます。ブロックを互いに入れ子にして配置することはよくあるため、フロントエンドでは簡単な作業です。

特定のブロックのマークアップを見つけるには、ブロックエディターハンドブックを参考にしてみてください。手っ取り早い方法としては、WordPressにブロックを追加してコードエディターを開き、そこからマークアップをコピーします。
マークアップ内で行う変更については、後ほどご説明します。

theme.jsonとフルサイト編集の併用

先ほどの階層の説明から、theme.jsonがフルサイト編集の根幹となっていることがわかりました。この2つは、WordPressの包括的なテーマ構築ソリューションとして連携しています。例えば、グローバルスタイルのパネルは、theme.jsonの設定を視覚的に表現したものになっています。

変更はこのグローバルスタイルパネル、または設定ファイルで実行することができ、WordPressが対応する値を必要に応じて更新します。theme.jsonはテーマ独自のスタイルを設定する基盤として機能しますが、サイトエディターの設定が優先されます。エンドユーザーにとっては、コードやtheme.jsonファイルを編集することなく、グローバルスタイルのパネルで独自のカスタマイズを行うことができます。

さらに、theme.jsonで定義したカスタムCSSプロパティは、グローバルスタイルパネルで使用できるようになるため、ユーザーはサイト全体でより一貫性のあるスタイリングを行うことができます。特定のブロックのスタイルや設定を定義することもでき、WordPress管理画面でさらに調整可能です。

一言で言えば、theme.jsonは設定やスタイルなどのより細かな制御を可能にし、従来の方法より簡単で効率的な体験を提供してくれる開発者向けツールと言えます。対照的に、グローバルスタイルパネルでは、誰でも自分の好みに応じてテーマをカスタマイズできます。両者がどのように連携しサイトデザインやレイアウトの作成に役立つかは、実際にテーマを開発していく中で見えてきます。

theme.jsonファイルのプロパティを使用する

基本を押さえたところで、theme.json内のオブジェクトとプロパティを扱う方法を見ていきましょう。すべての用途や可能性を網羅することはできませんが、必要な機能を持ちフロントエンドでの見栄えも良いテーマを構築する方法は習得できるはずです。

settings

settingsプロパティでは、サイトエディターの機能とその動作をコントロールできます。これはトップレベルのプロパティで、通常は複数のレベルの入れ子を見つけることができます。

スタイルとそのバリエーションを見てみると、一部重複が見られますが、いずれもテーマ作成において重要な役割を果たします。

利用可能なプロパティは以下のとおりです。

{
    "version": 3,
    "settings": {
        "appearanceTools": false,
        "blocks": {},
        "border": {},
        "color": {},
        "custom": {},
        "dimensions": {},
        "layout": {},
        "position": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "useRootPaddingAwareAlignments": false
    }
}

これらすべての設定（およびスタイル）の詳細は、WordPress公式のテーマ開発者ハンドブックに掲載されていますが、以下重要なものをいくつかご紹介します。

• appearanceTools：テーマのスタイル設定を簡素化してくれる汎用プロパティ。要素の枠線、テキストの行ボックスの高さ、余白などの設定が可能。
• blocks：多くの作業は全体の設定やグローバルスタイルで行うことになるが、ブロック単位でこれを行うことができる。このプロパティの詳細はこちら。
• custom：特定の機能はなく、使い道を自分で決定できる。カスタムCSSプロパティを作成でき、カスタマイズの自由度が高い。
• useRootPaddingAwareAlignments：複雑で多機能なプロパティだが、基本的にはテーマの内側の余白（水平パディング）を設定するのに役立つ。例えばルート要素にパディングを設定しつつ、全幅の要素を画面の端まで広げて配置することができる。

なお、不要なプロパティはtheme.jsonに追加する必要はありません。例えば、appearanceToolsを使用しない場合はfalseで定義するのではなく、単に省略してOKです。

theme.jsonで設定を定義する方法

設定を定義する場合、各プロパティにサブプロパティを持たせ、キーと値のペアで具体的な設定内容を記述します。例えば、カラーパレットは以下のように作成します。

{
    "version": 3,
    "settings": {
        "color": {
          "palette": [
            {
              "color": "#0073aa",
              "name": "Primary",
              "slug": "primary"
            },
            {
              "color": "#23282d",
              "name": "Secondary",
              "slug": "secondary"
            }
          ],
…

他のプロパティは単純なブール値（trueまたはfalse）を持ち、サイトエディターでオン・オフを切り替えることができます。

{
    "version": 3,
    "settings": {
        "color": {
            "background": true,
            "defaultPalette": true,
            "link": true,
            "text": true
        }
    }
}

設定を定義したら、スタイリングを行うことができます。

styles

settingsは特定のスタイリングオプションへのアクセスを定義するのに対して、stylesはテーマのグローバルスタイルを定義します。先に触れたとおり、これは複数レベルの入れ子を使用するトップレベルのプロパティになります。特定の要素やブロックをターゲットにしたり、カスタムCSSプロパティを使用することも可能です。

このプロパティでのテーマスタイルの定義は、サイトエディターでカスタマイズできるようにするために重要になります。以下のような数々の要素を扱うことができます。

{
    "version": 3,
    "styles": {
        "border": {},
        "color": {},
        "dimensions": {},
        "filter": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "css": {}
    }
}

しかしほとんどはテーマ全体の主要な設定として使われることはなく、特定のブロックや要素に対して適用されるのが一般的です。例を見てみましょう。

…
"styles": {
    "blocks": {
        "core/group": {
            "color": {
                "text": "#000000",
                "background": "#ffffff",
                "link": "#777777"
            }
…

グローバルスタイルの場合は、ルート（ページの<body>タグに対応する）で作業します。特定の要素についてはelementsプロパティを使用し、ブロックと同様の構造に従います。

…
"styles": {
    "elements": {
        "button": {
            "color": {
                "text": "#ffffff",
                "background": "#aa3f33"
            }
…

サイトエディターで変更箇所を見ると、反映されるのがわかります。マークアップは作成したスタイル用のCSSも生成します。

hoverスタイルやfocusスタイルなど、要素用の擬似クラスにもスタイルを設定することができます。

…
"elements": {
    "button": {
        "color": {
            "text": "#ffffff",
            "background": "#aa3f33"
        },
        ":hover": {
            "color": {
                "background": "#822f27"
            }
…

スタイルはさらに細かく設定することができ、これがtheme.jsonを使用するメリットの一つです。

スタイルのバリエーション

スタイルのバリエーションについても触れておきます。フルサイト編集のインターフェースでは、以下のように、さまざまなカラーパレットやタイポグラフィのスタイルを確認できます。

これらは、theme.jsonに直接コードとして書くものではなく、代わりにファイルの代替バージョンを作成し、それぞれに一意の名前を付けて、テーマのstylesディレクトリ内に保存します。

マークアップ内のタイトルは、各代替JSONファイルに固有です。これは必須ではありませんが、ユーザー体験を考慮して設定することをおすすめします。

カスタムテンプレートとテンプレートパーツ

スタイルバリエーション同様、theme.jsonにはカスタムテンプレートと関連するテンプレートパーツを登録することができます。マークアップの登録方法はシンプルです。

"customTemplates": [
    {
        "name": "my-template",
        "title": "My Template",
        "postTypes": [
            "page",
            "post"
        ]
    }
]

customTemplatesプロパティは、以下３つの要素を定義する必要があります。

• name：テーマのテンプレートディレクトリに作成したテンプレート（/template/my-template.htmlなど）に対応
• title：識別用のテンプレート名
• postTypes：テンプレートに応じて投稿タイプの配列を指定できる（デフォルトは固定ページ）

登録したテンプレートは、サイトエディターやブロックエディターから選択できるようになります。

テンプレートパーツは登録する必要はありませんが、登録することをおすすめします。構造はテンプレートの登録と似ています。

…
"templateParts": [
    {
        "area": "header",
        "name": "header",
        "title": "Header"
    },
…

上記では、名前（name）とタイトル（title）はフルテンプレートと同じ基準に従います。エリア（area）は、テンプレートパーツがどの部分に位置するかを示すものです。header、footer、uncategorizedがデフォルトですが、独自のエリアにテンプレートパーツを割り当てることもできます。

なお、特別なコーディングなしでは表示されないため、これらのテンプレートパーツの表示方法は確認しておきましょう。登録方法はシンプルです。

パターン

最後はブロックパターン。トップレベルの配列を使用して、theme.jsonファイル内に好きなだけバンドルすることができます。WordPressのパターンディレクトリにある適切なパターンであれば、ファイルに含めることができます。

配列の定義は簡単で、patternsプロパティとディレクトリURLから関連するパターンのスラッグを使用します。 ウェブブラウザのURLからパターンのスラッグを選択する。

このスラッグを使用して、patternsのマークアップを作成することができます。

{
    "version": 3,
    "patterns": [
        "fullwidth-vertically-aligned-headline-on-right-with-description-on-left"
    ]
}

これで、ブロックエディターのパターンディレクトリから選択可能になります。

このように、パターンライブラリのアセットを簡単にテーマに取り込むことができるのは大きな利点で、WordPressのテーマ開発においてtheme.jsonの活用が急速に普及している理由の一つでもあります。

theme.jsonを使用してWordPressサイトをカスタマイズするワークフロー

theme.jsonの主な構成要素を理解したら、ワークフローを作成していきます。この新たなアプローチは、従来とは異なる方法で処理する必要があります。

今回ご紹介したいのは、スキーマURLを設定し、APIバージョンを選択して、最初に全体の設定を定義するというもの。これにはカラーパレット、タイポグラフィ、レイアウト設定などが含まれます。大体の場合は、appearanceToolsを使用します。

"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
   "settings": {
"appearanceTools": true,
     "color": {
       "palette": [
         {
           "name": "Primary",
"slug": "primary",
           "color": "#0073aa"
         },
         {
      "name": "Secondary",
        "slug": "secondary",
           "color": "#23282d"
         }
       ]
     },
     "typography": {
"fluid": true,
       "fontSizes": [
         {
           "size": "13px",
           "slug": "small",
           "name": "Small"
         },
         {
"size": "16px",
           "slug": "normal",
           "name": "Normal"
…

次に、定義したスラッグを使ってカスタムCSSプロパティを作成します。例えば、フォントの太さ（重さ）を調整することができます。

…
"custom": {
    "fontWeight": {
        "light": 300,
        "regular": 400,
        "medium": 500,
        "bold": 700
    },
…

これを終えたら、次はスタイルを指定します。

…
"styles": {
    "color": {
        "background": "var(--wp--preset--color--base)",
        "text": "var(--wp--preset--color--main)"
    },
…

次にブロックスタイルのカスタマイズです。おそらく、これがtheme.jsonファイルの大部分を占めることになります。

…
"styles": {
    "block": {
        "core/separator": {
            "color": {
            "text": "var(--wp--preset--color--main)"
            },
        "typography": {
            "fontSize": "var(--wp--preset--font-size--large)"
            }
        },
        "core/site-tagline": {
            "spacing": {
                "margin": {
                    "bottom": "20px"
                }
            },
            "typography": {
                "fontSize": "var(--wp--preset--font-size--small)"
            }
        },
        "core/site-title": {
            "typography": {
                "fontSize": "var(--wp--preset--font-size--medium)",
                "fontWeight": "var(--wp--custom--font-weight--semi-bold)",
                "lineHeight": "var(--wp--custom--line-height--none)"
        },
…

最後に、カスタムテンプレートやテンプレートパーツを設計して、theme.jsonに登録します。必要に応じて、使用したいブロックパターンもこの時に登録、作成します。

テーマ開発とカスタマイズにKinstaを利用する

変更を本番環境に反映する際には、まず作成したものをすべてテストすることが重要です。ここまではDevKinstaのようなローカル開発ツール内で作業していました。

とはいえ、最終的には本番環境で開発内容を確認することも重要です。DevKinstaを使用している場合、Kinstaのホスティングプラットフォームと完全に統合されているため、標準またはプレミアムステージング環境に反映することができます。

ステージング環境に反映したら、クラウドアーキテクチャでテーマのテストを行い、本番環境に反映する変更を調整することができます。

また、Kinstaの専用コントロールパネル「MyKinsta」のバックアップ管理ソリューションを利用すれば、毎日の自動バックアップを本番環境およびステージング環境の両方に復元することができます。さらに、すべてのステージング環境には開発者向けツールも付属しており、本番環境に移行する前にサイトのパフォーマンスを監視することができます。

theme.jsonとフルサイト編集のどちらを使用するべきか

theme.jsonとフルサイト編集には重なる部分があるため、どちらを使用すればいいのかわからないという方も多いかもしれません。それぞれに適したシナリオがあり、組み合わせて使用することになります。

例えば、theme.jsonは以下のような状況に適しています。

• テーマを開発する、ゼロからテーマを作成したい
• JSONに精通していて扱い慣れている
• テーマのデフォルトのスタイルや設定を自動で定義したい
• サイトエディターで実現できないスタイルや設定が必要

フルサイト編集は、theme.jsonの機能がほぼすべて適用されているため、以下のような状況ではフルサイト編集を使用する方が理にかなっています。

• 自分のサイトで使用する既存のテーマをカスタマイズしたい
• JSONの知識を持っていない
• 直感的にカスタマイズや開発を行いたい
• コーディングなしで素早く調整を行いたい

厳密には、テーマの基礎を定義するために設定ファイルが必要になりますが、そこから階層が引き継がれるため、サイト所有者はフルサイト編集を使用してより細かなカスタマイズを行うことができます。

まとめ

theme.jsonは、WordPressテーマ開発に革命をもたらしつつあります。テーマの設定とスタイルを一元的に管理し、より柔軟で保守性に優れ、カスタマイズ可能なテーマを作成することができます。

このファイルをWordPressのサイトエディターと併用することで、サイトの最終デザインを決定します。theme.jsonの設定はデフォルトとして機能し、その後ユーザーがさらなるカスタマイズを行うことができます。このファイルのコーディングは、PHPやCSSファイルの配列を調整するよりも簡単であり、今後のWordPressサイトデザインの新たな標準になります。

WordPressのtheme.jsonファイルの使い方について質問がありましたら、以下のコメント欄でお知らせください。