theme.json 中的 styles 属性允许您在全局级别、单个元素和单个块级别配置设置。WordPress 支持 CSS 规范的标准子集,但也允许您直接在 theme.json 文件中添加自定义 CSS。

在可能的情况下,建议通过 styles 属性添加主题样式,至少对于标准的 WordPress 功能也是如此。这使得用户可以通过外观 > 编辑器 > 样式进行自定义,而无需担心 CSS 特异性问题。

本文档包含有关可用样式属性以及如何通过 theme.json 文件将样式应用于主题的链接。

styles 属性

styles 是 theme.json 中的顶级属性,您可以定义多个嵌套属性。其中一些嵌套属性本身具有多个级别的嵌套。

以下是在 theme.json 文件的上下文中对这些属性的总体概述:

{
	"version": 2,
	"styles": {
		"elements": {},
		"blocks": {}
	}
}

以下是在自定义 theme.json 文件中 styles 属性可能看起来的样子。这应该让您对它的结构有一个概念,但您将在阅读本手册的这一部分时更深入地了解它:

{
	"version": 2,
	"styles": {
		"color": {
			"text": "#000000",
			"background": "#ffffff"
		},
		"elements": {
			"button": {
				"color": {
					"text": "#ffffff",
					"background": "#000000"
				}
			}
		},
		"blocks": {
			"core/code": {
				"color": {
					"text": "#ffffff",
					"background": "#000000"
				}
			}
		}
	}
}

样式文档

使用以下链接探索通过 theme.json 文件配置样式:

  • 应用样式: 如何使用标准 JSON 语法将自定义样式应用于主题。
  • 使用预设: 如何使用您在样式中通过 settings 属性配置的预设。
  • 样式参考: 可用于 theme.json 的可用样式属性的参考指南。