スタイルのバリエーションとは何ですか？

スタイルのバリエーションは、基本的にテーマと一緒に出荷できるtheme.jsonの代替バージョンです。これらはカスタム名のJSONファイルで、テーマの/stylesフォルダーに保存されます。theme.jsonに追加できる任意の設定やスタイルも、スタイルバリエーションのJSONファイルに追加できます。

これにより、ユーザーは自分のサイトで使用したいバリエーションを選択できます。ある意味で、これらはテーマの「スキン」です。

例えば、レストランテーマを作成し、色やタイポグラフィをかなり基本的なものに保って、さまざまなレストランサイトデザインをカバーしているとします。さらに、初期デザインに対してより多様性を提供したいと仮定します。シーフードレストラン向けに楽しいフォントと海をテーマにしたカラーパレットを持つスタイルバリエーションを作成できます。または、あなたのテーマを使用しているコーヒーショップの雰囲気を設定したいかもしれません。

ここでスタイルのバリエーションが本当に輝くことができます。これらの代替デザインをテーマにバンドルし、ユーザーが自分のサイトに最適なオプションを決定できるようにします。

以下は、デフォルトのTwenty Twenty-Threeテーマにバンドルされているスタイルのバリエーションの一例です：

WordPressサイトエディター > スタイルサブスクリーン、プレビューウィンドウに赤いスタイルバリエーションのグリッドを表示しています。

ユーザーがスタイルバリエーションを選択すると、JSONデータがサイトのデータベースに移行され、ユーザーのカスタマイズとして保存されます。これにより、データがテーマの主要なtheme.json設定やスタイルを上書きすることができます。

カスタムスタイルバリエーションの追加

スタイルのバリエーション機能は、theme.jsonの動作をすでに理解している場合は比較的簡単ですが、いくつかの違いがあります。 

  2. この文書で前述のレストランテーマを構築したと仮定しましょう。次に、Swashbuckler（シーフードデザイン用）とLatte（コーヒーショップデザイン用）という名前のいくつかのバリエーションを追加したいと考えています。これがテーマファイルの整理方法です：  
  5. ``````bash
  6. /your-theme-folder
  7.     /styles
  8.         /latte.json
  9.         /swashbuckler.json
  10.     /theme.json
  11. `

スタイルバリエーションは単にtheme.jsonのバリエーションであるため、theme.json仕様のすべてにフルアクセスできます。 

  2. 上記のLatteバリエーションの例を基に、`````/styles/latte.json`````ファイルを開いて、次のコードスニペットのように追加します：  
  5. ``````bash
  6. {
  7.     "version": 2,
  8.     "title": "Latte",
  9.     "settings": {},
  10.     "styles": {}
  11. }
  12. `

titleフィールドは、ユーザーインターフェースでバリエーションを表すために使用されます。これは必須フィールドではありません（WordPressはバリエーションにフォールバックします）が、より良いユーザーエクスペリエンスを提供します。

スタイルバリエーションと子テーマの違い

もしあなたが子テーマの概念に精通しているなら、これは高度なトピックのドキュメントで説明されていますが、スタイルバリエーションとの違いが何かを疑問に思うかもしれません。

最も明白な違いは、スタイルバリエーションが主要なtheme.jsonを上書きする単一のJSONファイルに制限されているのに対し、子テーマは親テーマから何でも上書きできることです。したがって、彼らが似ている唯一の領域を見てみるのが良いでしょう：JSONファイル自体です。

子テーマでは、theme.jsonは単に親のtheme.jsonファイルを上書きします。スタイルバリエーションでは、ここで大きな違いが生じます。バリエーションのJSONファイルはtheme.jsonファイルを上書きし、そのデータはデータベースに保存されます。

ユーザーがテーマのスタイルバリエーションを選択すると、バリエーションのJSONファイル内のすべてがユーザーのカスタマイズとして扱われます。基本的に、WordPressはその初期データを、ユーザーがインターフェースから色、タイポグラフィ、間隔などを単にデザインしたかのように保存します。これは重要な区別であり、将来のテーマリリースでスタイルバリエーションを更新した場合、ユーザーがすでにスタイルバリエーションを保存していると、その変更を受け取らないことを意味します。

ユーザーがバリエーションを切り替え、使用していたものに戻って更新を取得ることは可能です。

スタイルバリエーションはテーマに追加する素晴らしい機能ですが、特定の使用ケースがあります。時には子テーマの方が理にかなっていることもあります。