自从Wordpress使用古腾堡编辑器后，功能更加强大了，形式也变得更丰富。工具虽好，但我们还必须学会怎么去运用，今天我给大家介绍一下如何轻松地向古腾堡区块添加额外CSS类，让区块也可以进行各种自定义操作。
工作原理
要向某个区块中添加一个额外 CSS 类，请点击您正在编辑的区块。然后，查看右侧的区块设置，找到高级设置。
如果在右侧没有看到区块设置，请点击右上角的齿轮 (
) 图标，打开设置。
您可以通过高级区块设置在区块中添加一个 CSS 类，从而编写自定义 CSS ，根据需要设置区块样式。
您可以将类定义为：
- 一个单词，例如
justify - 一个由多个单词组成的术语，单词之间以连字符分隔，例如
justify-class
如果仅希望对齐某些区块的文本，可以将一个类（例如 my-justify-class）添加到段落区块设置的“额外 CSS 类”字段中。
然后，我们可以在“区块” → “高级” → “额外的 CSS 类”内填入自定义CSS，
然后，访问您的 CSS 编辑器并为类编写一个类似于以下的样式：
.my-justify-class { text-align: justify;}您还可以用空格将各个类分隔开来，将多个类添加到同一个区块中。例如：special-class-1 special-class-2
定义类时，请注意不要使用可能已在网站代码中定义的类。您需要使用站点 CSS 中尚未使用过的唯一术语。
您可能知道，在编写 CSS 代码时，我们通过在类前面放置一个圆点来定位类，即
.page。但是，在区块设置中将类定义为额外的 CSS 类时，请勿在类前面放置圆点，否则将无效。
举例说明
例如把最省事的“关于我们”页面的“用户画像”标题进行居中，这个方法来实现就再好不过了，设置前，“用户画像”标题栏默认为左对齐。如下：
- 打开页面设置，在“区块” → “高级” → “额外的 CSS 类” 内填入自定义CSS：
- 将下方代码添加到主题的 style.css 中：
.user-portrait-text-block {text-align: center;}- 设置完成，清除缓存后“用户画像”标题栏实现了居中对齐。效果如下所示：
就这么简单！到现在还有很多用户使用插件实现这一功能，如“Blocks-CSS”或“Custom CSS”等，其实完全没有必有，否则，这么好用的古腾堡编辑器不就沦为虚设？赶紧试试吧，如有不懂的地方，可以在下方评论区跟我互动哦！
微信扫一扫 
支付宝扫一扫 
