欢迎来到本课程,学习如何创建样式变体,或者简称为 theme.json 变体。
通过本课程,我们将:
- 定义并描述样式变体,
- 区分主题 JSON 文件和样式变体 JSON 文件,以及
- 区分子主题和样式变体。
什么是样式变体?
样式变体本质上是 theme.json 的替代版本,你可以随主题一起提供。它们是自定义命名的 JSON 文件,存储在主题的 styles 文件夹中。
任何可以添加到 theme.json 的设置或样式,也可以添加到你的样式变体 JSON 文件中。这让你的用户可以选择他们想要在网站上使用的变体。从某种程度上说,它们是你主题的一种“皮肤”,反映了情绪和语气。这是一种以独特方式区分你的网站的方法。
你可以为你的主题捆绑这些替代设计,让用户决定哪种最适合他们的网站。在站点编辑器中,用户可以进入样式,为他们的网站选择不同的样式组合。
在默认的 Twenty Twenty-Four 主题中,用户可以选择 Ember 变体。这意味着在全局样式中,他们有一个不同的调色板,并且有这四种颜色可用。在渐变选项卡中,他们有一组完全不同的渐变以及双色调橙色和白色。
如果我们查看主题文件,会发现每个变体都有自己的独立 JSON 文件。需要注意的是,当我们创建样式变体时,属性 duotone、gradients 和/或 palette 会被完全替换。我们不仅仅是交换单个颜色。
区分主题 JSON 文件和样式变体 JSON 文件
样式变体的一个显著区别是,我们在版本下方添加了标题。我们的示例是 Ember。再次注意,当用户选择 Ember 样式变体时,theme.json 中的双色调在这里不可用。
区分子主题和样式变体
首先,相似之处在于它们都希望覆盖父主题的 theme.json 文件,但方式不同。如果你有一个子主题并且它处于激活状态,同时添加了一个 theme.json 文件,那么设置会覆盖父主题的设置。
在给定主题中,样式变体具有相同的能力来覆盖 theme.json 文件。然而,当用户选择一个变体时,这些更改被视为用户自定义,并存储在数据库中。
后续步骤
如果你想了解更多关于样式变体的信息,请参考 WordPress.org 上提供的主题手册。