分类： 全局设置与样式

欢迎来到本课程，学习如何创建样式变体，或者简称为 theme.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 上提供的主题手册。

欢迎来到本课程，学习如何从头创建模式并在主题中注册模式的基础知识。

模式的来源

WordPress 中可用的模式来源有哪些？当最终用户在页面、文章或模板中使用插入器时，他们将可以访问当前活动块主题中可用的模式，这包括 WordPress 模式目录。他们还可以访问 WordPress 核心模式，如本例所示。

模式目录

现在，让我们使用 theme.json 来列出模式目录中的模式。不要与 patterns 文件夹中列出的模式混淆。这些模式是你自己创建并添加到主题中的，只要它们位于该文件夹中，就会自动注册。但如果我们要进入 theme.json，我们会看到官方 WordPress 模式目录中模式的别名列表，以逗号分隔。

创建模式

现在，让我们从头创建一个模式，以便将其捆绑到主题中。再次强调，你需要在 patterns 文件夹中创建文件。该文件是 PHP 格式，但它包含块标记，并且还有一个文件头，本质上是一个放在文件顶部的注释。

你会在那里找到的最常见的元数据是标题、别名和分类。你需要的块的 HTML 标记代码可以在站点编辑器中生成。进入站点编辑器，你始终可以进入代码编辑器，找到你的代码，然后复制并粘贴到你的模式 PHP 文件中。

下一步

像往常一样，你可以参考 WordPress.org 上的主题手册，请注意，我们将在未来的课程中详细介绍构建和注册模式的更多细节。

欢迎来到关于使用 theme.json 文件的课程，我们将从零开始注册一个自定义模板。

创建自定义模板

构建主题最快的方法是在站点编辑器中工作，并使用像 Create Block Theme 这样的插件，你可以直接将更改推送到主题文件中。

让我们进入站点编辑器。我们将查看默认的 Twenty Twenty-Four 主题中可用的模板。我们可以看到所有这些模板的作者都是 Twenty Twenty-Four。现在我们可以进入代码编辑器查看这些文件。我们在 templates 文件夹中找到了它们全部列在这里。

在 theme.json 中注册自定义模板

所有自定义模板都在 theme.json 中注册。我们有多个页面模板和一个单篇文章模板。我们在这里看到名称与文件名对应。

添加新模板

回到 WordPress 中，我们首先点击“添加新模板”来创建自定义模板。我们将选择“单篇文章”和“所有文章”。接下来，选择一个模式以节省时间，或者你可以从头开始。如果点击保存，模板将保存到数据库中。

如果我们进入模板，我们会看到它在那里，即“单篇文章”。如果我们进入“管理所有模板”，我们会看到它显示为用户更改，这意味着它存在于数据库中，尚未成为主题文件的一部分。

使用 Create Block Theme 插件更新主题文件

为了导出模板，我们需要使用 Create Block Theme 插件。我们从进行更改并将这些更改保存到数据库开始。每次，我们都可以使用 Create Block Theme 插件保存更改，将这些更改从数据库推送到主题文件中。

如果我们进入代码编辑器，我们会看到自定义模板 Single-Post。现在，如果我们愿意，可以将其重命名为更具描述性的名称。我将命名为 No Image。

注册自定义模板

现在你可以使用 theme.json 文件注册新的自定义模板。这使我们能够为模板指定一个自定义名称。我们将名称设为 No Image，与文件名对应，然后给它一个标题。这就是用户在前端看到的内容。

保存这些更改，然后返回站点编辑器并重新加载。现在进入“所有模板”并向下滚动，你会看到 single No Featured Image 模板现在是主题文件的一部分。

下一步

一如既往，你可以参考 WordPress.org 上的主题手册。在下一个模块中，我们将深入探讨创建模板、模板层次结构和模板部分。

欢迎来到关于 WordPress 主题样式的课程。

WordPress 样式层级结构

在最底层，我们有根元素，例如正文文本。下一层是单个元素，例如标题，比如 H1 标签。最后在顶层，我们有区块，例如按钮区块。因此，任何应用于区块级别的样式都将优先于主题中的所有其他样式。

修改主题样式

让我们使用站点编辑器修改主题样式并导出更改。Create Block Theme 插件对于任何主题开发者来说都是一个宝贵的工具。请务必查看初学者学习路径中为开发者准备的入门课程。

我发现使用 Create Block Theme 插件的最佳功能之一是能够将更改直接保存到主题文件中。如果我现在在全局样式中进行更改，例如向自定义调色板添加一种新颜色，我可以搜索一种颜色，或者输入十六进制代码，然后为颜色命名。我将这种颜色命名为紫色，然后点击完成。如果我点击保存，此更改将保存到数据库中。我们会看到 Create Block Theme 插件侧边栏和保存更改选项。这会将更改从数据库中移除，并将其推送到主题文件中。

现在让我们打开 theme.json 文件，以便搜索新的紫色颜色。你可以在 settings 中看到它，作为可供最终用户使用的新颜色。

WordPress 如何利用 JSON 语法在浏览器中生成 CSS

我们将查看默认的 Twenty Twenty-Four 主题。这是一个区块主题，如果我们检查代码并查看，例如 H1 标签，我们在左侧检查它，在右侧会看到生成的 CSS。

WordPress 获取 settings、color、contrast，然后将其应用于这里的 H1 标题。我们现在来看看这在 theme.json 中是如何完成的。在这里你可以看到在 settings 中我们如何拥有 palette 和 contrast 颜色。然后如果我们向下滚动到 styles 属性，我们会看到 contrast 颜色如何应用于文本。

如何在 theme.json 中编写预设

现在让我们通过另一个示例使用 theme.json 配置预设。这里我们有一个入门主题，我们想通过添加调色板来自定义它。进入 settings，将 WordPress 的默认调色板设置为 false，然后添加属性 palette 并开始添加我们的颜色。请注意，这里我们使用通用的命名约定，而不是为颜色命名。

例如，这是一种深绿色，我们没有使用 green 作为名称和别名，而是使用 contrast。这使得将来进行颜色更改更加容易，然后我们在底部的 styles 下看到它被应用。

现在，让我们仔细看看 Twenty Twenty-Four 主题中的一个示例。我们有包含 color、name 和 slug 的 settings 属性。然后为了应用样式，我们将使用这里的格式，其中 feature 是 color，而 slug 例如是 accent-3。

WordPress 通过创建类 has-slug-feature 来生成 CSS。我们可以通过将颜色应用于这里的文本来查看实际效果，然后如果我们检查该段落，我们会看到 WordPress 如何获取预设并创建类 has-accent-3-color。

下一步

像往常一样，你可以参考 WordPress.org 上提供的主题手册，也可以查看样式参考指南，以找到所有可以添加到 theme.json 文件中的可用样式属性。

欢迎来到关于 WordPress 主题配置文件 theme.json 以及其中一些可用的主题设置选项的课程。

主题设置的用途是什么？

首先，查看一下 WordPress 核心自带的 theme.json 文件。所有默认设置都在这里配置。

终端用户可以使用哪些设置？

要回答这个问题，我们需要注意到存在一个加载层级。我们从 WordPress 核心开始。然后向上到主题。接下来，如果有子主题且处于激活状态，则轮到子主题。最后，是用户配置。

用户在区块编辑器或站点编辑器中进行的任何更改并保存后，这些更改将优先于层级中的所有其他设置。

使用 theme.json 控制可用设置

我们将首先在站点编辑器中打开一个模板，然后进入并针对站点和区块进行一些更改。如果你打开样式，例如在颜色下，可以看到文本选项，我们可以为文本应用不同的颜色，这是全局生效的。

如果我们想处理某个区块，先选中该区块，然后进入设置，再进入设置中的样式选项卡。你会看到颜色选项，选择文本，就可以更改文本的颜色，但请注意，我们无法更改链接的颜色。要实现这一点，我们需要在 theme.json 中进行配置。

我们有一个属性 Appearance Tools，默认设置为 False。本质上，Appearance Tools 是一个包罗万象的属性。WordPress 默认将其下的所有属性都设置为 False。如果我们正在开发主题，并且想要启用所有这些属性，只需将 Appearance Tools 设置为 True 即可。但在我们的示例中，我们只处理更改链接颜色的功能。

在 Appearance Tools 下，我们将添加属性 Color，然后输入 Link，并将 False 改为 True，然后保存。现在，如果我们返回 WordPress 并刷新页面，这次我们应该能够更改链接的颜色了。

在全局的颜色设置下，我们现在可以看到链接选项；如果我们选中一个区块并进入区块设置中的颜色选项，现在也有了链接选项。

后续步骤

至此，我们对 WordPress 主题设置的简要概述就结束了。你可以随时参考 WordPress.org 上的主题手册，并查看设置参考，以便更好地了解可以在 theme.json 文件中配置哪些设置。