WordPressブロックと要素にボックスシャドウを追加します

WordPress 6.1テーマJSONファイルにボックスシャドウを追加します

最近、Ana SegotaはTwitterで、WordPressテーマのThema.jsonファイルでボタンのホバー状態にCSSボックスシャドウを追加する方法をTwitterで尋ねました。 これは、WordPressがブロックテーマのThemain.jsonの使用を開始して、基本的なスタイルを設定することを望んでいるためです。従来、すべてのスタイルに「クラス」テーマでstyle.cssを使用しています。しかし、WordPress 6.1がすべてのスタイリングをThema.jsonに移行するデフォルトの23（TT3）テーマの最近のリリースにより、私たちは自分のテーマで同じことをすることができるようになります。

ただし、Theme.jsonは、多くのCSSプロパティとセレクターをサポートしていません。たとえば、現在、Theme.jsonでスタイルを使用して

およびその他のプロパティを使用することは不可能です。

perspective-origin幸いなことに、WordPress 6.1から始めて、theme.JSONは

属性をサポートします。特定のブロック（特徴的な画像ブロックなど）にthema.jsonにボックスシャドーイングを適用する方法は次のとおりです。

box-shadow新しい色の構文

はまだサポートされていないようです。

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "blocks": {
      "core/post-featured-image": {
        "shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
      }
    }
  }
}

同様に、ボックスシャドウを単一の「要素」（ボタンなど）に適用できます。ボタン自体はブロックですが、別のブロックにネストすることもできます。すべてのボタンのボックスシャドウにグローバルに適用するには、Theme.jsonで以下を実行できます。 rgb(0 0 0 / 0.66)

anaボタンの

ステータスに影を追加したい。ありがたいことに、WordPress 6.1は、擬似クラスを使用したボタンやリンクなどの特定の要素のインタラクティブな状態のスタイルもサポートしています（

、

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

、

、:hoverを含む）。 :hover :focus :active親のテーマを使用する場合、子テーマのテーマスタイルをオーバーライドできます。次のコードは、TT3のボタンスタイルを完全にカバーしています。 :visited

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
        }
      }
    }
  }
}

完全なコードを表示

別の方法は、PIXLテーマで定義されている

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--tertiary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        "outline": {
          "offset": "3px",
          "width": "3px",
          "style": "dashed",
          "color": "red"
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        },
        "shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          },
          "outline": {
            "offset": "3px",
            "width": "3px",
            "style": "solid",
            "color": "blue"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      }
    }
  }
}

属性など、カスタムスタイルを使用することです。

さらに、

属性はThemas.jsonもサポートし、ボタンとそれらの相互作用状態に適用できます。

全体として、WordPress 6.1のブロックテーマのボックスシャドウを設定するには多くの方法があります。これには、公式にサポートされている設定、カスタムスタイルの方法、およびサブテーマでスタイルを上書きする方法が含まれます。 詳細については、記事にリストされているリンクを参照してください。 .settings.custom.shadow

outline

以上がWordPressブロックと要素にボックスシャドウを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。