WordPress theme.json 文件综合指南

对您的 WordPress 网站进行自定义样式更改通常意味着手动编辑多个文件。 另外，如果您切换主题，则必须从头开始重新配置所有这些设置。 这可能是一个耗时的过程。

幸运的是，当 WordPress 推出 5.8 版本时，它引入了一个新的theme.json文件。 这是一个专门用于在前端和后端设置块编辑器（和各个块）样式的空间。 因此，管理网站样式变得更加容易。

在这篇文章中，我们将仔细研究theme.json文件。 然后，在向您展示如何编辑theme.json文件之前，我们将介绍一些关键注意事项。

WordPress 中的 theme.json 是什么？

theme.json文件是一种机制，使您能够以更大的控制权配置块编辑器。 它对于在站点范围内进行样式更改很有用，因为您可以为所有（或部分）块分配默认样式。

本质上， theme.json是一种增强 Block Editor API 功能的解决方案。 例如，使用theme.json ，您将能够以编程方式控制编辑器。 另外，您可以集成块式系统。 这有助于您管理用户、主题和核心首选项。

theme.json文件与站点编辑器同时引入。 同时， theme.json是管理未来 WordPress 版本样式的首要主要步骤之一。 这是更好地控制您的主题（和站点）的好方法，以便您可以更改菜单、页眉和页脚。

简而言之，站点编辑器使您能够进行大量的全局样式更改，而theme.json是允许您为块配置自定义选项的机制。

例如，您可以重新定义块编辑器的设置以隐藏或显示特定用户的自定义选项。 此外，您可以为块定义默认颜色和字体大小，同时为编辑器配置新的宽度或对齐方式。

theme.json 文件位于何处？

您可以在主题目录的根目录中找到theme.json文件。 如果您使用的是站点编辑器，并且已经激活了像二十三这样的基于块的主题，那么您肯定可以访问theme.json文件。

但是，如果您选择的主题没有附带theme.json文件，您可以切换主题或创建自己的文件。 请务必注意，某些主题带有非常具体的 CSS 或样式块，它们可能与您在theme.json 中所做的更改不兼容。 例如，二十一中的黑暗模式不能被添加到theme.json 中的样式更改所覆盖。

在编辑 theme.json 文件之前要做什么

现在您对theme.json文件有了更多的了解，让我们来看看在进行编辑之前要考虑的一些重要因素。

1. 备份您的网站

在进行任何重大更改之前，备份您的网站非常重要。 这样，如果出现问题，您可以恢复您的网站并重新开始。

使用 Jetpack VaultPress Backup 插件是备份站点的最简单方法之一。

这个 Jetpack 工具创建实时的、基于云的备份并将它们存储在 WordPress.com 的安全服务器网络上。 另外，恢复过程快速而简单。

即使您的站点完全关闭，您也可以从移动应用程序中利用一键恢复。

2.考虑使用暂存站点

暂存站点是测试您想要进行的更改而不影响您的实时网站的好方法。 从本质上讲，暂存站点是您网站的副本，不向公众开放。 因此，您将获得隐私来测试新功能或更新您的网站。

这样，您就不必担心在编辑theme.json文件时出现问题。 此外，如果出现问题，您仍然可以访问您的实时站点。 这也意味着当您最终将任何更改推送到您的实时站点时，您可以放心，它们不会损害您页面的功能。

您可以通过多种方式设置暂存站点。 您可以询问您的虚拟主机，手动为您的站点设置不同的子域，或安装插件。 但选择本地 WordPress 开发工具可能更容易。

如何编辑 theme.json 文件

此时，您已准备好访问和编辑您的theme.json文件！ 在本节中，我们将向您展示一些编辑theme.json 的有用方法，例如创建调色板和覆盖块的默认字体大小。

要开始，您需要到达网站的根目录。 您可以使用 FileZilla 等 SFTP 客户端或访问您的文件管理器来执行此操作。 然后，直接前往public_html目录。 在其中，找到您的wp-content文件夹。

接下来，转到主题并为您的站点选择活动主题。 如果您的主题有一个，您可以在这里找到theme.json 。

1. 创建默认调色板

您可能想要为编辑器建立一套调色板。 这样，您就可以快速访问您的颜色并确保整个页面的视觉品牌一致。

此外，如果您有其他用户在您的网站上创建帖子和页面，这会很有帮助，因为他们只能访问您包含在颜色存储库中的颜色。 此外，他们将无法创建自己的色调和渐变。

首先，按照我们之前概述的步骤找到theme.json 。 启用此设置需要考虑三个因素：

1. 您需要禁用自定义渐变
2. 您需要禁用自定义颜色选项
3. 您需要使用您的品牌颜色添加自定义调色板

使用 SFTP 或文件管理器连接到主题文件后，您需要复制以下代码并将其保存在主题的根目录中：

 { “version”: 1, “settings”: { “color”: { “custom”: false, “customGradient”: false, “gradients”:[], “link”: false, “palette”:[ { “slug”: “vivadcyanblue”, “color”: “#0693E3” }, { “slug”: “vividgreencyan”, “color”: “#00D084”, }, { “slug”: “white”, “color”: “#ffffff” } ] }

请记住，您需要调整上述代码以反映您的偏好。 在这里，我们禁用了自定义渐变和自定义颜色选项。

此外，我们还确定了一套包含三种不同色调的调色板。 因此，当用户在网站上创建帖子和页面时，他们将只能访问这些颜色。

在theme.json中创建自定义调色板的好处在于 WordPress 还将重写所有必需的 CSS。 这样，在块编辑器中所做的任何颜色更改也将反映在前端。

2.配置自定义字体大小

为段落块配置某些字体大小也很有用。 当然，该块提供了一组默认字体大小，但您可以使用theme.json来根据您的喜好覆盖它。

同样，您需要通过访问wp-content中的themes文件夹找到主题的根目录。 然后，找到theme.json。 在设置 → 版式 → fontSizes 下将字体大小添加到theme.json 。

然后，您需要输入您的值。 您将使用size添加有效的 CSS 字体大小值。 同时， slug是 WordPress 在 CSS 自定义属性中使用的标识符。 您还可以添加名称，但这仅供您自己使用，因为您将在编辑器中看到它。

在 WordPress 中，默认的“小”字体大小值为 13px，因此您可以以此为基础设置值。 总而言之，将此代码添加到文件后，您的theme.json文件将如下所示：

 add_theme_support( 'editor-font-sizes', array(    array(        'name' => esc_attr__( 'Small', 'themeLangDomain' ),        'size' => 12,        'slug' => 'small'    ),    array(        'name' => esc_attr__( 'Regular', 'themeLangDomain' ),        'size' => 16,        'slug' => 'regular'    ),    array(        'name' => esc_attr__( 'Large', 'themeLangDomain' ),        'size' => 36,        'slug' => 'large'    ),    array(        'name' => esc_attr__( 'Huge', 'themeLangDomain' ),        'size' => 50,        'slug' => 'huge'    ) ) );

只需保存更改即可更新您的 WordPress 阻止设置。

3.创建自定义模板和模板部件

另一种编辑theme.json 的方法是创建自定义模板和模板部件。 由于主题可以列出模板文件夹中存在的自定义模板，因此您可以声明可以使用它的帖子类型以及您向用户显示的标题。

首先，打开theme.json。 您需要考虑名称、标题和帖子类型，尽管最后一项设置是可选的。 然后， 将以下代码添加到文件中：

 { “version”: 1, “customTemplates”: [ { “name”: “custom-template-example”, “title”: “The Custom Template Title”, “postTypes”: [ “page”, “post”, “my-cpt” ] } ] }

此时，您已经为您的页面、帖子和自定义帖子类型创建了一个模板。 您可以更进一步，为您的主题创建模板部件。

这样，您可以配置theme.json来声明模板部分的区域术语，如页眉或页脚块。 通过在theme.json中定义它，您可以确保该设置应用于该模板部件实体的所有使用，而不仅仅是一个块。

在开始之前，您需要考虑模板部件的名称、标题和区域。 重要的是要注意，如果您不指定区域，它将被设置为“未分类”并且不会触发块变化。

要为您的主题创建模板部分，请将以下代码添加到theme.json中：

 { “version”: 1, “templateParts”: [ { “name: “my-template-part”, “title”: “Footer”, “area”: “footer” } ] }

然后，请务必在退出theme.json 之前保存您的更改。

WordPress 中有关 theme.json 的常见问题

现在您知道了如何编辑theme.json，但您可能仍然对它有一些疑问。 这就是为什么我们在下面回答了一些最常见的theme.json问题！

theme.json 是什么时候首次引入 WordPress 的？

theme.json文件是在 WordPress 5.8 发布时首次引入的。 这是启动全站编辑 (FSE) 以及使用基于块的主题的能力的时候。

此版本表明该平台发生了巨大转变，因为用户能够在整个站点范围内进行更改并对样式设置进行更多控制。 后来，在 WordPress 5.9 中， theme.json演变为第二个版本。

你可以用 theme.json 文件做什么？

简而言之， theme.json使您能够更改和应用新的样式相关设置到所有 WordPress 块。 因此，您可以更好地控制样式更改。 另外，这意味着您可以避免在块级别单独配置这些更改。

例如，您可以编辑theme.json以禁用/启用首字下沉、填充、边距和自定义行高等功能。 此外，您还可以添加多个调色板、双色调和渐变，以便更快地将您的品牌颜色应用到页面上的元素。

更重要的是，您可以指定确切的字体大小并将其应用到您的整个站点。 或者为您的内容添加默认宽度并将模板部件分配给模板部件区域。

使用 theme.json 文件的先决条件是什么？

编辑theme.json是一种在站点范围内进行样式更改的简单方法。 但是，不幸的是，它并不是所有用户的选择。

首先，您需要使用块编辑器。 如果您更喜欢使用页面构建器，您将无法利用此功能。 最重要的是，您需要对 CSS 有一定的了解，并且能够自如地编辑站点文件。

最后，您需要能够访问theme.json。 正如我们之前所讨论的，并非每个主题都有一个theme.json文件。 另外，某些主题的设置将覆盖您在theme.json中所做的任何更改。

如果您的主题确实有theme.json ，您将能够在站点的根目录中找到它。 您可以使用 SFTP 或访问您的文件管理器找到它。 然后，在wp-content中找到主题文件夹。 这是theme.json所在的位置。 如果您的主题没有theme.json，您可以切换主题或自己创建一个theme.json文件。

使用 WordPress theme.json 文件进行简化的网页设计

进行自定义的、站点范围的更改通常意味着编辑大量文件或完成大量手动任务。 但是，使用theme.json，您将获得一个专用空间来控制和管理您站点的所有样式设置。

从 WordPress 5.8 开始， theme.json文件位于您站点的根目录中。 您可以编辑该文件以进行彻底的更改，例如将自定义调色板应用于您的站点并覆盖 WordPress 默认字体大小。

在编辑theme.json文件之前，备份您的站点很重要。 Jetpack VaultPress Backup 是一个易于使用的插件，即使您处于离线状态，它也能让您恢复您的网站。 此外，它会备份您的所有文件、WooCommerce 数据和您的数据库！