theme.json 是一个配置文件,允许您定义主题的全局设置、样式等。该文件适用于块主题和经典主题。

在构建块主题时,theme.json可能是整个主题中最重要的文件。从某种意义上说,它是向下渗透到每个其他组件的基础部分。这就是为什么这一章是手册中最详尽的章节之一。

您可以使用 theme.json 完成的一些操作(包括但不限于):

  • 启用用户界面中的块功能,例如颜色、排版和间距控件。
  • 配置自定义调色板、双色滤镜和背景渐变。
  • 定义排版功能,如字体家族、捆绑网络字体等。
  • 添加您自己的 CSS 自定义属性。
  • 通过核心样式系统调整整体设计。

您在 theme.json 中配置的设置和样式最终会反映在站点的前端和 WordPress 内置编辑器上。如图所示,您可以在管理后台的外观 > 编辑器屏幕中看到默认 Twenty Twenty-Three 主题的一个变体:

WordPress 站点编辑器,右侧边栏打开样式面板。

该设计的每个部分都在 theme.json 中直接处理,用户可以通过内置的样式界面进一步自定义它。

theme.json 代表了您可以称之为“通用语言”的东西,它允许 WordPress、您的主题、插件和用户有效地进行沟通。因为它构建在标准化系统之上,每个组件都在使整个站点生动化方面发挥作用。

theme.json 结构

正如本代码片段所示,theme.json 文件可以分解为几个顶级部分:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {},
	"styles": {},
	"customTemplates": {},
	"templateParts": {},
	"patterns": []
}

在本章中,您将了解这些属性中的每一个以及如何使用它们将您想象中的设计转化为可工作的主题。

直接在您的主题中自定义 theme.json 文件需要您对 JSON 代码有一定的熟悉度。您不需要成为专家(复制和粘贴可以让您走得很远),但拥有一些关于如何格式化 JSON 的基础知识肯定会有所帮助。

您还应该对 CSS 有基本的了解。虽然您不需要直接在 theme.json 中编写 CSS 代码,但许多功能都映射到 CSS 属性和值。了解 theme.json 设置和样式与其 CSS 对应项之间的关系将有助于您长远发展。

有关 JSON 和 CSS 的更多信息,请阅读:

theme.json 属性

正如上一节所示,theme.json 文件具有几个顶级属性。其中一些仅接受单个值,但大多数具有带有自己值的嵌套子属性。

这些是您可以设置在 theme.json 中的当前顶级属性:

  • version: 您正在构建的 theme.json 架构版本。
  • $schema: 用于定义支持的 JSON 架构,这将与许多代码编辑器集成,为您提供实时提示和错误报告。
  • settings: 用于定义哪些块控件出现、配置预设等。
  • styles: 用于将颜色、字体大小、自定义 CSS 和其他样式应用于网站和块。
  • customTemplates: 元数据,用于在您的主题的 /templates 文件夹中定义的自定义模板。
  • templateParts: 元数据,用于在您的主题的 /parts 文件夹中定义的模板部分。
  • patterns: 从模式目录注册的图案斜杠数组。

添加版本

至少,您应该在 theme.json 文件中设置 version 属性。这应该是一个整数,与用于读取和理解您的 theme.json 代码的 API 版本匹配。

API 当前处于版本 2。您可以通过theme.json Living Reference文档始终找到最新的版本。

您的 theme.json 文件应该具有的最少代码是:

{
	"version": 2
}

本手册中的所有 theme.json 代码示例都包括 version 属性,因为它应该始终设置。

从技术上讲,您可以省略版本,但 WordPress 将读取您的代码,就像它在 API 的 1 版本上一样。使用过时的版本可能意味着您的代码将无效,至少在手册中这样记录。

您应该始终努力跟上最新的 API 版本,并确保将其设置在您的 theme.json 文件中。

添加 JSON 架构

您可以添加到 theme.json 的可选属性是 JSON 架构的 URL。这对于使用任何现代代码编辑器特别有帮助。添加 $schema 属性将在许多代码编辑器中为您提供实时提示和错误报告,并且非常推荐。

要支持 JSON 架构,请将其添加到您的 theme.json 文件中:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2
}

再次,这从技术上讲是一个可选属性。但很少有一个很好的理由将其省略。包含它是良好的开发实践。

添加设置、样式等

通过 theme.json 可用的其他属性需要比本简介中涵盖的更深入的文档。它们在手册的这一章中都有自己的页面(有些有多个子页面)。

现在是真正深入了解 theme.json 的时候了。您可以按照自己喜欢的方式采取这些下一步文档步骤,但它们按推荐阅读顺序列出:

  • 设置: 有关您可以通过 theme.json 配置的每个标准和自定义设置的文档。
  • 样式: 学习如何使用标准设计系统通过 theme.json 应用样式,这也与用户界面集成。
  • 自定义模板: 如何为您的主题注册自定义帖子、页面和 CPT(自定义帖子类型)模板。
  • 模板部分: 如何注册可以在您的主题中重复使用的自定义模板部分。
  • 模式: 如何将官方模式存储库中的模式与您的主题捆绑在一起。
  • 样式变体: 有关创建自定义 theme.json 样式变体的文档,为您的用户提供可供选择的其他设计。