使用 theme.json 开发自定义 CSS 属性以增强 WordPress 主题

[Dimaeiya333]

WordPress 主题开发人员可以使用文件theme.json来简化过去严重依赖 PHP 的流程。但是，您仍然可以使用 HTML、JavaScript 和 PHP 知识来创建主题，CSS 也不例外。事实上，您可以在theme.json.这可以改进设计阶段并提供更大的灵活性。

在本指南中，我们将深入介绍 CSS 自定义属性，以探索它们如何与 WordPress 和theme.json.但在此之前，我们先总结一下 theme.json、完整站点编辑 (FSE) 以及 CSS 如何适应这种新的设计方法。

theme.json 如何与 WordPress 配合使用
该文件theme.json首次出现在WordPress 5.8中。这是设计 WordPress 主题的革命性方法，使用 JSON 语法构建配置文件。 WordPress 读取它并应用结果，而不需要太多PHP、CSS或JavaScript。

显示 WordPress 主题的 theme.json 文件内容的代码编辑器窗口。 JSON 结构定义主题设置，包括架构版本、模式和颜色设置。在背景中，你可以看到山脉、森林和梯田的风景。
代码编辑器中的theme.json文件。
FSE 全局样式和设置控制主题的各个视觉方面。它们可以包括典型的调色板和版式，还包括布局选项以及块和元素的单独样式。

尽管 FSE 直观、功能强大、适应性强且易于使用，theme.json但它可以帮助弥合最终用户和开发人员角色之间的差距。它提供的几乎所有选项theme.json也在站点编辑器中可见。

WordPress 站点编辑器界面，在屏幕右侧显示网站的主页，而左侧的黑色侧 viber数据 边栏提供导航选项、样式、页面、模板和模式。
WordPress 中站点编辑器的主界面。
在创建 WordPress 主题时使用它theme.json提供了许多优势。这是由于以下几个原因：

您的主题布局设置位于一个中心位置，可以轻松管理和更新。
前端体验、站点编辑器和主题代码库之间的混淆较少。
使用theme.json提供与未来 WordPress 开发和设计的兼容性。
WordPress 的内置功能意味着您可以减少用户应用自定义 CSS 的需要。
让我们看看它theme.json与 FSE 全局设置和样式有何关系。

FSE 全局设置和样式简介
FSE 代表了 WordPress 主题开发的新时代，其中全局设置和样式的功能尤为突出。这允许用户通过站点编辑器功能自定义站点外观的几乎每个方面。

WordPress 站点编辑器在右侧边栏中显示样式面板输入字段。允许您调整字体设置。左侧显示了蓝色主题网页的部分视图。
WordPress 站点编辑器中的样式面板。
在这里，您可以使用以前需要 CSS 或第三方页面构建器插件的选项来调整主题设计的各个方面。修改边距、内边距和边框只是一些示例，但还有更多。

WordPress 站点编辑器，显示布局自定义面板。它允许您自定义内容尺寸、填充和块间距。屏幕左侧显示蓝色主题网页的部分视图。
在站点编辑器中使用典型的 CSS 元素，例如填充和边距。
theme.json您甚至可以在（或block.json块文件本身）中打开或关闭其中许多功能。这允许您自定义用户界面以及网站的整体设计。

然而，您可用的选项虽然广泛，但可能无法满足所有需求。如果您从头开始创建主题，则尤其如此。 CSS 自定义属性可以帮助您解决此任务。