与全球设置和样式文档中的大多数内容不同,样式变体不是您在 theme.json 中定义的内容。相反,它们是您可以提供给用户的现有 theme.json 文件的“变体”。

此功能的更准确名称可能是 全局设置和样式变体。或者简单地称为 theme.json 变体。

什么是样式变体?

样式变体本质上是您可以随主题一起分发的 theme.json 的替代版本。它们是自定义命名的 JSON 文件,存储在主题的 /styles 文件夹中。您可以添加到 theme.json 的任何 设置 或 样式 也可以添加到您的样式变体 JSON 文件中。

这让您的用户可以选择并决定要在其网站上使用哪种变体。在某种程度上,它们是主题的“皮肤”。

例如,假设您创建了一个餐厅主题,并保持颜色和排版相当基本,以便涵盖许多不同的餐厅网站设计。再假设您想提供更多变化,对初始设计进行变体。您可以创建一个更侧重于海鲜餐厅的样式变体,使用有趣的字体和海洋导向的颜色调色板。或者您可能想为运行该主题的咖啡店营造氛围。

这就是样式变体真正大放异彩的地方。您可以将主题的这些替代设计打包在一起,让用户决定哪种最适合他们的网站。

以下是默认 Twenty Twenty-Three 主题中捆绑的样式变体的概览:

WordPress 站点编辑器 > 样式子屏幕,显示样式变体的网格,预览面板中有一个红色的。

当用户选择样式变体时,JSON 数据会迁移到网站的数据库并存储为用户自定义。这允许数据覆盖主题的主要 theme.json 设置和样式。

添加自定义样式变体

如果您已经了解 theme.json 的工作原理,那么样式变体功能相对简单,但存在一些差异。

theme.json 和样式变体之间的第一个区别是它们的名称和在主题文件夹结构中的位置。theme.json 位于主题文件夹的根目录,并被视为默认变体。但自定义变体必须具有唯一的文件名,并放置在 /styles 文件夹中。

让我们假设您构建了本文档中提到的那个餐厅主题。现在您想添加几个名为 Swashbuckler(用于海鲜设计)和 Latte(用于咖啡店设计)的变体。您的主题文件将按以下方式组织:

/your-theme-folder
	/styles
		/latte.json
		/swashbuckler.json
	/theme.json

样式变体仅仅是 theme.json 的变体,因此您可以随时访问 theme.json 规范中的所有功能。

theme.json 和样式变体之间的第二个区别是变体标题。您可以通过向自定义 JSON 文件添加 title 属性来配置此内容。

以上述 Latte 变体为例,您将打开 /styles/latte.json 文件并添加它,如下面的代码片段所示:

{
	"version": 2,
	"title": "Latte",
	"settings": {},
	"styles": {}
}

title 字段用于在用户界面中表示您的变体。它不是必需字段(WordPress 将回退到您的变体),但它确实能提供更好的用户体验。

样式变体与子主题

如果您熟悉 子主题 的概念(在 高级主题 文档中涵盖),您可能想知道它们与样式变体之间的区别。

最明显的区别是,样式变体仅限于单个 JSON 文件,该文件覆盖主要的 theme.json,而子主题可以覆盖其父主题的 anything。因此,最好看看它们相似的唯一领域:JSON 文件本身。

在子主题中,theme.json 简单地覆盖其父主题的 theme.json 文件。而在样式变体中——这是发生重大区别的地方——变体的 JSON 文件覆盖 theme.json 文件,并且其数据保存到数据库。

一旦用户选择主题的样式变体,变体 JSON 文件中的所有内容都视为用户自定义。本质上,WordPress 以与用户仅从界面设计颜色、排版、间距等方式相同的方式存储该初始 数据。这是一个重要的区别,因为它意味着当您在未来主题版本中更新样式变体时,如果用户已经保存了样式变体,他们将不会收到这些更改。

用户可以切换到变体并切换回他们正在使用的变体以获取更新。

样式变体可以是添加到主题的绝佳功能,但它们有特定的用例。有时子主题更有意义。