WordPress 6.1 主題 JSON 文件中添加盒陰影

最近，Ana Segota 在推特上詢問(wèn)如何在 WordPress 主題的 theme.json 文件中為按鈕的懸停狀態(tài)添加 CSS 盒陰影。 這是因?yàn)?WordPress 希望我們開(kāi)始在 block 主題中使用 theme.json 來(lái)設(shè)置基本樣式。傳統(tǒng)上，我們?cè)凇敖?jīng)典”主題中使用 style.css 來(lái)進(jìn)行所有樣式設(shè)置。但隨著最近隨 WordPress 6.1 發(fā)布的默認(rèn) Twenty Twenty-Three (TT3) 主題將其所有樣式遷移到 theme.json，我們?cè)絹?lái)越接近能夠在我們自己的主題中做同樣的事情。

然而，theme.json 仍然不支持許多 CSS 屬性和選擇器。例如，目前還無(wú)法在 theme.json 中使用 perspective-origin 等屬性進(jìn)行樣式設(shè)置。

幸運(yùn)的是，從 WordPress 6.1 開(kāi)始，theme.json 支持 box-shadow 屬性。以下是如何在 theme.json 中為特定區(qū)塊（例如特色圖片區(qū)塊）應(yīng)用盒陰影的方法：

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

新的顏色語(yǔ)法 rgb(0 0 0 / 0.66) 目前似乎還不支持。

同樣，我們也可以為單個(gè)“元素”（例如按鈕）應(yīng)用盒陰影。按鈕本身就是一個(gè)區(qū)塊，但它也可以嵌套在另一個(gè)區(qū)塊中。要全局應(yīng)用於所有按鈕的盒陰影，可以在 theme.json 中執(zhí)行以下操作：

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

Ana 希望將陰影添加到按鈕的 :hover 狀態(tài)。值得慶幸的是，WordPress 6.1 也支持使用偽類（包括 :hover、:focus、:active 和 :visited）為某些元素（如按鈕和鏈接）的交互狀態(tài)設(shè)置樣式。

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

如果使用父主題，則可以在子主題中覆蓋主題樣式。以下代碼完全覆蓋了 TT3 的按鈕樣式：

{
  "version": 2,
  "settings": {},
  // ...其他設(shè)置
  "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)"
          }
        }
      }
    }
  }
}

另一種方法是使用自定義樣式，例如 Pixl 主題中定義的 .settings.custom.shadow 屬性。

此外，outline 屬性也支持 theme.json，可以應(yīng)用於按鈕及其交互狀態(tài)。

總而言之，WordPress 6.1 中 block 主題的盒陰影設(shè)置方法有很多，包括官方支持的設(shè)置方法、自定義樣式方法以及在子主題中覆蓋樣式的方法。 更多信息可以參考文中列出的鏈接。

以上是將框陰影添加到WordPress塊和元素的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！