WordPress 主题开发人员可以使用 theme.json 文件来简化过去主要依赖 PHP 的流程。不过，您仍然可以使用 HTML、JavaScript 和 PHP 技能来创建主题，CSS 也不例外。事实上，您可以在 theme.json 文件中使用 CSS 自定义属性。这可以增强设计阶段的效果，并提供更大的灵活性。
在本指南中，我们将直面 CSS 自定义属性，探讨它们如何与 WordPress 和 theme.json 配合使用。但在此之前，我们先来总结一下 theme.json、全站编辑（FSE）以及 CSS 如何融入这种新的设计方法。
theme.json 如何与 WordPress 配合使用
theme.json 文件首次出现在 WordPress 5.8 中。它是设计 WordPress 主题的一种革命性方法，使用 JSON 语法来构建配置文件。WordPress 会读取该文件并应用其结果，而无需太多的 PHP、CSS 或 JavaScript。
代码编辑器中的 theme.json 文件
FSE 中的全局设置和样式可以控制主题的各种视觉效果。它们可以包括典型的调色板和排版，也可以包括布局选项以及单独的块和元素样式。
虽然 FSE 直观、功能强大、适应性强且易于使用，但 theme.json 可以帮助缩小最终用户与开发人员之间的差距。theme.json 提供的几乎所有选项在网站编辑器中都可以看到。
WordPress 中的网站编辑器主界面
在构建 WordPress 主题时，使用 theme.json 有很多优势。原因有以下几点
- 您的主题设计配置有了一个集中的位置，从而更易于管理和更新。
- 减少了前端体验、网站编辑器和主题代码库之间的混淆。
- 使用
theme.json可以兼容未来的 WordPress 开发和设计。 - WordPress 的内置功能可以减少用户应用自定义 CSS 的需要。
让我们来看看 theme.json 与 FSE 全局设置和样式的关系。
FSE 全局设置和样式入门
FSE 代表了 WordPress 主题开发的新时代，而全局设置和样式则是其中的佼佼者。它允许用户通过网站编辑器功能自定义网站外观的几乎所有方面。
WordPress 网站编辑器中的样式面板
在这里，您可以使用以前需要 CSS 或第三方页面生成器插件的选项来调整主题布局的各个方面。修改边距、填充和边框就是其中的例子，但还有更多。
在网站编辑器中使用典型的 CSS 元素，如 padding 和 margins
您甚至可以在 theme.json 文件（或区块自己的 block.json 文件）中启用或禁用大部分功能。这样，用户界面定制与网站整体设计就可以同时进行。
不过，您可以使用的选项虽然很多，但可能无法满足所有需求。如果你从头开始创建一个主题，情况尤其如此。CSS 自定义属性可以帮助解决这个问题。
了解 CSS 自定义属性
在 PHP、JavaScript 以及几乎所有编程语言中，变量都可以保存代码中各种元素的值。例如，你可以存储姓名、日期和数字等值，并在整个程序中使用它们。
目前大多数浏览器都支持 CSS3 变量，也就是我们在本篇文章中所说的 CSS 自定义属性。Internet Explorer 不支持，Opera Mini 也不支持。不过，主流浏览器都支持 CSS3 变量。
Can I Use 网站显示了 CSS 自定义属性的当前支持情况
CSS 自定义属性可让你在整个样式表中存储可重复使用的值。这是一种创建更动态、更灵活 CSS 的强大方法。只需更改一个值，就能更新多个样式规则。
CSS 变量并不是一个全新的概念。Sass 等预处理器就使用了类似的功能。例如，下面的 Sass：
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
这种是典型的 CSS 处理方式：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
不过，CSS 自定义属性可以直接将这一点传递给浏览器。这样做有一些好处：
- 动态更新。与大多数预处理器变量不同，您可以使用 JavaScript 即时（on the fly）更新 CSS 自定义属性。
- 层叠特性。自定义属性将遵循 CSS 层叠，这将为您提供更大的灵活性和更多的上下文感知样式。
自定义属性还能减少代码冗余，从而提高性能。更小的样式表意味着更快的加载时间。
CSS 自定义属性的语法
与典型的预处理器变量一样，CSS 自定义属性的语法也很简单。它使用双连字符而不是美元符号来指定属性：
:root {
--primary-color: #007bff;
}
然后，使用 var() 函数将这些属性分配给元素：
.button {
background-color: var(--primary-color);
}
请注意，您也可以使用 @ 属性指定自定义属性。不过，WordPress 简化了整个过程，您很快就会明白。
可以使用 CSS 自定义属性的地方
当涉及到 CSS 自定义属性时，多功能性是当务之急。有了 WordPress 和 theme.json，您可以通过以下几种方式使用它们：
- 预设： 您可以定义颜色、字体和间距预设。
- 块样式： 单个区块可以使用自定义属性，以获得一致的样式。
- 全局样式： 自定义属性对于整个网站的设计非常重要。
你可以为任何目的创建完全自定义的属性。让我们来看一个如何在 theme.json 文件中使用自定义属性的实际例子：
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"line-height": {
"body": 1.5,
"heading": 1.2
}
}
},
"styles": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--body)"
},
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}
在这里，我们定义了一种颜色预设，并使用 custom 属性为页面标题和正文定义了 line-height。WordPress 将为您使用 custom 定义的元素生成 CSS 属性。接下来，我们可以将这些自定义属性分配给各种样式、设置、区块等。
使用 CSS 自定义属性的好处
你可能已经知道 CSS 自定义属性如何帮助你开发主题。即便如此，还有很多好处值得注意。
我们已经谈到了模块化和可重用性。你定义为自定义属性的所有通用值都将促进一致性并减少冗余。这种冗余将转化为主题更好的潜在性能。
对于最终用户来说，自定义属性具有以下几个优势：
- 简化自定义。用户和网站所有者无需掌握复杂的 CSS 知识，即可自定义主题。通过
theme.json公开变量后，用户就可以通过网站编辑器访问设置。 - 与 FSE 更好地兼容。自定义属性符合 FSE 原则，让您可以创建更灵活、更动态的主题设计。
- 更易于维护和更新。如果您需要更新整个主题中的常用值，自定义属性意味着只需在一个地方进行更改。它简化了维护工作，使更新和调整更易于管理。
总的来说，自定义属性可以改善主题开发工作流程。与使用典型的 CSS 变量相比，确定自定义属性也更加简单明了。
如何在 theme.json 中定义 CSS 自定义属性
下面让我们进入在 theme.json 中定义和使用 CSS 自定义属性的实际操作层面。第一步是学习如何编写自定义属性。
语法和命名规则
WordPress 提供了 custom 属性来帮助定义。与@属性或伪类中的定义相比，自定义属性更易于使用，并且使用标准的键/值格式：
{
"settings": {
"custom": {
"property-name": "value"
}
}
}
在幕后，WordPress 将处理此定义，并使用双连字符生成 CSS 自定义属性：
--wp--custom--<custom-element>
--wp--custom-- 将始终是 CSS 属性的一部分，而且不会使用驼峰大小写。例如，如果您将 lineHeight 定义为自定义属性，WordPress 将把它变成 kebab case：
--wp--custom--line-height
在命名约定方面，您可以根据自己的意愿使用驼峰大小写，不过我们建议您在自定义属性名称中使用烤肉串大小写。这符合 WordPress 的命名规则，提高了可读性，并减少了处理错误。
注：CSS 自定义属性使用双连字符，因为 W3C 的 CSS 工作组也希望鼓励您使用 Sass（使用美元符号定义属性）。这样，您就可以同时使用这两种方法来增强您的设计。
WordPress 已经定义了一些自定义属性–或者至少，主题可以选择这样做。这意味着你将在 theme.json 中看到 CSS 变量，而无需明确声明：
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "var(--wp--preset--color--primary)",
"name": "Primary"
}
]
},
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}
在本例中，我们使用现有的预设颜色定义了一种主色调。然后，我们定义了一些自定义间距属性，并使用 var() 进行设置。
这意味着我们无需在 theme.json 中硬性编码数值。更重要的是，用户可以在站点编辑器中更新这些值，并将它们传播到整个主题中。
预设与自定义属性
当然，theme.json 还可以让你定义颜色、字体大小和其他常用主题元素的预设值。另一方面，你也可以使用自定义属性来定义你想在整个主题中重复使用的任何值。
这里最大的区别在于命名规则和可访问性。如果您不做进一步的工作，用户将无法在网站编辑器中访问自定义属性。有了预设，WordPress 将生成与处理自定义属性相似的 CSS：
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"fontFamily": {
"base": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"headings": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}
一旦 WordPress 对其进行处理，您就可以看到内在的差异：
--wp--preset--primary: #007bff; --wp--custom--font-family--base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"; --wp--custom--font-family--headings: "'Helvetica Neue', Helvetica, Arial, sans-serif";
请注意，即使将驼峰大小写转换为克巴大小写后，进一步的属性嵌套也将使用双连字符。
全局和特定区块 CSS 与 CSS 自定义属性
在传统的 WordPress 中，您会在前端使用额外的自定义 CSS来设计主题中的元素。现在，theme.json 和 FSE 依然如此，只是使用方法与 CSS 自定义属性不同。
如果访问网站编辑器并进入样式界面，你会发现额外 CSS 部分。它的作用与传统 WordPress 安装中的自定义 CSS 面板非常相似：
WordPress 网站编辑器中的额外 CSS 部分
这是一种为主题添加全局 CSS 定制的方法。不过，它实际上是一种为用户提供添加 CSS 功能的方法。你也可以用它来做一些不需要整个样式表的小改动。
在 theme.json 中，你可以使用 css 属性来定义想要添加的 CSS：
{
"version": 3,
"styles": {
"css": "margin: 0"
}
}
请注意，CSS 语句的结尾不需要使用分号。您也可以为区块设置自定义 CSS：
{
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}
只要你在 theme.json 中设置了这样的 CSS，你就会在任何站点编辑器的额外 CSS 字段中看到它。不过请记住，使用 CSS 声明的任何内容都不是 CSS 自定义属性。
使用双引号 (&) 选择器
与 Sass 类似，WordPress 也支持双引号选择器，但有一些不同之处。在这种情况下，这是一种针对嵌套元素和属性的好方法。如果你选择为单个区块声明 CSS 自定义属性，这一点就很重要。
例如：
…
"styles": {
"blocks": {
"core/table": {
"css": "color:#333 & th{ background:#f5f5f5; }"
}
…
这就为表头元素定义了文字颜色和背景颜色。一旦 WordPress 对其进行处理，就会得到干净、纯粹的 CSS：
.wp-block-table > table {
color: #333;
}
.wp-block-table > table th {
background: #f5f5f5;
}
如果您希望扩展目标 CSS，那么双引号选择器就是您的绝佳选择。我们可以这样理解选择符：它有助于将 CSS 元素分开。以下面的例子为例：
{
"version": 3,
"styles": {
"blocks": {
"core/avatar": {
"css": "& img {border-radius: 999px}"
}
}
}
}
这将为头像添加一个边框半径，并按照你的预期输出 CSS：
.wp-block-image img {
border-radius: 999px;
}
但是，如果没有 amppersand，WordPress 就会将您的声明连在一起：
… .wp-block-imageimg …
在 CSS 自定义属性中使用 amppersand 选择器将是你经常做的事情。
小结
正如 theme.json 是创建灵活、可维护的 WordPress 主题的强大配置文件一样，CSS 自定义属性对工作流程也至关重要。这是您为网站编辑器无法触及的元素构建和声明 CSS 的方式。如果您要创建自己的块，或者只是想开发具有终极定制深度的独特 WordPress 主题，它也是关键所在。此外，您还可以选择通过网站编辑器与用户共享 CSS。
CSS 自定义属性是否会成为你的主题开发工作流程的一部分？如果是，您将如何使用它们？请在下面的评论区分享您的见解！
评论留言