将框阴影添加到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中文网其他相关文章！