为WordPress文章区块添加额外的CSS类

为Wordpress文章区块添加额外的CSS类
为Wordpress文章区块添加额外的CSS类

从WordPress 5.0版开始,古腾堡(Gutenberg)编辑器已被直接集成到WordPress管理员仪表盘中。现在,它是WordPress默认的编辑器。

在Gutenberg编辑器中使用的每个块,都可以通过块属性定义额外的CSS类。通过这些类,我们可以对每一个区块进行独特的样式设计。以下教程将展示如何使用Gutenberg编辑器向块添加额外的CSS类。

添加额外CSS类步骤

设定区块css类的方式非常简单,步骤如下所示:

  1. 登录到Wordpress的管理员仪表盘;
  2. 打开已发布的页面或文章,也可以创建一篇新的页面或文章;
  3. 选中想要修改样式的块;
  4. 选中右面版中的“区块”,如果右侧没有面板,点选右侧顶部的齿轮图标;
  5. 在“区块”中,选择“高级”选项卡,在里面的“额外的CSS类”中可以定义我们要添加的类;
  6. 输入类名称;
  7. 接下来,点击顶部的“发布”;
  8. 在当前主题根目录下的“style.css”样式表文件中,添加该类的样式规则。

额外CSS类规则

CSS通过选择器来确定样式规则应该作用在哪个区域,而类选择器就是CSS选择器中的一种。在古腾堡编辑器中,如果想要对某些区块的样式进行设计,那么我们通过定义该区域的类,以方便我们可以设置该区域的样式规则。

在设定区块的类时,类的名称可以按如下所示的规则来定义:

  1. 单个单词,例如 special;
  2. 由多个单词组成的术语,每个单词之间用连字符隔开,例如 special-class;
  3. 我们可以为一个区块定义多个CSS类,每个类之间用空格分开,例如:special-class-1 special-class-2;
  4. 在定义类时,请注意不要使用网站代码中已经存在的类;
  5. 我们知道,在编写CSS规则时,我们通过在类前面加一个句点来定位类(比如,.page)。但是,在设置区块的额外的CSS类时,不可以在类名称前加”.”。

案例展示

下面我们以案例的方式,来展示如何为古腾堡文章区块添加“额外的CSS类”。我们的文章中有一个区块的内容以列表形式展现,每一个列表项前面都有一个圆点作为项目的开始,我们通过定义“额外的CSS类”的方式,将前面的圆点变成正方形点。

我们首先为该区块定义一个“额外的CSS类”,类名称为“square-bullet-block”。

将自定义类添加到列表块

然后,将以下CSS规则添加到当前主题的CSS样式表文件“style.css”中:

.square-bullet-list-block {
list-style-type: square;
}


更新CSS规则后,该区块的样式显示为以方块开头的项目表,如下所示:

list block with square bullets

通过上面的步骤,我们就已经成功的为目标区块设定了CSS类,并应用了新的样式规则。通过古腾堡编辑器的“额外的CSS类”功能,我们可以为文章创建更丰富的样式。

原创文章,作者:牛奇网,如若转载,请注明出处:https://www.niuqi360.com/wordpress/add-additional-css-classes-to-wordpress-block/

发表评论

登录后才能评论