主页/WEB笔记/WordPress 6.1 里 theme.json 配置按钮悬停投影，手把手实操来了

WordPress 6.1 里 theme.json 配置按钮悬停投影，手把手实操来了

2,505字
11–16 分钟
in

大伙儿折腾块主题时，总有些样式需求让人头秃。比如给按钮加个鼠标放上去的阴影效果，到底能不能在 theme.json 里搞定？答案是稳了，WordPress 6.1 之后原生支持 box-shadow 属性，连带着 :hover 这些交互状态也能一起配。这篇直接上硬核操作，全程照着做就完事。

目录

啥是theme.json

块主题的样式大总管，所有基础样式都挪到这里管，取代老掉牙的 style.css 硬编码。像布局、色彩、阴影这些都能用 JSON 格式定义，WordPress 自己带的 TT3 主题就是这么干的。

直接配投影

先整最常用的法子，在 theme.json 里给按钮元素加上悬停阴影。操作前确保跑的是 WordPress 6.1 或更高版本，低版本直接劝退。

打开主题根目录下的 theme.json 文件（没有就新建一个）。整个配置结构长这样：

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

保存后刷新页面，鼠标挪到任意按钮上，阴影效果立马现身。这段配置里 shadow 的值完全就是 CSS 里 box-shadow 的写法，支持多组阴影用逗号分隔，比如 "shadow": "2px 2px 4px #000, -2px -2px 4px #fff"。

写配置时容易踩的坑：version 字段必须写 2，老版本 1 不支持这些高级样式。另外 styles.elements.button 路径不能写错，大小写敏感，button 是小写。如果用了子主题，直接在子主题的 theme.json 里覆盖父主题配置，不用改父主题文件，否则更新父主题时自定义样式就丢了。

自定义变量玩法

不想硬编码阴影数值？通过 custom 字段定义变量，然后在多个地方复用，维护起来美滋滋。

第一步在 settings.custom 里声明阴影变量：

{
  "version": 2,
  "settings": {
    "custom": {
      "cardShadow": "0 10px 15px -5px rgba(0, 0, 0, 0.1)"
    }
  }
}

第二步在按钮的悬停状态里引用这个变量：

{
  "version": 2,
  "settings": {
    "custom": {
      "cardShadow": "0 10px 15px -5px rgba(0, 0, 0, 0.1)"
    }
  },
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "var(--wp--custom--cardShadow)"
        }
      }
    }
  }
}

注意引用变量的格式是 var(--wp--custom--xxx)，其中 xxx 对应 custom 里定义的键名。这种方案适合需要统一管理多个阴影的场景，比如卡片、弹窗、按钮都用同一套阴影规范。

实测中发现一个小毛病：新版颜色语法 rgb(0 0 0 / 0.66) 在 shadow 属性里可能不生效，稳妥点还是用 rgba() 老语法。另外有些主题在全局样式界面里会覆盖 theme.json 的配置，这时候可能需要在阴影值后面加上 !important 来强行压住，像这样：

"shadow": "var(--wp--custom--cardShadow) !important"

不过 !important 属于核武器，能不用就不用，优先检查全局样式是否有冲突。

给指定块加投影

有时候只想给某个特定块（比如文章特色图）加阴影，而不是所有按钮。那就把配置塞到 styles.blocks 下面：

{
  "version": 2,
  "styles": {
    "blocks": {
      "core/post-featured-image": {
        "shadow": "10px 10px 20px rgba(0,0,0,0.5)"
      }
    }
  }
}

块名称的规则是 core/xxx，比如按钮块是 core/button，导航块是 core/navigation。如果要给这个块加悬停效果，写法跟元素一样：

{
  "version": 2,
  "styles": {
    "blocks": {
      "core/button": {
        ":hover": {
          "shadow": "5px 5px 10px #00000040"
        }
      }
    }
  }
}

这里有个细节：core/button 块和 elements.button 不是同一个东西。elements.button 影响所有按钮元素（包括嵌套在别的块里的按钮），而 blocks.core/button 只针对独立使用的按钮块。需要哪种效果自己挑。

多状态一起配

除了 :hover，WordPress 6.1 还支持 :focus、:active、:visited。比如给焦点状态也整上阴影：

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "8px 8px 12px rgba(0, 0, 0, 0.3)"
        },
        ":focus": {
          "shadow": "0 0 0 3px rgba(0, 120, 255, 0.5)"
        },
        ":active": {
          "shadow": "2px 2px 4px rgba(0, 0, 0, 0.5)"
        }
      }
    }
  }
}

这样鼠标放上去、键盘聚焦、鼠标按下的瞬间都有不同的阴影反馈，交互感直接拉满。配完记得清一下浏览器缓存，有时候 WordPress 后台的样式缓存会导致新配置不立刻生效。

顺带提一嘴outline

和阴影同期获得支持的还有 outline 属性，也能用在悬停状态上。比如按钮鼠标放上去变成虚线边框：

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "outline": {
            "offset": "4px",
            "width": "2px",
            "style": "dashed",
            "color": "#ff6600"
          }
        }
      }
    }
  }
}

outline 和 shadow 可以同时使用，互不打架。某些设计里用 outline 做焦点指示器比阴影更显眼。

搞定这些配置，块主题的样式自由度直接起飞。记住关键点：WordPress 版本别拉胯，JSON 语法别写错，路径层级别跑偏。阴影不够酷？换数值多试几次，跟调滤镜一样简单。

最新发布