シャドウ設定

settings.shadow プロパティには、設定できる2つの設定があります：

  • defaultPresets: デフォルトの WordPress シャドウプリセットを有効または無効にするためのブール値。デフォルトは true です。
  • presets: テーマやユーザーで使用するためのカスタムシャドウを登録するためのオブジェクトの配列です。

ここでは、theme.json におけるデフォルトのシャドウプロパティを見てみましょう： 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "shadow": {
  5.             "defaultPresets": true,
  6.             "presets": [
  7.             {
  8.             "name": "Natural",
  9.             "slug": "natural",
  10.             "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)"
  11.             },
  12.             {
  13.             "name": "Deep",
  14.             "slug": "deep",
  15.             "shadow": "12px 12px 50px rgba(0, 0, 0, 0.4)"
  16.             },
  17.             {
  18.             "name": "Sharp",
  19.             "slug": "sharp",
  20.             "shadow": "6px 6px 0px rgba(0, 0, 0, 0.2)"
  21.             },
  22.             {
  23.             "name": "Outlined",
  24.             "slug": "outlined",
  25.             "shadow": "6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)"
  26.             },
  27.             {
  28.             "name": "Crisp",
  29.             "slug": "crisp",
  30.             "shadow": "6px 6px 0px rgba(0, 0, 0, 1)"
  31.             }
  32.             ]
  33.         }
  34.     }
  35. }

ご覧のように、WordPress は、ブロックスタイルで直接使用できるいくつかのデフォルトプリセットを登録しており、ユーザーはインターフェースから選択できます：

  • ナチュラル
  • ディープ
  • シャープ
  • アウトライン
  • クリスプ

すべてのプリセットと同様に、WordPress は登録された各シャドウのために CSS カスタムプロパティを生成します。シャドウプリセットは --wp--preset--shadow--{$slug} と名付けられています。

デフォルトのシャドウプリセットのために生成された CSS の例は次のとおりです： 

  1. body {
  2.     --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  3.     --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  4.     --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  5.     --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
  6.     --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
  7. }

コア WordPress シャドウの無効化

コアで利用可能なデフォルトのシャドウは、すべてのテーマのデザインに合わない場合があります。通常、白または非常に薄い灰色の背景を持つテーマでのみうまく機能します。テーマが異なる色を使用している場合、ほぼ常にこれらを削除したいと思うでしょう。

しかし、デフォルトを無効にする他の理由があるかもしれません。たとえば、ユーザーをテーマのために特にデザインしたシャドウのみに制限したい場合や、単にそのデザインが気に入らない場合です。

理由が何であれ、settings.shadow.defaultPresets を false に設定することで削除できます： 

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

カスタムシャドウプリセットの追加

WordPress では、任意の数のカスタムシャドウを登録できます。settings.shadow.presets プロパティを介して追加でき、これはシャドウオブジェクトを格納するための配列です。この配列内の各オブジェクトは、3つの値を含む必要があります：

  • name: 翻訳可能なシャドウの人間が読みやすい名前またはラベル。
  • slug: シャドウの機械が読み取れるスラッグで、関連する CSS カスタムプロパティを構築するために使用されます。
  • shadow: box-shadow CSS プロパティの有効な CSS 値です。

自分自身のシャドウをいくつか登録してみてください。この theme.json コードを使用して開始できます。これはいくつかのシャドウの例を含んでいます： 

  1. {
  2.     "$schema": "https://schemas.wp.org/trunk/theme.json",
  3.     "version": 2,
  4.     "settings": {
  5.         "shadow": {
  6.             "presets": [
  7.             {
  8.             "name": "Small",
  9.             "slug": "sm",
  10.             "shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
  11.             },
  12.             {
  13.             "name": "Medium",
  14.             "slug": "md",
  15.             "shadow": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
  16.             },
  17.             {
  18.             "name": "Large",
  19.             "slug": "lg",
  20.             "shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
  21.             },
  22.             {
  23.             "name": "XL",
  24.             "slug": "xl",
  25.             "shadow": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
  26.             },
  27.             {
  28.             "name": "2XL",
  29.             "slug": "2-xl",
  30.             "shadow": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
  31.             },
  32.             {
  33.             "name": "Inner",
  34.             "slug": "inner",
  35.             "shadow": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
  36.             }
  37.             ]
  38.         }
  39.     }
  40. }

現在、これはユーザーインターフェースのコアボタンブロックのためのシャドウオプションのみを表示しています。このコントロールは、WordPress 管理の 外観 > エディター > スタイル > スタイルブック を介してアクセスできます。そこから、ボタン ブロックを選択し、効果 タブにある シャドウ オプションを見つけます。次のように表示されます：

WordPress スタイルブック画面で強調表示されたボタンブロック。灰色のドロップシャドウがあります。

サードパーティのブロックもシャドウプリセットを利用し、投稿、テンプレート、またはサイトエディターのインターフェースに表示することが可能です。

他のプリセットと同様に、theme.json スタイル でカスタムシャドウ（またはコア WordPress シャドウ）を使用することもできます。

この機能についての詳細は、WordPress 開発者ブログの テーマのための box-shadow 機能の使用 をお読みください。