WordPress 5.8使用 theme.json 配置主题设计

从WordPress 5.8开始，一个新的工具–“theme.json” –可以在你的主题中使用。也许你是第一次听说它，也许你已经在用它测试和开发主题。 无论怎样，我很高兴你在这里，因为对于WordPress主题来说，这是一个令人兴奋的时刻。

这篇文章快速介绍了这个新的框架，并通过分享一些实用的技巧和例子来描述可能的情况。

什么是theme.json?

从技术上讲，theme.json只是一个住在主题目录顶层的文件。

从概念上讲，它是主题开发方式的一个重大转变。主题作者现在有一个集中的机制来为网站作者和访问者定制WordPress的体验。Theme.json为主题作者提供了对全局样式、块状样式和块状编辑器设置的细粒度控制。

通过在一个文件中提供这些设置和控制，theme.json提供了一个强大的框架，将主题设计和开发的许多方面结合起来。随着块状编辑器的成熟和增加更多的功能，theme.json将作为主题和编辑器一起工作的骨干而大放异彩。

为什么使用它?

这就是未来! 但如果你像我一样，你可能需要一些更实际的东西来说服你。以下是你今天可能使用theme.json的几个原因。

• 控制编辑器设置，如颜色、排版、间距和布局，并整合这些设置的管理。
• 保证样式能正确地应用于整个网站的块和元素。
• 减少主题过去提供的模板式CSS的数量。Theme.json不会完全取代你的样式表–在某些情况下，需要CSS来给你的主题提供额外的亮点（过渡、动画等）。但它可以大大减少主题所需的基本CSS。

如何使用它?

这篇文章的其余部分演示了几个主题.json的配置，你可以尝试一下。这些例子使用了tt1-blocks theme.json–今年的默认主题的基于块的版本。

如果你从一个现有的主题开始，你可以尝试从WordPress/theme-experiments库中复制一个theme.json（例如，@poena的fse-tutorial主题）并把它添加到你的主题的根目录中。

全局性地改变你网站的排版设置

"settings": {
    "typography": {
        "fontSize": "30px",
        ...

在theme.json中做上述改变，将导致你的主题的正文排版样式（之前和之后）的以下更新:

在全局范围内改变你的网站的基础颜色设置

"styles": {
    "color": {
        "background": "#ffc0cb",
        "text": "#6A1515"
    },
    ...
}

改变特定块的间距/填充设置

"styles": {
    "blocks": {
        "core/code": {
            "spacing": {
                "padding": {
                    "top": "3em",
                    "bottom": "3em",
                    "left": "3em",
                    "right": "3em"
                }
            }
        }
    }
}

在编辑器中为特定区块如按钮设置自定义调色板

"settings": {
    "blocks": {
        "core/button": {
            "color": {
                "palette": [ 
                    {
                        "name": "Maroon",
                        "color": "#6A1515",
                        "slug": "maroon"
                    },
                    {
                        "name": "Strawberry Ice Cream",
                        "color": "#FFC0CB",
                        "slug": "strawberry-ice-cream"
                    }
                ]
            }
        }
    }
}

启用和禁用排版控制

在下面的例子中，为所有标题块提供自定义字体大小和行高的能力被禁用。

"settings": {
    "blocks": {
        "core/heading": {
            "typography": {
                "customFontSize": false,
                "customLineHeight": false
            }
        }
    }
}

下一步是什么？

我希望这能让你感受到什么是可能的以及主题的发展方向。上面的例子只是对可能的主题设计配置的表面描写，我非常期待看到主题作者的创造。

如果你有兴趣了解更多，这里有关于theme.json的开发者说明，这里有手册中关于theme.json的文档。