將框陰影添加到WordPress塊和元素

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

最近，Ana Segota 在推特上詢問如何在 WordPress 主題的 theme.json 文件中為按鈕的懸停狀態添加 CSS 盒陰影。 這是因為 WordPress 希望我們開始在 block 主題中使用 theme.json 來設置基本樣式。傳統上，我們在“經典”主題中使用 style.css 來進行所有樣式設置。但隨著最近隨 WordPress 6.1 發布的默認 Twenty Twenty-Three (TT3) 主題將其所有樣式遷移到 theme.json，我們越來越接近能夠在我們自己的主題中做同樣的事情。

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

幸運的是，從 WordPress 6.1 開始，theme.json 支持 box-shadow 屬性。以下是如何在 theme.json 中為特定區塊（例如特色圖片區塊）應用盒陰影的方法：

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

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

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

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

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

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

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

查看完整代碼

{
  "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)"
          }
        }
      }
    }
  }
}

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

此外，outline 屬性也支持 theme.json，可以應用於按鈕及其交互狀態。

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

以上是將框陰影添加到WordPress塊和元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！