使用子主题为WordPress区块主题自定义样式

区块主题和 theme.json 为您提供了极大的灵活性，这可能让您觉得子主题似乎已经过时了。但在很多情况下，它们仍然必不可少。

如果您想真正掌控网站的设计，而无需修改父主题的核心文件，那么使用子主题仍然是正确的选择。

在本文中，我们将以 Twenty Twenty-Five 主题为基础，指导您创建一个具有自己的 style.css 和 functions.php 的区块子主题。您将学习如何安全地覆盖样式、定义自定义区块样式，甚至设置您自己的样式变体。这不仅仅是一个样式技巧，更是朝着构建您自己的完整区块主题迈出的坚实一步。

虽然这个练习看起来很简单，但我们将探讨一些可能会让您犯错的细节。让我们从创建自定义子主题开始，然后实现自定义样式变体。

注册区块级子主题

注册区块子主题比注册经典主题简单得多。

从技术上讲，您根本不需要注册它。当正确命名的子主题文件夹同时包含 theme.json 文件和 style.css 文件时，注册会自动进行。

那么，为什么 style.css 文件仍然必不可少呢？

与以前一样，它包含一个必需的标头（如下所示），其中包含 WordPress 用于识别主题的元数据，包括主题名称和它所扩展的父主题。虽然现在样式和设置都在 theme.json 中处理，但 style.css 仍然在 WordPress 识别您的主题方面发挥着关键作用，即使它不包含任何实际的 CSS。

/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
*/

除非您想要排队脚本或添加基于 PHP 的功能，否则 functions.php 文件不是必需的。我们稍后会讲解这些内容。

如果您不熟悉 theme.json 或想快速复习一下，请查看我们的指南“在 theme.json 中使用属性和键值对”。

对我们的子主题进行三项基本更改

首先，更新全局背景和文本颜色，并设置按钮区块的样式。

在子主题的 theme.json 文件（作为默认样式）中，我们定义以下内容：

{
"version": 3,
"settings": {
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "Yellow",
"slug": "yellow",
"color": "#FFFF00"
},
{
"name": "Purple",
"slug": "purple",
"color": "#800080"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--black)",
"text": "var(--wp--preset--color--yellow)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--purple)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--yellow)",
"width": "2px",
"style": "solid"
}
}
}
}
}

虽然背景和文本颜色适用于所有样式变化，但按钮区块样式仅适用于默认变化。

子主题在站点编辑器中使用默认样式变体。

覆盖样式变体

要在不同变体中应用相同的按钮样式，最好创建一个与父主题变体命名约定相匹配的 .json 文件。

例如，要覆盖 Evening 样式变体中的按钮边框，请在子主题的根目录（或 /styles 子文件夹内）创建一个名为 01-evening.json 的文件：

{
"version": 3,
"title": "Evening",
"styles": {
"blocks": {
"core/button": {
"border": {
"color": "var(--wp--preset--color--white)",
"width": "3px",
"style": "dashed"
}
}
}
}
}

这里，我们使用了更宽的虚线边框来突出按钮。由于这些样式更具体，它们会覆盖 theme.json 中的通用样式。

注：无需重新定义全局背景或文本颜色——它们已经从子主题的 theme.json 中继承。

启用自定义晚间风格变化的子主题。

创建自定义样式变体

让我们更进一步，创建一个名为 Kinsta 的全新样式变体。此变体继承子主题的 theme.json 文件中的全局设置，并应用其自定义的调色板和按钮样式：

将以下内容保存为 /styles/kinsta.json：

{
"version": 3,
"title": "Kinsta",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#261e1e"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#ff2900"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--primary)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--white)",
"width": "4px",
"style": "dotted"
}
}
}
}
}

这种“Kinsta”变体为我们提供了独特的外观，完全建立在子主题的结构内。

站点编辑器界面中突出显示了新的样式变体。

如何以及为何要将style.css添加到队列

在像 Twenty Twenty-Five 这样的真正的区块主题中，无需使用 PHP 手动为父主题或子主题添加样式表。WordPress 核心会根据 theme.json 文件动态生成 CSS。

但是，如果您想在 style.css 文件中编写自定义样式，则需要手动将其添加到队列。

注：样式的添加到队列没有一刀切的方法。这取决于父主题如何处理其自身的样式。对于 Twenty Twenty-Five，父主题和子主题的样式都必须手动添加到队列。

// Frontend styles
add_action('wp_enqueue_scripts', function() {
// Enqueue parent theme stylesheet
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// Enqueue child theme stylesheet
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style')
);
});

此代码确保父主题和子主题的 style.css 文件均在前端加载。

注：这些更改仅适用于前端。编辑器样式仍然由 theme.json 控制。编辑器界面的样式设置不在本文讨论范围内。

要确认您的样式已正确入队，请尝试将以下 CSS 添加到子主题的 style.css 文件中：

body {
color: #ffff00;
background: #0000ff;
}

这会为所有样式变体赋予蓝色背景和黄色文本颜色——仅在前端生效。

styles.css的一个简单用例

你可能会想：为什么要使用 CSS？theme.json 不是应该可以处理所有事情吗？

不完全是。

例如，theme.json 不支持 :hover 之类的伪类。要为所有按钮设置悬停效果，可以使用以下 CSS：

.wp-block-button a:hover {
background: #ffffff;
color: #0000ff;
}

这适用于前端所有变体的所有按钮区块。

假设您想将此悬停效果限制在特定的变体或区块中。在这种情况下，您需要使用更高级的方法，例如条件主体类、区块过滤器或针对特定区块的 CSS。

添加区块样式变体

现在，让我们来看看如何使用 PHP 和 CSS 向按钮区块添加新的样式变体。

如果您考虑向 theme.json 添加 variations 数组，则不适用于此用例。虽然 theme.json 可以处理全局和区块样式，但区块样式变体（例如替代按钮样式）需要以不同的方式注册。

我们创建了一个名为“Alternative Outline”的新样式变体，它与编辑器 UI 中的默认填充和轮廓样式一起显示，并在前端正确呈现。

在PHP中注册样式

将以下代码添加到您子主题的 functions.php 文件中。它在核心加载之后但在任何页面呈现之前注册样式：

// Register "Alternative Outline" button style
add_action('init', function() {
register_block_style(
'core/button',
[
'name'  => 'alternative-outline',
'label' => __('Alternative Outline', 'twenty-twenty-five-child'),
]
);
});

注：我们使用 __() 进行国际化，并将其与子主题的文本域进行命名空间设置。

将自定义样式添加到style.css

现在，在子主题的 style.css 文件中定义此变体的样式（包括 :hover 状态）：

.wp-block-button.is-style-alternative-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--yellow);
border: 2px dotted var(--wp--preset--color--yellow);
transition: all 0.7s ease-in-out;
}
.wp-block-button.is-style-alternative-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--yellow);
color: var(--wp--preset--color--black);
}

此处使用的颜色变量在您的 theme.json 调色板中定义，确保整个网站的一致性。

新的“Alternative Outline”按钮区块样式可在工具栏和侧边栏中查看。

使用JSON创建区块样式变体

从 WordPress 6.6 开始，您可以完全使用 JSON 注册核心区块样式变体，无需 PHP。

以下示例向“组”区块添加了一个名为“Purple Background”的新变体。该变体显示在编辑器侧边栏中，并带有样式预览：

在主题的 /styles/purple-background/ 文件夹中创建一个名为 block.json 的文件：

{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Purple Background",
"slug": "section-purple",
"blockTypes": ["core/group"],
"styles": {
"border": {
"radius": "20px"
},
"color": {
"background": "#800080",
"text": "#eeeeee"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--50)",
"right": "var(--wp--preset--spacing--50)",
"bottom": "var(--wp--preset--spacing--50)",
"left": "var(--wp--preset--spacing--50)"
}
}
}
}

Purple Background 变体出现在编辑器侧栏中，如下图所示：

在站点编辑器中组区块使用自定义样式变体。

如果您使用多种样式变体，建议将它们放在 /styles 子文件夹中。在本例中，文件路径为： /styles/purple-background/block.json。

以下是您在使用 JSON 方法时需要考虑的一些注意事项：

• 此方法不需要 PHP，并且可以减轻页面负担，因为 WordPress 仅在需要时加载相关的 CSS。
• 由于我们正在使用 Twenty Twenty-Five 的子主题（该主题已经使用了 theme.json 和动态样式），因此无需手动将样式添加到队列中。
• 某些区块可能尚未通过 JSON 支持所有样式选项。如果担心向后兼容性，您可以选择使用 register_block_style() 添加 PHP 回退选项。

小结

区块主题提供了非凡的灵活性，为无数的开发可能性打开了大门。在本文中，我们的目标是向您介绍区块主题的子主题世界，并希望能够激发您将自己的想法变为现实。

我们还探讨了两种添加自定义核心区块样式变体的方法——一种使用 PHP 和 CSS，另一种仅使用 JSON。

正如您所想，我们介绍的每个示例都可能引出多种思路。WordPress 拥有丰富的选项，通常提供多种方法来解决同一个问题。

例如，您可以构建一个区块主题，使用 theme.json 进行设置，但完全依赖 style.css 进行样式设置，从而充分利用 CSS 的广泛功能。或者，您可以有条件地将样式加入队列，以便仅在使用特定变体时加载它们。

可能性无穷无尽！