WordPress 区块编辑器设置和使用教程 | WordPress 教程 ④

WordPress 系统目前使用的是古腾堡编辑器，自 2018 年 12 月 WordPress 5.0 推出以来，古腾堡编辑器被设为默认编辑器，取代了经典编辑器。古腾堡编辑器基于“块”概念，每个内容元素如段落、图像、视频等都作为独立的块来管理，因此，古腾堡编辑器，也称作块编辑器。

古腾堡编辑器提供了直观的可视化编辑体验，极大地简化了网页设计过程，并支持通过插件扩展更多功能。用户可以通过简单的拖拽和调整来创建和布局内容，打造丰富多彩的网页和文章。对于希望轻松创建专业网页的用户来说，这是一个强大且灵活的工具。

在 WordPress 新建文章或者新建页面，就会进入到古腾堡编辑器操作页面。

默认情况下，古腾堡编辑器整个页面由3个部分组成：

• 顶部工具栏
• 带有文章/页面设置和块设置的侧边栏
• 内容编辑区

顶部工具栏

顶部工具栏显示了在文章或页面内容编辑中常用的几个功能。

我们从左到右依次介绍：

顶部工具栏左侧的6个图标。

WordPress 标志或站点图标

默认显示为 WordPress logo，如果在设置 – 常规页面设置了站点图标，则这里会显示站点图标。点击这里的图标会返回到 WordPress 后台“所有文章”页面。

区

区块插入器

向文章或页面添加区块。

点击蓝色加号按钮图标，或者文章编辑区域中的黑色加号按钮图标，会在页面左侧打开区块列表页。

区块

我们可以在区块列表页面中点击或者拖动任意需要的区块，将其添加到文章或者页面编辑区任意位置。

区块样板

在“区块样板”选项卡中，我们可以调用编辑器内置的各种内容排版模板，

点击任意模板，该模板会直接插入到当前页面的内容编辑区，我们只需要把其中的文字，图片等内容，以及配色样式改成自己需要的，无需从0开始对页面或者区块进行设计，节省了大量的时间。

如果某个区块会在多个页面使用，例如促销 Banner，则可以直接将该区块添加为自定义的区块样板，例如命名样板为“40%OFF”，然后在其他页面，打开“区块样板”-“我的区块样板”，调用“40%OFF”，就可以在其他页面快速添加已经设计好的样板。

区块媒体

在“媒体”选项卡中，可以直接查看我们上传到 WordPress 媒体库中的图片，音频，视频等文件，并将其插入到内容编辑器中。或者直接查看并将 Openverse 资源库中的图片，视频等文件插入到内容编辑器中。

编辑和选择工具

铅笔图标表示区块的“编辑”和“选择”功能。

点击铅笔图标，或者敲击键盘的 Enter 和 ESC, 可以在区块编辑和区块选择2个功能之间进行切换。

选择“选择工具”（或按键盘上的 Esc 键）可以选择单个区块，方便对区块进行拖动排序操作。

在选择状态下，鼠标再次点击区块，或者敲击键盘 Enter 键，直接进入到区块的编辑状态。

撤销和重做

左箭头和右箭头图标，表示撤销和重做功能。

我们在内容编辑区的所有操作都会被记录下来，当操作上出现错误，例如误删了一段文字内容，则可以点击顶部工具栏上的左箭头撤销删除，把误删的内容找回。每点击一次左箭头可以撤销一个操作。

右箭头是左箭头的反向操作，重做一个撤销的操作，例如我们刚刚通过左箭头撤销找回了误删的内容，但是又不想要这段内容了，可以直接点击右箭头重做，撤销刚刚的撤销操作，将找回的文字再次删除。

列表视图

三横线图标，表示列表视图功能。

点击图标，会在左侧打开边栏，边栏包含“列表显示”和“大纲”两部分内容。

列表显示可以查看当前文章/页面上的所有区块的列表，点击列表中的某个区块，可以在内容编辑区快速定位到该区块，并对该区块进行编辑操作。上下拖动列表显示中的区块可以快速对内容进行重新排序。

按住键盘上的 Shift 键，使用鼠标可以一次性选择多个区块，然后对多个区块进行复制，组合，移动等等操作。

大纲提供文章/页面详细信息，包括当前页面的字符数和字数统计、阅读时间，以及显示文章/页面标题结构的文档大纲。

顶部工具栏右侧的5个图标。

右侧的5个图标在文章发布前后显示有所不同。

文章发布前，最左侧的是“保存草稿”，蓝色背景的是“发布”按钮；文章发布后，“保存草稿”换成了“查看文章”图标，蓝色背景的“发布”换成了“更新”按钮。

保存草稿

文章或者页面内容会存放在 WordPress 的草稿箱中，草稿状态下的内容不会显示在网站前台，后面可以随时再次打开继续编辑内容。

预览

通过预览功能可以在网站后台查看页面在桌面端，平板端，以及移动端的显示效果。点击“在标签页中预览”可以直接在网站前台查看页面显示效果。

查看

已发布文章的编辑页面会显示“查看文章”图标，和“在标签页中预览”功能类似，直接在网站前台查看页面显示效果。

发布/更新按钮

发布或者更新发布当前文章或者页面内容，使文章或者页面公开可见。

侧边栏设置区

设置图标 – 显示或隐藏文章/页面侧边栏设置和区块设置。

在“文章”设置选项卡页面，是关于文章摘要，分类目录，标签，特色图片，摘要，以及评论的设置。“区块”设置选项卡页面，则是关于每个区块的具体设置，包括区块内文本颜色，区块背景色，区块内链接文字颜色，字体大小，区块边距和锚点设置。

三个垂直点图标为“选项”，点击可以显示更多设置选项。包括编辑器视图，可视化编辑器和代码编辑器的切换，区块样板管理，以及编辑器偏好设置。

个人推荐“选项”中的所有设置使用默认设置即可。当然我们也可以尝试切换编辑器的视图模式，或者比较下可视化编辑器和代码编辑器的不同，找到适合自己的编辑器设置。

“选项”设置最底部的“偏好设置”可以显示或者隐藏整个古腾堡编辑器中的某个设置选项。

例如，我不需要在发布文章或者页面之前为文章或页面添加“摘要”内容，那么我可以直接在“偏好设置”中取消勾选“摘要”这一项，在文章发布右侧工具栏中，“摘要”设置就会被隐藏起来，让页面更紧凑，整个操作设置流程更流畅。

内容编辑区

在内容编辑区，选中任意区块，可以在区块上方打开区块设置工具栏。如果在上面的“选项”设置中，视图选择了“顶部工具栏”，则区块设置工具栏会显示到整个页面的最顶部的工具栏中。

区块设置工具栏中，

第一个设置选项为切换区块格式，例如当前选中的区块为“段落”，我可以将其切换为“标题”，“列表”等格式的区块，让这段文字以不同的样式显示。

第二个设置选项为拖动区块，鼠标按住“6个点”图标，可以对当前区块进行上下拖动重新排序操作。

第三个设置选项为上下移动区块，点击向上或者向下图标，可以将当前区块上移或者下移。

第四个设置选项为区块内容对齐排版，将区块内的内容居左，居中，或者居右对齐显示。

第五到第七个设置选项依次为加粗，斜体，添加链接操作。选中区块内部分文字内容或者图片之后，可以对这部分内容进行加粗，斜体设置，或者添加超链接。

第八个设置选项为针对区块内部分文字内容进行的“更多”设置，可以为区块内的文字内容添加“上标”或者“下标”，内联代码或者图片，删除线效果，高亮为区块内部分文字设置字体颜色，或者背景色。

第九个设置选项为针对某个区块进行的“更多设置”操作，包括：

• 区块的复制 – 复制是将区块内容复制到电脑剪切板中，我们可以将复制的内容粘贴到任意地方，不仅仅局限于当前的编辑器中；
• 创建副本 – 创建副本则是直接在当前区块下方一键复制粘贴一个一模一样的区块出来。
• 在之前 / 之后添加 – 在当前区块上方或者下方添加一个新的区块。
• 复制 / 粘贴样式 – 只复制某个区块设置的样式，而不复制区块内的具体内容，然后将样式粘贴到其他区块。例如某个区块设置了背景色和文字颜色，我们可以通过复制和粘贴样式功能，将背景色和文字颜色设置一键复制到其他区块。
• 组合 – 选择多个区块之前，点击组合，可以将选中的多个区块添加到一个区块“群组”中，然后对“群组”进行移动排序和对齐样式修改，复制，编辑等操作，进而实现对群组中所有区块的批量设置操作。
• 锁定 – 锁定区块之后，只会禁用掉针对区块的移动和删除操作，我们仍然可以对区块进行内容的编辑或样式的修改等等操作。
• 重命名 – 古腾堡编辑器支持对每个区块单独命名。在通过左侧边栏的“列表显示”查看整篇内容的区块时，默认情况下段落区块显示为默认名称“段落”，标题区块显示为具体的标题名称，图片区块会显示缩略图。我们可以对段落区块重命名，快速找到整篇文章中想要的内容段落。
• 创建新样板 – 样板可以理解为区块模板，我们可以将某个或者某几个区块添加为“新样板”，然后在其他任意页面将“新样板”作为模板插入到页面的任意位置。如果选择样板数据同步的话，则修改网站任意位置的样板内容，网站所有相同样板的内容会同步更新。
• 移动至 – 将某个或者某几个区块快速移动至当前页面内容中的任意位置。点击“移动至”选项之后，页面中会出现一条蓝色的横线，这条横线就是移动的目标位置，我们可以通过键盘上下按钮移动蓝色横线在内容中的位置，然后敲击键盘的 Enter 键，完成区块的移动。
• 作为 HTML 编辑 – 将某个区块的可视化编辑器切换为代码编辑器窗口。
• 删除 – 删除当前区块。

经典编辑器

WordPress 经典编辑器是 WordPress 中的一种传统内容编辑方式，2018 年之后，WordPress 将默认的编辑器从经典编辑器切换到了区块编辑器。

WordPress 经典编辑器基于标准的文本编辑器界面，类似于常见的文字处理软件，如 Microsoft Word。用户通过经典编辑器可以添加和格式化文本、插入图片、创建链接等，所有操作都集中在一个编辑窗口中。

与块编辑器不同，经典编辑器不使用块的概念，因此在创建复杂布局和多媒体内容时相对有限。尽管如此，它简单直观的界面仍然受到许多用户的喜爱。如果只是写博客，对网页设计和页面排版没有需求，可以通过安装经典编辑器插件，继续使用这个编辑器进行内容管理。

安装经典编辑器

在“插件” – “添加插件” 页面搜索和安装“经典编辑器 Classic Editor”。

安装好经典编辑器插件之后，区块编辑器不会自动删除或者禁用，相当于我们的 WordPress 网站有两种不同的编辑器可以使用，在 WordPress 设置 – 撰写设置页面，可以修改网站后台所有用户的默认编辑器，以及是否允许用户在网站后台自行选择要使用的编辑器。

如果设置默认编辑器为经典编辑器，则我们新建或者编辑任意文章或者页面时所使用的编辑器就是经典编辑器。无论默认编辑器是哪种，当设置为“允许用户切换编辑器”之后，在文章列表页面，鼠标放到任意文章标题上时，下方会出现两个编辑器的编辑选项，点击“编辑（区块编辑器）”就是使用区块编辑器编辑当前文章或者页面内容；点击“编辑（经典编辑器）”则是使用经典编辑器编辑当前文章或者页面内容。

下图就是经典编辑器的内容编辑页面。

默认只显示一行内容编辑选项：包括段落格式，字体加粗斜体设置，内容列表设置，内容引用格式，内容对齐方式，文字超链接的添加，以及内容隐藏设置。

点击“显示/隐藏工具栏”按钮，可以显示第二行的内容编辑选项，包括为内容添加删除线效果，段落之间插入分割线，设置字体颜色或者背景色，粘贴，清除样式，插入特殊字符，段落缩进，撤销和重做功能等。

因为和 Word 文档的内容编辑工具类似，且 WordPress 经典编辑器功能上更加的简约，因此，经典编辑器相比较于区块编辑器来说更好入手。但是对于已经习惯使用区块编辑器的人来说，经典编辑器的功能显得会单薄很多。

个人推荐使用区块编辑器。

当然，您也可以分别试用下两款编辑器，然后选择适合自己的。