目录
大纲
WP建站和运维

块样式变量

欢迎来到本课程,我们将探讨如何创建和使用块样式变体。

学习目标

通过本课程,您将能够:

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

什么是块样式变体?如何将其包含在主题中?

这里以Twenty Twenty-Four主题为例进行说明。

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

注册块样式变体

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

查看Twenty Twenty-Four主题的functions.php文件并向下滚动,可以看到register_block_style函数,这里正在修改核心标题块的一些样式。

使用theme.json自定义核心块样式

查看Twenty Twenty-Four主题的theme.json文件,向下滚动到约506行,这里添加了variations属性以提供圆角图片的选项。

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

点击图片并进入样式面板,可以看到”圆角”选项。

后续步骤

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