WordPress 主题开发：styles 属性完全指南

发布于 作者:

通过 theme.json 的 styles 属性，你可以像搭积木一样控制整个网站的视觉风格——从全局颜色到每个按钮的悬停效果。这篇文章用直白的方式，带你搞懂这个核心配置工具。

为什么需要 styles 属性？

WordPress 主题开发经历了好几个阶段，从早的 functions.php 塞满样式，到后来用 style.css 写满选择器。theme.json 的出现，特别是里面的 styles 属性，把样式管理提升了一个台阶。

它大的价值是：让你的样式可以被用户在站点编辑器里调整。用户在“外观 > 编辑器 > 样式”里修改颜色、字体时，不会因为你用了硬编码的 CSS 而失效。这背后是 WordPress 的样式引擎在帮你处理优先级问题。

说白了：用 styles 属性，你的主题就真正“活”起来了。

基础结构长什么样？

任何主题的 theme.json，styles 都是的配置项。看看骨架：

json

{
    "version": 2,
    "styles": {
        // 全局样式直接写在这
        "color": {},
        "typography": {},
        "spacing": {},
        // 元素级别样式
        "elements": {},
        // 块级别样式
        "blocks": {}
    }
}

version: 2 是目前的主流版本，WordPress 5.8 以后都支持。

三个层级，逐级覆盖

1. 全局样式：站点的默认脸面

放在 styles 根目录下的配置，会应用到整个网站，除非被更具体的规则覆盖。

json

{
    "version": 2,
    "styles": {
        "color": {
            "text": "#1a1a1a",
            "background": "#fafafa"
        },
        "typography": {
            "fontSize": "18px",
            "fontFamily": "Georgia, serif"
        }
    }
}

这段配置告诉 WordPress：全站文字用深灰色，背景浅灰色，字号 18 像素，字体用 Georgia。用户打开编辑器，看到的默认样子就是它。

2. 元素样式：专门针对 HTML 标签

elements 针对的是 HTML 元素——链接、按钮、标题、列表等。比如你想让所有按钮变圆角：

json

{
    "version": 2,
    "styles": {
        "elements": {
            "button": {
                "border": {
                    "radius": "24px"
                },
                "color": {
                    "background": "#0073aa",
                    "text": "#ffffff"
                }
            }
        }
    }
}

按钮在 WordPress 里是经典元素，你的主题如果有大量按钮，全局定义一次就够了。其他可用的元素还有：link（链接）、h1 到 h6（标题）、heading（所有标题的统称）。

注意：heading 是“所有标题的父级”，如果你设置了 heading 又设置了 h1，h1 会覆盖 heading 的规则——更具体的优先。

3. 块样式：精确到每个区块

blocks 让你给特定区块写样式，键名是区块的命名空间，比如 core/paragraph 表示段落块，core/group 表示组块。

json

{
    "version": 2,
    "styles": {
        "blocks": {
            "core/code": {
                "color": {
                    "background": "#2d2d2d",
                    "text": "#e0e0e0"
                },
                "typography": {
                    "fontFamily": "monospace",
                    "fontSize": "14px"
                }
            },
            "core/quote": {
                "color": {
                    "background": "#f0f4f8"
                },
                "border": {
                    "left": {
                        "color": "#0066cc",
                        "width": "4px",
                        "style": "solid"
                    }
                }
            }
        }
    }
}

上面这段，让所有代码块变成深色背景、等宽字体，引用块加了个蓝色左边框。用户插入这些区块时，不用任何额外操作，样式自动生效。

优先级规则：谁说了算？

三层样式遇到冲突时，WordPress 遵守“具体优先”原则：

块样式 > 元素样式 > 全局样式

举个例子，你全局把文字设成红色，但 core/paragraph 设成蓝色，段落显示蓝色。按钮元素设成绿色，但 core/button 块设成橙色，块级覆盖元素级。

这个特性相当实用。你可以让大部分内容保持统一，同时给特定区块定制样式，而不需要写一行 CSS。

可用的样式属性有哪些？

WordPress 支持 CSS 规范的一个子集，但已经覆盖了日常开发的大部分需求。常用的有这些分类：

颜色控制

  • color.text：文字颜色
  • color.background：背景色
  • color.gradient：渐变背景

文字排版

  • typography.fontSize：字号
  • typography.fontFamily：字体族
  • typography.fontWeight：字重（粗体）
  • typography.lineHeight：行高
  • typography.textDecoration：下划线、删除线等
  • typography.textTransform：大小写转换

间距控制

  • spacing.margin：外边距
  • spacing.padding：内边距
  • spacing.blockGap：子元素间距（专用于组块、列块）

边框控制

  • border.color
  • border.width
  • border.style（solid、dashed、dotted）
  • border.radius：圆角

尺寸控制

  • dimensions.minHeight：小高度（常用于封面块、组块）

完整列表可以查官方样式参考，但这些已经能覆盖 90% 的日常需求了。

结合预设值使用

settings 里定义的预设（presets），可以在 styles 里直接引用。这样用户切换配色方案时，所有引用预设的地方自动更新。

json

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#0066cc",
                    "name": "主色"
                }
            ]
        }
    },
    "styles": {
        "blocks": {
            "core/button": {
                "color": {
                    "background": "var(--wp--preset--color--primary)"
                }
            }
        }
    }
}

用 var(--wp--preset--color--primary) 引用预设值，而不是写死 #0066cc。如果你的主题需要对外销售或分发，这几乎是必须的。

实战小技巧

  1. 调试用哪个选择器？ 打开浏览器的开发者工具，看元素上终应用的样式。WordPress 会给每个规则生成类似 .wp-elements-xxx 的类名，可以看到具体来自哪个配置。
  2. 样式覆盖不生效？ 八成是优先级问题。检查是不是有更具体的规则覆盖了你写的，或者用户自定义样式优先于主题默认值。
  3. 合理搭配 CSS 使用：styles 处理结构性样式，那些复杂的动画、伪类（hover、focus）目前仍需要自定义 CSS。可以用 wp_add_inline_style() 补充，或直接在主题的 style.css 里写。
  4. 注意数值单位：fontSize 可以用 px、rem、em，spacing 可以用 px、rem、%、vh 等，和普通 CSS 一样。

总结

styles 属性是 WordPress 现代主题开发的核心工具。它用结构化的 JSON 代替了散乱的 CSS 文件，让样式可配置、可继承、可覆盖。

记住这三句话就够了：

  • 全局样式定义基本调性
  • 元素样式统一标签外观
  • 块样式精确控制每个区块

掌握它，你就掌握了 WordPress 全站编辑时代的主题开发密码。