经典主题中的theme.json

欢迎来到本课,我们将探讨在经典主题中添加 theme.json 文件这一选项。

通过本课,你将能够:

  • 列出在经典主题中添加 theme.json 的好处,以及
  • 描述在经典主题中添加 theme.json 的过程。

在经典主题中添加 theme.json 有哪些好处?

这里我们以 Twenty Twenty-One 作为当前激活的主题。我们将通过打开一个页面来查看终端用户可用的部分设置和样式。我们来打开示例页面。

如果我们选择一个区块,然后转到右侧这里,我们会看到文本和排版设置及样式可用。通过 theme.json,我们可以控制这些设置和样式。

例如,你可以选择禁用标题区块的颜色支持。这里你看到的是为了禁用标题区块的颜色支持而添加到 theme.json 中的代码。

{
    "version": 2,
    "settings": {
        "blocks": {
            "core/heading": {
                "color": {
                    "background": false,
                    "text": false
                }
            }
        }
    }
}

添加 theme.json

现在让我们来看看如何将 theme.json 添加到经典主题中。我们将 theme.json 添加到 Twenty Twenty-One 主题中。我们只需要 schema 和版本号即可开始。

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

要了解更多关于将 theme.json 添加到主题的信息,请查看《初学者 WordPress 开发者学习路径》中的《全局设置和样式》课程。

如果我们现在回到 WordPress 并重新加载页面,我们会看到布局发生了变化。这是因为 WordPress 自带的 theme.json 现在被激活了。

要解决这个问题,请回到 theme.json 并添加内容尺寸的设置。

添加 650px 并保存这些更改,然后回到 WordPress 并再次重新加载。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "layout": {
            "contentSize": "650px"
        }
    }
}

如果你想查看 WordPress 核心中 theme.json 的所有设置,可以在 ‘wp-includes/theme.json’ 文件夹中找到它。

后续步骤

如果你想了解更多关于 theme.json 的信息,可以查看 WordPress.org 上提供的区块编辑器手册。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注