欢迎学习WordPress主题样式课程。
课程内容
通过本课程，您将：
- 探索样式层级结构
- 使用站点编辑器修改主题样式并导出变更
- 理解WordPress如何用JSON语法在浏览器中生成CSS
- 通过settings属性配置预设，并在theme.json的styles属性中应用
WordPress样式层级
最底层是根元素（如正文文本），上一级是独立元素（如标题中的H1标签），最顶层是区块（如按钮区块）。区块级别的样式将优先于主题中所有其他样式。
修改主题样式
让我们使用站点编辑器修改主题样式并导出变更。Create Block Theme插件是主题开发者的必备工具，建议开发者先学习初学者学习路径中的入门课程。
该插件最实用的功能是能将变更直接保存到主题文件。例如在全局样式中添加新颜色到自定义调色板：可以搜索颜色或输入十六进制代码，命名颜色（如”purple”）后保存。通过插件侧边栏的”保存变更”选项，这些修改会从数据库转移到主题文件。
现在我们打开theme.json文件，可以看到新增的紫色已出现在settings中，可供最终用户使用。
WordPress如何用JSON生成CSS
以Twenty Twenty-Four主题为例，检查H1标签时会发现：WordPress提取settings中的颜色和对比度设置，将其应用到H1标题。在theme.json文件中可以看到调色板和对比色配置，以及在styles属性中对比色如何被应用到文本。
在theme.json中配置预设
现在我们用另一个示例演示配置预设：首先在settings中将默认调色板设为false，添加palette属性并设置颜色。建议使用通用命名（如”contrast”而非具体颜色名），这样未来调整颜色会更方便。颜色配置会立即反映在styles部分。
再看Twenty Twenty-Four主题的示例：settings中定义颜色名称和slug，styles中通过”feature: color”格式引用（如accent-3）。WordPress会生成has-slug-feature类CSS，比如应用颜色到文本时会创建has-accent-3-color类。
后续步骤
您可以参考WordPress.org上的主题手册，或查阅样式参考指南获取theme.json文件支持的所有样式属性。