カラー設定

color は theme.json の settings プロパティ内に直接ネストされたオブジェクトです。これは、ユーザーインターフェースに表示される複数の色に特化した設定を構成するために使用されます。

theme.json ファイルのデフォルト値の文脈で color プロパティを見てみましょう: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "background": true,
  6.             "custom": true,
  7.             "customDuotone": true,
  8.             "customGradient": true,
  9.             "defaultDuotone": true,
  10.             "defaultGradients": true,
  11.             "defaultPalette": true,
  12.             "duotone": [],
  13.             "gradients": [],
  14.             "link": true,
  15.             "palette": [],
  16.             "text": true
  17.         }
  18.     }
  19. }

ご覧のように、ほとんどの設定はブール値を受け入れ、true または false に設定できます。他の設定、例えば duotone、gradients、palette は値の配列を取ります。これらはカスタムプリセットを登録できるものであり、このドキュメントでそれらを作成する方法を学びます。

カラー設定は主に、次の4つのグループに分けることができます:

  • UIでの設定の有効化または無効化。
  • 色、デュオトーンフィルター、グラデーションのユーザーによるカスタマイズの有効化または無効化。
  • コアのWordPressカラー、デュオトーン、グラデーションプリセットの有効化または無効化。
  • カスタムカラー、デュオトーン、グラデーションプリセットの登録。

次のセクションでは、これらの各機能がどのように機能するかを学びます。

テキスト、背景、およびリンク設定

ブロックエディターでは、ブロックの Color パネルの下に Text、Background、および Link 設定が表示されることがよくあります。これは、これらのいずれかのサポートを選択したブロックに対してです。

これらのオプションは、インターフェースで次のように表示されます:

青い背景を持つ段落ブロックのWordPress投稿エディター。右側には背景色ピッカーが開いており、さまざまな色のオプションが表示されています。

しかし、ブロックがテキスト、背景、およびリンクカラーのサポートを登録しているからといって、テーマもそれらをサポートする必要があるわけではありません。それは完全にあなた次第です。

WordPressは、background、link、および text プロパティを settings.color の下で定義することによって、テーマが設定のいずれかまたはすべてをサポートするかどうかを決定させます: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "background": true,
  6.             "link": true,
  7.             "text": true
  8.         }
  9.     }
  10. }

デフォルトでは、すべて true に設定されているため、関連するコントロールはブロックインターフェースに表示されます。機能を無効にしたい場合は、theme.json でその値を false に設定するだけです。

演習として、背景色を無効にし、テキストとリンクの色は許可してみてください: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "background": false,
  6.             "link": true,
  7.             "text": true
  8.         }
  9.     }
  10. }

いくつかのコアWordPressブロックやサードパーティのブロックには、ユーザーが構成できる他の色のオプションがあるかもしれません。これらは、カラーシステムの標準コンポーネントではないため、theme.json を介して有効または無効にすることはできません。

ユーザーのカスタマイズの有効化と無効化

テーマに関してあなたが下すべき主要な決定の1つは、ユーザーがカスタムカラーを作成できるようにするかどうかです。一方では、カスタムカラーを有効にすることで、ユーザーは自分のサイトを本当に自分のものにするための柔軟性と自由を得ることができます。しかし、色のスキームを ちょうど良い 状態にするために多くの作業をした場合、ユーザーがあらかじめ決められたパレットからのみ色を選択することを確実にしたいかもしれません。

これは、公開配布用のテーマを構築しているか、クライアント用のテーマを構築しているかによって変わるかもしれません。各プロジェクトはユニークであり、あなたがデザインにとって最適なものを判断することができます。

WordPressは現在、theme.json を介して有効または無効にできる3つの異なる機能に対してユーザーによるカスタマイズされた色を許可しています:

  • custom: ユーザーがカスタムカラーを作成して使用できるかどうか。
  • customDuotone: ユーザーがカスタムデュオトーンフィルターを作成できるかどうか（通常は画像を含むブロックのオーバーレイに使用されます）。
  • customGradient: ユーザーがカスタム背景グラデーションを作成できるかどうか。

デフォルトでは、これらの各機能は theme.json で有効になっています: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "custom": true,
  6.             "customDuotone": true,
  7.             "customGradient": true
  8.         }
  9.     }
  10. }

ユーザーによるカスタマイズされた色

settings.colors.custom の値が true に設定されている場合（デフォルト）、ユーザーは個々のブロックに対してカスタムカラーを定義できるようになります。以下に示すように:

青い背景を持つ段落ブロックのWordPress投稿エディター。テキストカラーオプションが開いており、ユーザーがカスタムカラーを選択しています。

これはデフォルトで有効になっているため、theme.json ファイル内でプロパティを false に設定してオフにしてみてください: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "custom": false
  6.         }
  7.     }
  8. }

これで、ユーザーはプリセットカラーからのみ選択できるようになります。

ユーザーによるカスタマイズされたデュオトーンフィルター

デュオトーンフィルターは、一般的に画像を表示するブロックによってサポートされています。フィルターは画像の上にオーバーレイとして適用され、デュオトーン効果を作成します。2色のフィルターは、ユーザーがシャドウとハイライトの色を選択できるようにします。

デフォルトでは、ユーザーは以下に示すようにカスタムデュオトーンフィルターを作成できます:

カスタムデュオトーンフィルターオプションが開いている画像ブロックを示すWordPress投稿エディター。

カスタムデュオトーンフィルターはデフォルトで有効になっているため、ユーザーがカスタムカラーを追加できないようにする場合は、settings.color.customDuotone プロパティを false に設定する必要があります: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "customDuotone": false
  6.         }
  7.     }
  8. }

ユーザーによるカスタマイズされたグラデーション

他のほとんどのカラー設定と同様に、カスタムグラデーションはデフォルトで有効になっています。これにより、テーマのユーザーは、以下に示すように、サポートされている任意のブロックに対してグラデーション背景を定義できます:

カバー ブロックが表示されているWordPress投稿エディター。右側のサイドバーでは、オーバーレイオプションのためにグラデーションピッカーが開いています。

ユーザーに利用可能なグラデーションを慎重に調整した場合や、単にカスタムグラデーションを完全に無効にしたい場合は、settings.color.customGradient を false に設定してこの機能をオフにできます: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "customGradient": false
  6.         }
  7.     }
  8. }

デフォルトのWordPressプリセット

WordPressは、各色機能のために独自のプリセットを作成します。ユーザー定義の色と同様に、これらにユーザーがアクセスできるようにするかどうかを決定する必要があります。これらはしばしばテーマのカラーパレットと衝突しますが、ユーザーに完全な自由を与えることを選択することもできます。

WordPressは現在、theme.json を介して有効または無効にできる3つの異なる機能に対してユーザーによるカスタマイズされた色を許可しています:

  • defaultDuotone: ユーザーがWordPressのデフォルトデュオトーンフィルタープリセットから選択できるかどうか（通常は画像を含むブロックのオーバーレイに使用されます）。
  • defaultGradients: ユーザーがWordPressのデフォルト背景グラデーションプリセットから選択できるかどうか。
  • defaultPalette: ユーザーがWordPressのデフォルトカラーパレットから色を選択できるかどうか。

デフォルトでは、これらの各機能は theme.json で有効になっています: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "defaultDuotone": true,
  6.             "defaultGradients": true,
  7.             "defaultPalette": true
  8.         }
  9.     }
  10. }

これらの設定が無効になっていても、WordPressは依然としてそのプリセットのためにCSSカスタムプロパティを生成します。これは後方互換性のためであり、ユーザーが他のテーマを使用しているときに以前に選択した色、グラデーション、またはデュオトーンフィルターを失わないようにするためです。

デフォルトのカラーパレット

WordPressは独自のカラーパレットを提供しており、これはオプトアウトしていないテーマに対してデフォルトで有効になっています。以下の色が含まれています:

  • 黒
  • シアン青灰色
  • 白
  • 淡いピンク
  • 鮮やかな赤
  • 輝く鮮やかなオレンジ
  • 輝く鮮やかなアンバー
  • 明るい緑シアン
  • 鮮やかな緑シアン
  • 淡いシアン青
  • 鮮やかなシアン青
  • 鮮やかな紫

カラーのプリセットは、Text、Background、Link、および他の色のコントロールに対して利用可能です。以下のスクリーンショットに示すように:

段落を包むグループのWordPress投稿エディター。右側のサイドバーでテキストカラーオプションが強調表示されています。

コアのWordPressカラーを無効にしたい場合があり、その場合は settings.color.defaultPalette を false に設定することで実行できます: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "defaultPalette": false
  6.         }
  7.     }
  8. }

デフォルトのデュオトーンフィルター

WordPressは、次のようなデフォルトのデュオトーンフィルタープリセットをいくつか定義しています:

  • ダークグレースケール
  • グレースケール
  • 紫と黄色
  • 青と赤
  • ミッドナイト
  • マゼンタと黄色
  • 紫と緑
  • 青とオレンジ

これらは、デュオトーンフィルターをサポートするブロックに表示されます（通常は画像を含むブロックのオーバーレイとして使用されます）。以下に示すように:

コンテンツキャンバス内の画像に紫と黄色のデュオトーンフィルターが適用されているWordPress投稿エディター。

デフォルトのデュオトーンプリセットからテーマユーザーが選択できないようにする場合は、settings.color.defaultDuotone を false に設定する必要があります: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "defaultDuotone": false
  6.         }
  7.     }
  8. }

デフォルトのグラデーション

デフォルトでは、WordPressはユーザーが選択できるいくつかのグラデーションを定義しています。これらは、グラデーション背景をサポートするブロックに追加できます:

  • 鮮やかなシアン青から鮮やかな紫
  • 明るい緑シアンから鮮やかな緑シアン
  • 輝く鮮やかなアンバーから輝く鮮やかなオレンジ
  • 輝く鮮やかなオレンジから鮮やかな赤
  • 非常に明るい灰色からシアン青灰色
  • クールからウォームスペクトル
  • ブラッシュライトパープル
  • ブラッシュボルドー
  • 輝く夕暮れ
  • 淡い海
  • 電気草
  • ミッドナイト

これらは、ユーザーインターフェースの Background > Gradient コントロールに次のように表示されます:

グループブロックと紫とオレンジの背景グラデーションが選択されているWordPress投稿エディター。

コアのWordPressグラデーションプリセットはデフォルトで有効になっていますが、テーマのためにそれらを無効にしたい場合があります。その場合は、settings.color.defaultGradients を false に設定することで実行できます: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "defaultGradients": false
  6.         }
  7.     }
  8. }

カスタムカラーのプリセットの登録

WordPressが独自の色、デュオトーン、グラデーションプリセットを定義するのと同様に、あなたもそれを行うことができます。これは、テーマの外観をカスタマイズし、テーマユーザーがブロックエディターで選択できる色を決定するための強力な機能です。

theme.json を介して3つの異なる機能のためにプリセットを設定できます:

  • duotone: ユーザーが選択できるデュオトーンフィルターの配列（通常は画像を含むブロックのオーバーレイに使用されます）。
  • gradients: ユーザーが選択できる背景グラデーションオブジェクトの配列。
  • palette: ユーザーが選択できる色オブジェクトの配列。

これは theme.json で次のようになります（まだ登録されているプリセットはありません）: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "duotone": [],
  6.             "gradients": [],
  7.             "palette": []
  8.         }
  9.     }
  10. }

WordPressは、--wp--preset--{type}--{slug} の形式で各プリセットのためにCSSカスタムプロパティを自動的に生成します。したがって、スラッグが contrast のカラーパレットプリセットは --wp--preset--color--contrast になります。

これらには、CSSカスタムプロパティ自体または var:preset|{type}|{slug} の特別な命名規則を介してアクセスできます。これについては、theme.json スタイルのドキュメント で詳しく学びます。

WordPressは、プリセットに基づいてCSSクラスを生成することもあります。たとえば、contrast カラーパレットプリセットは、ブロックのテキストカラーとして使用されるときに .has-contrast-color に関連付けられ、背景として使用されるときに .has-contrast-background-color になります。

カスタムカラーパレット

テーマを構築する際には、ほぼ常に独自のカラーパレットを登録したいと思うでしょう。一部のテーマでは、これは数色で簡単に済むかもしれません。他のテーマでは、数十色を含む可能性があります。

結局のところ、それはあなたのテーマであり、WordPressはあなたのデザインを構築するためのツールを提供します。

settings.color.palette プロパティを介してカスタムカラーを登録できます: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "palette": []
  6.         }
  7.     }
  8. }

palette プロパティは、色オブジェクトの配列を受け入れ、各オブジェクトには設定する必要がある3つのプロパティがあります:

  • color: 有効なCSSカラー値。
  • name: あなたの色のラベルで、国際化され（翻訳可能）、ツールチップなどのいくつかのコンテキストでユーザーに表示されます。
  • slug: あなたの色のためのユニークな機械可読スラッグ/ID。これは、CSSカスタムプロパティとCSSクラスを生成するために使用されます。

たとえば、あなたのテーマのためにBase、Contrast、Primaryという3つの色を登録したいとします。これらはカラーピッカーに次のように表示されます:

グループの周りに段落があるWordPress投稿エディター。グループには厚い青い境界線と黒いテキストが選択されています。

カスタムカラーがインターフェースに表示されるためには、settings.color.palette 配列に追加する必要があります。以下のコードスニペットのように: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "palette": [
  6.             {
  7.             "color": "#ffffff",
  8.             "name": "Base",
  9.             "slug": "base"
  10.             },
  11.             {
  12.             "color": "#000000",
  13.             "name": "Contrast",
  14.             "slug": "contrast"
  15.             },
  16.             {
  17.             "color": "#89CFF0",
  18.             "name": "Primary",
  19.             "slug": "primary"
  20.             }
  21.             ]
  22.         }
  23.     }
  24. }

必要な色の数は自由に追加でき、公式の命名規則はありません。

色に公式の命名規則がないにもかかわらず、base と contrast のスラッグは、Twenty Twenty-Threeデフォルトテーマによって設定された de facto 標準です。サイトの背景には base を、テキストには contrast を使用することをお勧めします。これにより、将来の互換性とテーマ間の互換性が最大化されます。また、プラグインの著者に必要に応じて標準的なフォールバックカラーのセットを提供します。

カスタムグラデーション

色と同様に、カスタムグラデーションプリセットのセットを登録することもできます。テーマがサポートできるグラデーションの数に制限はないので、自由に楽しんでください！

settings.color.gradients プロパティを介してカスタムグラデーションを登録できます: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "gradients": []
  6.         }
  7.     }
  8. }

gradients プロパティは、グラデーションオブジェクトの配列を受け入れ、各オブジェクトには設定する必要がある3つのプロパティがあります:

  • gradient: 有効なCSS背景グラデーション値。
  • name: あなたのグラデーションのラベルで、国際化され（翻訳可能）、ツールチップなどのいくつかのコンテキストでユーザーに表示されます。
  • slug: あなたのグラデーションのためのユニークな機械可読スラッグ/ID。これは、CSSカスタムプロパティとCSSクラスを生成するために使用されます。

たとえば、あなたのテーマに追加したいエメラルドとファーブルドサンセットという2つのグラデーションがあるとします。以下に示すように:

紫から黄色のグラデーション背景を持つグループブロックのWordPress投稿エディター。

これらを登録するために、theme.json に次のコードを追加します: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "gradients": [
  6.             {
  7.             "gradient": "linear-gradient(to right, #10b981, #64a30d)",
  8.             "name": "Emerald",
  9.             "slug": "emerald"
  10.             },
  11.             {
  12.             "gradient": "linear-gradient(-225deg,#231557,#44107a 29%,#ff1361 67%,#fff800)",
  13.             "name": "Fabled Sunset",
  14.             "slug": "fabled-sunset"
  15.             }
  16.             ]
  17.         }
  18.     }
  19. }

カスタムデュオトーンフィルター

色やグラデーションと同様に、テーマのために任意の数のカスタムデュオトーンフィルターを登録できます。これにより、ユーザーはデュオトーンをサポートする画像や他のブロックに直接カスタマイズを適用できます。

settings.color.duotone プロパティを介してカスタムデュオトーンフィルターを登録できます: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "duotone": []
  6.         }
  7.     }
  8. }

duotone プロパティは、デュオトーンオブジェクトの配列を受け入れ、各オブジェクトには設定する必要がある3つのプロパティがあります:

  • colors: 2つの有効なCSSカラー値を含む配列。
  • name: あなたのデュオトーンフィルターのラベルで、国際化され（翻訳可能）、ツールチップなどのいくつかのコンテキストでユーザーに表示されます。
  • slug: あなたのデュオトーンフィルターのためのユニークな機械可読スラッグ/ID。これは、CSSカスタムプロパティとCSSクラスを生成するために使用されます。

たとえば、赤いシャドウとハイライト用のデュオトーンフィルターと、青用の類似のフィルターを作成したいとします。以下に示すように:

青い色合いのデュオトーンフィルターが適用された画像ブロックのWordPress投稿エディター。

赤と青のデュオトーンフィルターを登録するには、theme.json にこのコードを追加します: 

  1. {
  2.     "$schema": "https://schemas.wp.org/trunk/theme.json",
  3.     "version": 2,
  4.     "settings": {
  5.         "color": {
  6.             "duotone": [
  7.             {
  8.             "colors": [
  9.             "#450a0a",
  10.             "#fef2f2"
  11.             ],
  12.             "name": "Red",
  13.             "slug": "red"
  14.             },
  15.             {
  16.             "colors": [
  17.             "#172554",
  18.             "#eff6ff"
  19.             ],
  20.             "name": "Blue",
  21.             "slug": "blue"
  22.             }
  23.             ]
  24.         }
  25.     }
  26. }

デュオトーンは現在、CSSカスタムプロパティや参照をサポートしておらず、動的に生成することはできません。この問題を解決するための オープンチケット があります。