在 theme.json 的设置文档中，您学习了如何注册自定义预设，例如调色板、字体大小、间距比例等。在样式文档中，您已学习如何通过 theme.json 应用 CSS 样式。
现在是将这两个概念结合起来的时候了，即使用您注册的预设来应用样式。
在样式文档中，您经常会看到使用硬编码 CSS 值的示例。这主要是为了演示目的。您几乎总是使用已注册的预设。这使得从单一位置管理所有内容变得容易得多。
什么是预设？
本质上，预设是您注册以供用户从 UI 中选择的选项——它们映射到 CSS 自定义属性。
例如，当您学习如何注册自定义字体大小时，您将预设添加到 settings.typography.fontSizes。WordPress 会获取这些字体大小中的每一个，并创建一个名为 --wp--preset--font-size–{$slug} 的 CSS 自定义属性。
WordPress 本身、您的主题、插件甚至用户都可以为各种支持的功能注册预设。WordPress 会为所有已注册的预设创建 CSS 自定义属性，名称为 --wp--preset–{$feature}-{$slug}。
让我们看看一个基本的自定义调色板示例，包含三种颜色：
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#89cff0",
"name": "Primary",
"slug": "primary"
}
]
}
}
}这创建了三个 CSS 自定义属性，WordPress 将在编辑器中和前端输出它们：
body {
--wp--preset--color--base: #ffffff;
--wp--preset--color--contrast: #000000;
--wp--preset--color--primary: #89cff0;
}归根结底，预设仅仅是创建界面选项和生成 CSS 自定义属性的标准化方法。
将预设作为样式应用
由于预设是作为设置注册的，因此它们可在用户界面中选择。但是，如果您想将它们用作主题默认设计的一部分，则必须将其作为样式应用。
让我们从上一节的自定义调色板开始构建。假设您想使用已注册的预设来应用这些样式：
- 站点的背景颜色应使用
base预设。 - 站点的主要文本颜色应使用
contrast预设。 - 链接颜色应使用
primary预设。
要在 theme.json 中引用预设，您可以使用一种特殊语法：var:preset|$feature|$slug。因此，此实例中的 base 颜色为 var:preset|color|base。
怀着这个计划并使用本章您已经学到的内容，尝试在 theme.json 中重现这一点。您的代码应如下所示：
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#89cff0",
"name": "Primary",
"slug": "primary"
}
]
}
},
"styles": {
"color": {
"text": "var:preset|color|contrast",
"background": "var:preset|color|base"
},
"elements": {
"link": {
"color": {
"text": "var:preset|color|primary"
}
}
}
}
}如果您在前端或通过编辑器测试您的站点，您应该会看到您的颜色已正确应用：
下一步是确定您想将其他预设应用于哪些元素和块。根据您的主题的复杂性，这可能只是几个自定义颜色到数百行 JSON 代码。实际上，从这里开始做什么完全取决于您。
从技术上讲，您可以使用 CSS 语法 var( --wp--preset--{$feature}--{$slug} ) 引用预设。但是 WordPress var:preset|$feature|$slug 语法效果更好，并且始终在 WordPress 管理界面中正确显示。将 CSS 语法保留在您实际编写 CSS 时使用。
引用自定义预设
在自定义设置文档中，您学习了如何创建“自定义”预设。这些是您可以注册的非常规 CSS 自定义属性，WordPress 会为您生成 CSS 输出。
这些使用与标准预设不同的命名约定。本质上，每当您在代码中使用术语 preset 处理标准预设时，在处理自定义预设时将其替换为 custom。
让我们通过一个示例来了解情况。假设您想在主题设计中注册一些用于处理行高的 CSS 自定义属性。您将此添加到您的 theme.json 文件中：
{
"version": 2,
"settings": {
"custom": {
"lineHeight": {
"xs": "1",
"sm": "1.25",
"md": "1.5",
"lg": "1.75"
}
}
}
}WordPress 将在编辑器中和前端生成这些自定义行高作为 CSS 自定义属性：
body {
--wp--custom--line-height--xs: 1;
--wp--custom--line-height--sm: 1.25;
--wp--custom--line-height--md: 1.5;
--wp--custom--line-height--lg: 1.75;
}要在 theme.json 中将这些作为样式引用，您将使用 var:custom 语法而不是 var:preset。
假设您想将已注册的 md 行高大小作为根/全局级别的默认行高应用。为此，您需要针对 styles.typography.lineHeight。
这是在 theme.json 中的完整代码：
{
"version": 2,
"settings": {
"custom": {
"lineHeight": {
"xs": "1",
"sm": "1.25",
"md": "1.5",
"lg": "1.75"
}
}
},
"styles": {
"typography": {
"lineHeight": "var:custom|line-height|md"
}
}
}当然，您可以使用其他自定义行高预设来对其他元素和块进行样式设置。
可用预设
WordPress 有几个功能可以注册预设。您可以在其相应的设置文档中找到这些预设（具体属性在括号中注明）：