区块样式变体

欢迎来到本课程,我们将一起学习如何创建和使用区块样式变体。

通过本课程,你将能够:

  • 描述区块样式变体,并解释如何将其包含在你的主题中,
  • 使用 PHP 或 JavaScript 注册新的区块样式,以及
  • 使用 theme.json 文件自定义核心 WordPress 区块样式。

什么是区块样式变体,以及如何将其包含在你的主题中?

这里有一个使用 Twenty Twenty-Four 主题的示例。

如果我们在这里选择 H2,可以看到 带星号 样式已被应用,其中包含一个额外的 CSS 类 .style-asterisk

注册区块样式变体

现在让我们看看如何使用 PHP 注册区块样式。

如果我们查看 Twenty Twenty-Four 主题的 functions.php 文件并向下滚动,会看到 register block style 函数,这里正在通过一些样式修改核心区块标题的区块样式。

接下来,让我们看看如何使用 theme.json 自定义核心 WordPress 区块样式。

如果你查看 Twenty Twenty-Four 主题的 theme.json 文件,向下滚动到大约第 506 行,会看到添加了一个 variations 属性,以便提供圆角图片的选项。

我们可以进入站点编辑器查看实际效果。

点击一张图片,进入样式面板,可以看到“圆角”作为一个选项出现。

后续步骤

如果你想了解更多关于样式的知识,可以查阅区块编辑器手册,或者通过访问 WordPress.org 上的主题手册,随时了解区块样式变体的相关内容。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注