使用Gutenberg块编辑器：Gutenberg初学者版

是否要使用古腾堡块编辑器（也称为WordPress编辑器），但不确定如何添加或使用块？

在这篇文章中，您将学习如何使用新的WordPress编辑器以及如何扩展其功能。

准备好的让我们开始：

如何使用古腾堡块编辑器

创建帖子时将使用块编辑器和WordPress中的页面。这是一个直观的工具，使您能够在不必自己编写HTML的情况下向网站添加内容，尽管您可以在视觉（块）编辑器和代码（HTML）编辑器之间自由切换。

在WordPress中，页面和帖子被称为“帖子类型”。根据帖子类型的不同，每个帖子的块编辑器或多或少都是相同的，但也有一些不同之处。

我们将继续使用post，您可以将鼠标悬停在仪表板左侧管理菜单中的post上，然后选择Add New来创建一种post类型。

我们还将使用Kadence WordPress主题，因此我们的编辑器可能有一些与您不同的设置，而我们的帖子在前端可能会有一些不同。我们还有SEOPress SEO插件已安装，因此您将在我们的屏幕截图中看到一些与SEO相关的面板。

当您第一次打开块编辑器时（不幸的是，当您清除浏览器缓存时），块编辑器会向您发出欢迎之旅。请随时花点时间浏览一下。

首先，在标记为“添加标题”的字段中插入标题这不需要是您想要使用的实际标题。在准备发布文章之前，您可以使用工作标题。现在添加标题只会帮助您在查看所有帖子列表时识别草稿。

只需知道，你在这里输入的标题将代表你的文章在网站上的标题，以及当它在社交媒体上共享时的标题。

单击“下一步保存草稿”。这是位于编辑器右上角菜单中的链接。或者，在键盘上按Ctrl/Cmd+S。WordPress编辑器具有内置的自动保存功能，但如果突然断电或断开与internet的连接，则可以不时手动保存草稿，从而消除丢失草稿的风险。

如果您想在不发布文章的情况下在前端查看文章的外观，请单击预览链接，然后选择“在新选项卡中预览”。

注：只要你点击发布按钮，你的帖子就会为访问你网站的所有人直播。这就是为什么现在最好点击Save Draft使其保持脱机状态。

这可以让你看到你的帖子与主题风格的搭配。

使用古腾堡块库

使用WordPress的块编辑器创建的任何帖子或页面都由内容块组成。这意味着如果你的帖子有两个段落，然后是标题，最后是图像，那么你实际上有两个段落块，一个标题块和一个图像块。

WordPress默认有几十个块，但您可以使用插件扩展库。一些第三方主题和插件甚至有自己的模块。

现在让我们继续使用WordPress的默认块。从点击写着开始写作的地方开始。这将自动创建段落块，如果要添加段落，可以开始键入。

如果要使用其他块，请单击加号+按钮。

默认情况下，古腾堡块编辑器会继承主题的字体样式，以便您的帖子在创建时显示在前端。这就是为什么我们截图中的文字看起来可能与您的略有不同。

将光标放置在段落块中时，将显示浮动工具栏。它允许您以多种方式转换段落文本，例如添加粗体或斜体样式，甚至包括链接。它与Microsoft Word或Google Docs没有太大区别。

让我们从段落块开始讨论块设置。如果查看编辑器右侧的侧栏，您会注意到有两个选项卡：一个用于整个帖子的设置（post），另一个用于单个块的设置（block）。

如果还没有，请单击“块”选项卡。段落块具有排版设置，可用于自定义此特定段落使用的字体大小以及段落中每行的高度。

您的主题已经使用了全局字体大小和行高，因此建议不要使用这些设置，除非您希望此特定段落具有不同的设置。通过转到“外观”自定义主题的默认排版设置→ 自定义程序。

默认情况下，“颜色”面板处于关闭状态。单击它以打开它，但请记住，文本颜色是您可以在自定义程序中配置的另一个全局设置。尽管如此，此面板允许您自定义特定段落的颜色，甚至为其添加背景。

当您想要引起对特殊注释或警告的注意时，后一种设置非常有用。

您创建的每个新段落都是不同的段落块，因此具有不同的设置。如果要同时控制多个段落块的设置，则需要对其进行分组。

用光标高亮显示多个段落，然后单击悬停在上面的三点菜单，然后选择“组”。

现在，您可以编辑多个段落块的颜色设置。不幸的是，文本设置仍然需要单独配置，因为组功能用于一次创建多个可重用块。

说到这里，当您单击组块和单个块的三点菜单时，您还会注意到一个名为“添加到可重用块”的选项。

这允许您将创建的块保存到自己的个人库中。它将保存其内容和设置。你甚至可以给他们起个独特的名字，比如“社交媒体行动号召”当您想在另一个页面上使用该块时，只需在添加新块时搜索它即可。

关于段落块，可重用块对于您经常在多篇文章中重复的信息非常有用。这包括披露您经常使用的关联链接和行动要求，例如“在Twitter和Instagram上关注我”，并包含指向这两个配置文件的链接。

可重用块作为全局块运行。这意味着，如果在帖子a、帖子B和帖子C中插入一个可重用的块，然后使用编辑的设置将其添加到帖子D中，那么这些设置在帖子a、B和C中也会更改。

如果只想更改Post D的块，则需要再次单击该三点菜单，然后选择“转换为常规块”。

标题栏

标题帮助我们将博客文章分成几个部分，然后再将这些部分分成几个小节。这与多年来报纸和杂志文章被分成不同部分的方式没有什么不同。

网页最多包含六个标题：H1到H6或标题1到标题6。H1-H6标签是HTML标签，表示标题的大小和在SEO中的重要性。

你的主题使用H1作为文章标题，H1是最大和最重要的标题，因此你应该在整个文章中使用H2作为主要标题，H3作为次要标题。H4-H6不太常见，但您可以在需要时使用它们。

如果您再次找不到加号按钮，请将光标放在最后一段的末尾，然后按Enter键。然后，使用该按钮在帖子中添加标题栏。

默认情况下选择H2标记。需要时，单击它以选择其他标记。

段落标记的设置是相同的，所以我们不必费心去检查它们。只需知道定制器中主题的排版设置也应该具有标题的全局设置。

图像块

按照相同的步骤添加图像块，但这次选择图像。

WordPress提供了三种上传图像的方法：

• 上载–从设备中选择要上载到WordPress的文件。默认情况下，文件将存储在托管服务器上，除非您为媒体文件设置卸载功能。
• 媒体库–从WordPress媒体库中选择图像。此库允许您管理WordPress中的媒体文件。选择此选项还允许您一次上载多个图像，但仍可以选择仅将一个图像分配给此特定块。
• 从URL插入–添加包含图像的URL，然后选择要插入到帖子中的图像。由于许多原因，这种选择是不明智的。首先，图像可能会从您插入的URL中删除，这将导致它在您的网站上中断。其次，如果你插入的图像不是无归属的，你可能最终会侵犯版权。最后，最好是创建自己的原始图像，这样你的博客会更专业。

选择图像后，将显示一个浮动工具栏，与段落和标题块一样。它允许您更改图像的左对齐、右对齐或居中对齐，添加图像链接，在图像上添加文本，甚至裁剪图像。

您甚至可以在图像下方添加标题。

对于设置，可以向图像和备选文本添加样式。使用简短但描述性的标题作为表示图像内容的alt文本。这是为了搜索引擎优化的目的。

在大多数情况下，您还应该选择“全尺寸”作为图像大小。WordPress会自动将图像缩小到博客的内容宽度。

请务必在上查看我们的指南为web优化图像在这方面寻求更多帮助。

其他区块和第三方区块

正如我们所说，WordPress有一个完整的库，其中有几十个按不同部分排列的内容块。当您要添加新块时，请单击“全部浏览”按钮以全部查看。

以下是您可能会使用的几种常见方法：

• 列表
• 引用
• Pullquote
• 桌子
• 陈列室
• 掩蔽
• &媒体文本
• 视频
• 按钮
• 柱
• 社交图标
• 社交媒体嵌入
• 常见问题解答

如果您想访问更多块，请使用第三方块插件。这使您可以访问更多的内容块，其中一些是对WordPress默认块的改进。

终极街区是最受欢迎的选择之一。这个免费插件允许您访问Gutenberg编辑器的20个附加块。这些包括推荐、行动要求、内容切换、选项卡式内容、目录等。

另一个很好的选择是Kadence区块，并与Kadence WordPress主题完美搭配。Kadence主题为古腾堡编辑和Elementor公司，因此，如果您更愿意使用更轻量级的Gutenberg编辑器在Elementor上构建站点，那么额外的Gutenberg块就太棒了。

该插件向您的收藏中添加了15个块，提供了古腾堡默认块的更好版本以及一些额外功能。这些包括纪念、信息框、手风琴、目录、倒计时等等。

你可以如果要将两组块添加到集合中，请将Ultimate块和Kadence块并排使用。

Kadence Blocks还有设计库，这是一个按钮，您可以在块编辑器的顶部菜单中找到。此库有三种新的设计元素类别供您使用。首先，它有一些部分，这些部分是预先设计的页面部分，例如定价表、联系人表单或用于展示团队成员的行，可供您导入和使用。

启动包包含完全设计的页面。“线框”类别包含与“节”类别类似的设计元素，但线框元素没有演示内容。

有些插件不是专用的Gutenberg插件，但它们确实有块，您可以使用这些块轻松地将其功能添加到块编辑器中。情况就是这样WP表格生成器，由同一团队在Ultimate Block背后开发的表插件。

现在，您可以在块编辑器中插入设计良好的定价、数据和比较表，而无需依赖页面生成器。

最后的想法

与WordPress的classic editor等WYSIWYG编辑器相比，Gutenberg块编辑器有一定的学习曲线，但一旦克服了这些障碍，它就非常容易使用。此外，它使您能够在博客帖子中使用更多的设计元素，而不必求助于页面生成器插件。

如果您在WordPress之外的应用程序（如Google Docs或Microsoft Word）中编写草稿，也可以提高效率。这些应用程序允许您从中复制帖子并将其粘贴到Gutenberg block editor中，同时从这些应用程序导入链接、标题和文本样式。谷歌文档甚至会导出你的图像。

相关阅读：

• 如何在WordPress中添加页面
• 如何向WordPress添加联系人表单
• 如何修复WordPress中的500个内部服务器错误
• 如何在WordPress中添加Google分析
• 如何使用WordPress发送短信

---

披露：这篇文章包含附属链接。这意味着，如果你购买，我们可以给你一小笔佣金。