使用子主题为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 的广泛功能。或者，您可以有条件地将样式加入队列，以便仅在使用特定变体时加载它们。

可能性无穷无尽！

css theme.json 主题样式

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

文章目录

注册区块级子主题

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

覆盖样式变体

创建自定义样式变体

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

styles.css的一个简单用例

添加区块样式变体

在PHP中注册样式

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

使用JSON创建区块样式变体

小结

评论留言

取消回复

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

文章目录

注册区块级子主题

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

覆盖样式变体

创建自定义样式变体

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

styles.css的一个简单用例

添加区块样式变体

在PHP中注册样式

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

使用JSON创建区块样式变体

小结

相关文章

评论留言

取消回复