WordPress 主题边框设置完全指南

发布于 作者:

WordPress 的 theme.json 文件是主题开发的“控制中心”。其中 settings.border 这部分，直接决定了你的用户在编辑器里能不能给区块加边框、调圆角。很多初学者容易搞混：这里不是让你直接写边框样式的，而是控制“开关”——哪些边框功能显示给用户，哪些藏起来。理解了这个，你才算真正掌握了 WordPress 区块主题的定制逻辑。这篇文章就是帮你把这个逻辑理清楚，顺便把那些容易踩的坑，比如按钮圆角关不掉、颜色宽度样式相互绑定，都给你说明白。

一、核心认知：开关，不是样式

settings.border 控制的是用户界面（UI）中边框功能是否可用，而不是边框本身的颜色或粗细。

你在 theme.json 里写的是：

json

"border": {
    "color": true,   // 用户能看到颜色选择器
    "width": true    // 用户能看到宽度输入框
}

它只决定“能不能用”，不决定“长什么样”。具体的样式（比如边框颜色是红色、宽度是 2px）是在 styles 部分或用户操作中设置的。

二、四个核心开关

settings.border 下可以配置四个属性，每个都是 true（开启）或 false（关闭）：

属性控制内容说明
color边框颜色选择器开启后，用户可以从调色板选颜色
radius圆角控制控制边框圆角大小
style边框样式选择器用户可选 solid（实线）、dashed（虚线）、dotted（点线）
width边框宽度输入框用户可输入具体像素值

默认情况下，这四个属性都是 false：

json

{
    "version": 2,
    "settings": {
        "border": {
            "color": false,
            "radius": false,
            "style": false,
            "width": false
        }
    }
}

注意：version 必须与你的 WordPress 版本匹配，当前推荐使用 2 或 3。

三、关键特性：三属性联动

从 WordPress 6.3 开始，color、style 和 width 这三个属性是绑定在一起的。

你只要把其中任意一个设为 true，另外两个也会自动出现在用户界面中。例如，你只想让用户调边框颜色，代码这样写：

json

"border": {
    "color": true,
    "style": false,   // 想关掉，但关不掉
    "width": false    // 想关掉，但关不掉
}

结果用户还是会看到样式和宽度的选项。这是 WordPress 的核心机制，不是 bug。

四、一个常见例外：Button 块

设置 radius 为 false，对大部分块有效，但Button（按钮）块是个例外。

不管你把 settings.border.radius 设成什么，Button 块的圆角控制永远显示在编辑器里。这是 WordPress 的设计决定，因为按钮圆角太常用，直接写死在了核心代码里。

五、简单示例

一个典型的 theme.json 配置：

json

{
    "version": 2,
    "settings": {
        "border": {
            "color": true,
            "radius": true,
            "style": false,
            "width": true
        }
    }
}

用户会看到颜色、圆角、宽度三个选项，样式（solid/dashed/dotted）被隐藏了。但因为“三属性联动”，如果 color 和 width 开着，style 其实也会被带出来。

六、进阶：设置默认边框值

在 theme.json 的 styles 部分，可以直接给某个块设定默认边框：

json

{
    "version": 2,
    "styles": {
        "blocks": {
            "core/table": {
                "border": {
                    "width": "1px",
                    "color": "#b2b2b2"
                }
            }
        }
    }
}

这意味着所有表格默认带 1px 灰色边框，用户无需额外操作。注意：样式设置需配合 settings 中的开关才能让用户在编辑器中看到并修改。

七、总结

  1. settings.border 是开关，不是样式。 只控制用户能否看到边框功能。
  2. 三个属性会联动。 color、style、width 开一个等于开三个。
  3. Button 块特殊。 圆角控制无法被完全禁用。
  4. 配合 styles 使用。 settings 开权限，styles 设默认值，两者结合才能发挥 theme.json 的全部威力。
  5. 建议的实践： 不需要边框功能时，保持所有值为 false；需要时直接启用，然后通过 styles 设置主题默认值，给用户一个良好的初始体验。