WordPress Gutenberg 教程：初学者指南

如果您想为您的 WordPress 网站创建和开发网页，页面构建器插件至关重要。 WordPress Gutenberg 块编辑器于 2021 年推出，具有完整的站点编辑功能。 虽然它问世不久，但 Gutenberg 块编辑器与其他流行的页面构建器竞争激烈。 如果您想开发一个对 SEO 友好的 WordPress 网站，Gutenberg 块编辑器可能位于列表的顶部。 这个 WordPress Gutenberg 教程将演示如何轻松地使用 Gutenberg 块编辑器为您的 WordPress 网站开发对 SEO 友好的页面。

我们将向您介绍 Gutenberg 块编辑器的所有基本功能，以帮助您开始您的第一个项目！

为什么要选择 Gutenberg 块编辑器？

Gutenberg 块编辑器具有开发令人惊叹的轻量级 WordPress 网站所需的所有基本元素。 使用起来毫不费力； 因此，您不需要太多时间使用 Gutenberg 块编辑器来制作页面。 Gutenberg 块编辑器与其他流行的页面构建器的显着区别在于其低比率的 SEO 友好编码。 市场上所有其他流行的页面构建器都具有非常高的编码率，导致您的网站页面加载速度较慢。

Gutenberg 块编辑器随 WordPress WooCommerce 安装免费提供。 您无需为使用编辑器支付任何费用。

另一方面，如果您想使用其他流行的页面构建器的完整版本，则必须支付额外的费用。 凭借低比率编码和免费完整版，Gutenberg 块编辑器在与其他流行的页面构建器插件的竞争中处于领先地位。 您可以将 Gutenberg 块编辑器与 WordPress 的最佳 WooCommerce 主题一起使用。

.

WordPress Gutenberg 教程：Gutenberg 编辑器中可用的块

由于 Gutenberg 是基于块的编辑器，因此您必须使用不同的块来开发和完全自定义您的 WordPress 网站。 下面是古腾堡块编辑器中所有可用块的列表。

WordPress Gutenberg 教程：添加和自定义 Gutenberg 块

在块编辑器中打开页面后，您将看到一个黑色 (+) 加号图标。 此图标用于将块添加到您的编辑器。 单击 (+) 图标后，您将获得一个元素列表。 单击您要添加的任何元素，它们将被添加到您的编辑器中。 之后，单击该块将为您提供自定义选项，以根据需要对块进行更改。

阻止设置

在这个 WordPress Gutenberg 教程中，我们将添加几个块并观察它们的使用。 让我们创建一个新页面并继续开发。

WordPress Gutenberg 教程：更改块类型

将块添加到编辑器后，将鼠标悬停或单击块，您将看到几个自定义选项。 Gutenberg 块设置中的第一个选项是更改块类型。 将内容添加到块后，您仍然可以转换块类型。

例如，您添加了一个标题块。 通过单击块工具栏中的更改块类型选项，您可以将块类型转换为其他几种类型。 请注意，您只能将块类型转换为受限块类型。 例如，您不能将标题块转换为图像块。 但是您可以将段落块转换为拉引号块。

WordPress Gutenberg 教程：对齐

您可以从 Gutenberg 块设置中更改文本或模块的对齐方式。 可用的对齐方式是左对齐、右对齐和居中对齐。

WordPress Gutenberg 教程：粗体/斜体

下一个选项是粗体和斜体选项。 选择一部分文本后，您可以将其格式更改为粗体和斜体。

WordPress 古腾堡教程：链接

您可以使用 Gutenberg 块设置工具链接选项添加内部或外部链接。 只需选择要链接的文本部分，然后单击链接图标。 您将看到 URL 的输入字段。

WordPress 古腾堡教程：排版

您可以更改选定文本的颜色和字体大小。 在编辑器的右侧，每次选择要自定义的块时都会显示选项。 转到编辑器右侧的块部分，然后在标题部分下找到自定义选项。 在标题部分的排版框中，选择字体大小、字体粗细和字母大小写。 排版选项在所有对古腾堡友好的顶级 WordPress 主题中都是相同的。

WordPress 古腾堡教程：颜色

您可以使用文本颜色和背景颜色选项轻松更改文本及其背景的颜色。

WordPress Gutenberg 教程：附加 CSS 类

当您选择一个块进行自定义时，您会在高级部分下的块自定义框内的右侧找到一个额外的 CSS 类框。 您可以在附加的 CSS 框中编写多个类，方法是用逗号 (,) 分隔这些类。

使用 Gutenberg 块编辑器创建简单模板

我们已经看到了古腾堡的基本使用和设置。 现在我们将使用一些通用块并创建一个简单的模板。

WordPress Gutenberg 教程：创建和自定义标题

在 Gutenberg 块编辑器中，单击 (+) 图标并单击“标题”块将其添加到编辑器中。 根据需要更改颜色和字体样式。

WordPress Gutenberg 教程：向页面添加段落

再次单击 (+) 图标并添加一个段落以阻止编辑器。 使用 Gutenberg 块设置和右侧的自定义选项插入段落并设置其样式。

WordPress Gutenberg 教程：在两列中添加图像和文本

从 Gutenberg 块列表中，单击“列”，然后选择 50/50，因为我们将并排放置两个等分的列。 现在在第一列中，添加一个图像块并使用它上传图像。 在第二列中，添加一个段落块并插入一个段落。 确保每次要保存更改时都“单击”更新。

WordPress Gutenberg 教程：为推荐部分添加报价

浏览块列表并选择“报价”块。 将报价插入块中并根据需要对其进行自定义。

WordPress Gutenberg 教程：向页面添加按钮

浏览古腾堡块列表并选择“按钮”块。 为按钮命名以显示，并使用 Gutenberg 块设置中的链接功能将此按钮链接到您的内容。

WordPress Gutenberg 教程：最终输出

结论

在本教程中，我们学习了 Gutenberg 块设置的基本用法。 我们还使用了几个块来构建一个简单的 Web 模板。 Gutenberg 块编辑器简单快捷，对于更好地 WordPress 网站的 SEO 非常有效。

如果您可以学习我们在这里展示的所有基础知识，您可以立即通过练习获得更多技能！ 我们希望本教程对您学习 WordPress Gutenberg 块编辑器有所帮助。 随意阅读我们关于如何使用 WordPress 架构标记来改善网站的 SEO 的文章。