WordPress如何使用块编辑器添加自定义CSS类

78次阅读

共计 625 个字符,预计需要花费 2 分钟才能阅读完成。

CSS 是一种用 HTML 编写的样式表语言,它允许您给 HTML 标签分配不同的属性,比如颜色、大小、布局和显示等,从而修改网站的基本结构的外观。例如,您可以通过在 WordPress 站点添加自定义 CSS 类,创建想要的设计和外观等。本文将介绍下 WordPress 使用块编辑器添加 CSS 类的操作步骤。

WordPress 5.9 及更高级版本现采用的是新的全站点编辑方法,它于全局样式和基于每个块的设计,减少了对 CSS 和大量编码的需要。但是,将自定义 CSS 类添加到任何 WordPress 块还是有可能的。

首先,在 WordPress 仪表盘中选中 Tools -> Theme File Editor,选择活动主题并打开 Stylesheet 主题文件夹来编辑 style.css 文件,以便在样式表中定义 CSS 类。

WordPress 如何使用块编辑器添加自定义 CSS 类

使用文本编辑器添加 CSS 类和代码。例如,您可以添加一个 justify-class 类实现文本对齐效果。

p.justify-class {
text-align: justify;
}

CSS 类编辑好后,点击 Update File 保存文件。

然后,导航到 Appearance -> Site Editor,打开站点编辑器,选择要自定义的块,并点击 Setting,打开 Advanced 下拉菜单,并找到 Additional CSS class(es),在本文字段中插入 CSS 类。

WordPress 如何使用块编辑器添加自定义 CSS 类

WordPress 如何使用块编辑器添加自定义 CSS 类

添加 justify-class 类后,block 段落中的文本将被两端对齐。另外,您通过用空格分隔,可以将多个 CSS 类添加到一个块中。

正文完