主页/WEB笔记/WordPress主题配置，按钮悬停阴影咋加，theme.json有啥招

WordPress主题配置，按钮悬停阴影咋加，theme.json有啥招

2,824字
12–18 分钟
in

还在为块主题里给按钮加个悬停阴影挠头？WordPress 6.1 之后，theme.json 这个配置文件已经能直接搞定 box-shadow 了，包括那些 :hover 状态。不用再翻 style.css 写传统 CSS，一切都在 JSON 里安排得明明白白。下面这份实操指南，专治各种悬停阴影加不上的毛病。

目录

块主题时代，样式控制正从 style.css 迁移到 theme.json。WordPress 6.1 起，box-shadow 属性和按钮的伪类（:hover, :focus, :active）都获得了官方支持。这意味着，在 theme.json 的 styles.elements.button 下面直接塞一个 ":hover": { "shadow": "值" } 就能跑起来。但要注意，颜色新语法 rgb(0 0 0 / 0.66) 目前可能翻车，老派 rgba 更稳。另外，想全局覆盖按钮阴影，可以搞自定义变量，然后通过 var() 引用，甚至能加上 !important 来对抗站点编辑器的超高优先级。

啥是 theme.json 阴影配置

theme.json 是 WordPress 块主题的“中央空调”——所有全局样式、区块设置都往里面丢。其中 styles 节点下的 shadow 字段，专门用来扔 CSS 的 box-shadow 值。这个属性从 WP 6.1 开始被收编，写法跟 CSS 完全一致：水平偏移、垂直偏移、模糊半径、扩散半径、颜色。比如 "10px 10px 5px 0px rgba(0,0,0,0.66)"。而按钮的悬停状态，则通过嵌套一个 ":hover" 对象来单独定义。整个结构就像套娃：styles → elements → button → :hover → shadow。

给按钮悬停加阴影的两种方案

方案一：直接硬怼，纯 JSON 配置

这个方法最直观，适合不想折腾额外变量的情况。全程只在 theme.json 里动手脚。

操作流程：

  1. 打开主题根目录下的 theme.json 文件。如果用的是子主题，记得覆盖父主题的对应节点。
  2. 定位到 "styles" 这一层。如果不存在，就手动创建一个。
  3. 在 "styles" 下面添加 "elements" 对象，然后在里面塞入 "button"。
  4. 在 "button" 下面新建一个 ":hover" 键，它的值是一个对象，里面放 "shadow" 属性。
  5. 给 "shadow" 赋一个合法的 box-shadow 值。推荐用 rgba 格式，因为新颜色语法（如 rgb(0 0 0 / 0.66)）在 WP 6.1 里可能不认。
  6. 保存文件，刷新网站前端，鼠标挪到按钮上看看效果。

示例代码：

{
  "version": 2,
  "settings": {},
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "8px 8px 12px 0px rgba(0, 0, 0, 0.4)"
        }
      }
    }
  }
}

细节注意： 如果主题本身对按钮已经定义过 shadow 普通状态，这里只写 :hover 并不会覆盖普通状态，两者独立共存。但要是父主题里用了 !important，子主题再想覆盖就得多加一层 !important 才能压住。另外，整个 theme.json 必须是个合法的 JSON，多了逗号或者少了括号都会让整个站点的样式炸掉——可以用 JSON 校验工具跑一遍再上传。

方案二：自定义变量 + 调用，灵活复用

当同一个阴影值要在多个地方（比如按钮、封面图、导航栏）重复使用时，搞个变量能省下大把复制粘贴时间。先在 settings.custom 里定义好阴影配方，后面通过 var(--wp--custom--xxx) 到处引用。

操作流程：

  1. 打开 theme.json，找到 "settings" 节点。没有就新建一个。
  2. 在 "settings" 下创建 "custom" 对象，然后在里面定义一个 "shadow" 键。值就是你想要的 box-shadow 字符串。注意这里可以结合 CSS 变量，比如引用主题预设的颜色 var(--wp--preset--color--background)。
  3. 继续往下走，进入 "styles" → "elements" → "button"（没有就创建）。
  4. 在 "button" 下添加 "shadow" 属性，值写成 "var(--wp--custom--shadow)"。如果担心被全局样式 UI 覆盖，后面可以加上 " !important"（注意空格）。
  5. 再往 "button" 下插入 ":hover" 对象，同样在里面写 "shadow"，值可以继续用同一个变量，或者换一个专门给悬停准备的变量。
  6. 保存文件，清空缓存，测试。

示例代码：

{
  "version": 2,
  "settings": {
    "custom": {
      "shadowNormal": "4px 4px 0px -2px var(--wp--preset--color--background), 4px 4px var(--wp--preset--color--foreground)",
      "shadowHover": "6px 6px 0px -2px var(--wp--preset--color--background), 6px 6px var(--wp--preset--color--primary)"
    }
  },
  "styles": {
    "elements": {
      "button": {
        "shadow": "var(--wp--custom--shadowNormal) !important",
        ":hover": {
          "shadow": "var(--wp--custom--shadowHover) !important"
        }
      }
    }
  }
}

踩坑提醒： 自定义变量的命名必须全小写，连字符 - 是唯一允许的分隔符。引用时 --wp--custom-- 前缀是固定的，后面接你在 custom 里定义的名字。另外，如果站点编辑器里已经通过全局样式面板调过按钮阴影，那些内联样式优先级可能比 theme.json 高。这时候 !important 像一记重拳，能直接打穿。不过用了 !important 之后，后期再想通过子主题覆盖就更费劲了——除非子主题也用 !important 且顺序靠后。

补充一招：顺便调个悬停轮廓线

WP 6.1 不光支持阴影，连 outline 属性也收了。给按钮悬停加个虚线轮廓，视觉反馈更炸裂。写法跟阴影完全一个套路，把 "shadow" 换成 "outline" 对象就行。

示例代码：

{
  "styles": {
    "elements": {
      "button": {
        "outline": {
          "offset": "2px",
          "width": "2px",
          "style": "dotted",
          "color": "#ff0000"
        },
        ":hover": {
          "outline": {
            "offset": "4px",
            "width": "3px",
            "style": "solid",
            "color": "#00ff00"
          }
        }
      }
    }
  }
}

这段配置会让普通状态按钮带红色虚线外框，鼠标一悬停变成绿色实线且加粗。注意 outline 不像 box-shadow 那样支持逗号分隔的多层值，每个子属性必须单独写开。

最新发布