如何使用 WordPress 区块编辑器（Gutenberg 教程）
Supportive, Professional, Client-Focused Service
在 WordPress 中创建精美的内容并不一定让人感到不知所措。
区块编辑器（也称为 Gutenberg）的设计初衷是让页面和文章的构建变得像拖放区块一样简单，无需任何技术技能。
把它想象成用数字乐高积木搭建东西。每一种内容——无论是文本、图像还是按钮——都变成了一个积木，你可以轻松地移动和自定义它们。
我们很早就转用了 Gutenberg 编辑器，并且已经使用了多年。这帮助我们指导了成千上万的 WPBeginner 用户掌握了这个系统。
在本教程中，我们将向您展示 WordPress 区块编辑器的工作原理。
您将学习到让内容创作更快、更有趣的简单技巧，并发现无需任何编码知识即可让您的网站看起来更精致的功能。
注意：本文讨论的是如何使用区块编辑器，它用于编辑文章和页面。
块编辑器（Gutenberg）和经典编辑器有什么区别？
在深入了解区块编辑器之前，让我们先比较和了解 Gutenberg 区块编辑器和旧版经典编辑器之间的区别。
以下是WordPress经典编辑器的界面：
它带有一个文本编辑器，提供一些基本的格式设置选项。但它的功能和外观都相当有限。
这就是WordPress区块编辑器的样子：
如您所见，它们是 WordPress 中用于创建内容的两个完全不同的编辑器。
旧式经典编辑器是一款文本编辑器，带有类似于微软 Word 的格式设置按钮。
新编辑器采用了一种称为“块”的不同方法（因此得名“块编辑器”）。
区块是您可以添加到编辑屏幕以创建布局的内容元素。您添加到文章或页面中的每个项目都是一个区块。
例如，您可以添加段落、图片、视频、图库、音频、列表等模块。WordPress 提供了涵盖所有常见内容元素的模块，您还可以通过插件添加更多模块。
WordPress区块编辑器比经典编辑器有哪些优势？
WordPress 区块编辑器提供了一种简单的方法，可以向文章和页面添加不同类型的内容。
例如，如果您以前想使用经典编辑器向内容中添加表格，则需要单独的表格插件。
使用块编辑器，您可以轻松添加表格块，选择列和行，然后开始添加内容。
您可以上下移动内容元素，将它们作为单独的块进行编辑，并轻松创建富媒体内容。
最重要的是，WordPress 区块编辑器易于使用和学习。
这为所有刚刚开始创建第一个博客或搭建DIY 商业网站的WordPress 初学者带来了巨大的优势。
接下来，让我们来看看如何使用 WordPress 区块编辑器像专业人士一样创建优质内容。
使用 Gutenberg – WordPress 区块编辑器
区块编辑器设计直观灵活。虽然它的外观与旧版 WordPress 编辑器有所不同，但它仍然具备经典编辑器的所有功能。
我们先来介绍一下你在经典编辑器中执行的基本操作，以及这些操作在块编辑器中是如何实现的。
使用区块编辑器创建新的博客文章或页面
您将像往常一样创建新的博客文章或页面。只需点击WordPress 管理后台中的“文章”»“添加新文章”菜单即可。
如果需要创建页面，请转到“页面”»“添加新页面”菜单。
这将启动区块编辑器。
如何在区块编辑器中添加区块
每篇文章或页面的第一个部分是标题。
您可以使用鼠标移动到标题下方，或者按键盘上的 Tab 键将光标向下移动并开始输入。
默认情况下，下一个代码块是段落代码块。这样用户可以立即开始写作。
但是，如果您想添加一些不同的内容，则可以单击编辑器左上角、现有区块下方或区块右侧的“添加新区块”按钮 [+]。
点击该按钮将显示添加模块菜单，顶部为搜索栏，下方为常用模块。
您可以点击标签浏览模块类别，或者输入关键词快速搜索特定模块。
如果您不想使用鼠标点击按钮，也可以使用键盘快捷键。
首先输入 / 搜索代码块，然后按键盘上的 Enter 键插入代码块。
在新编辑器中使用模块
每个模块上方都有一个工具栏。工具栏中的按钮会根据您正在编辑的模块而变化。
例如，在下面的屏幕截图中，我们正在处理一个段落块，其中显示了基本的格式设置按钮，如文本对齐、粗体、斜体、插入链接以及三点菜单下的更多选项。
除了工具栏之外，每个模块还可以有自己的模块设置，这些设置会显示在编辑屏幕的右侧栏中。
这些设置会根据您正在编辑的区块而有所不同。例如，“段落”区块允许您编辑文本、背景和链接颜色，以及字体。
你可以上下移动方块，也可以重新排列它们。
如果要执行此操作，只需单击拖放按钮或单击模块工具栏中的上下按钮即可。
将模块分组并列排列
区块编辑器还配备了方便的工具，用于管理和组织您的内容布局。
按住键盘上的Shift键，然后点击多个方块，即可选择多个方块。
之后，点击工具栏中的块类型按钮，将选定的块转换为组或列。
然后您可以将样式应用于整个组块，例如更改对齐方式或间距。
区块编辑器还允许您添加空的“组”或“列”区块。
之后，你可以用其他方块填充它们。
您可以根据需要，在每一列中添加任何类型的区块。
这样一来，您就可以为不同的使用场景创建美观的布局。
使用同步模式（可重用模块）保存和重用内容
区块编辑器最强大的功能之一是能够保存内容并在网站内重复使用。这是通过同步模式实现的，同步模式以前被称为可重用区块。
同步模式是指可以在多个帖子和页面上使用的模块或模块组。
最棒的是，当你编辑模板时，所有使用过该模板的地方都会自动更新。这对于需要保持一致的内容来说非常理想，例如行动号召框、作者简介或联系信息。
要创建图案，只需选择要保存的图块。然后，点击图块工具栏中的三点菜单图标，并选择“创建图案”选项。
此时会弹出一个窗口。您可以在这里为图案命名，并将其归类，以便更好地管理。
最重要的是，您需要确保“同步”选项已开启。这样才能确保图案在所有地方同时更新。
注意💡 ：您还可以将整个组和列用作可重用的模块。这样，您可以保存整个部分并在需要时使用它们。
点击“创建”后，您的新同步模式将被保存。
要在其他帖子或页面中使用它，只需单击块插入器 (+) 按钮，然后在“模式”选项卡下找到它，或者直接按名称搜索它。
模式使网站所有者能够轻松地向其布局中添加常用元素，例如行动号召、社交媒体按钮、横幅等等。
您的 WordPress 主题或插件甚至可能自带图案，或者您可以在 WordPress区块图案库中找到其他人创建的图案。
古腾堡区块编辑器中的发布和管理选项
每篇 WordPress 文章都包含大量元数据，包括发布日期、分类和标签、特色图片等信息。
所有这些选项都整齐地排列在编辑器屏幕的右侧栏中。
Gutenberg 编辑器中的插件选项
WordPress 插件可以利用区块编辑器的 API 将其设置集成到编辑屏幕中。
一些流行的插件自带模块。
例如，WPForms是最好的WordPress 联系表单插件，它允许您使用区块将表单添加到您的内容中。
其他 WordPress 插件也可能将其设置添加到区块编辑器屏幕中。
例如，以下是All in One SEO for WordPress如何允许您在区块编辑器底部编辑 SEO 设置：
同样地，如果您使用WooCommerce运营在线商店，那么您会注意到它也有自己的模块。
这些模块允许您将产品添加到任何 WordPress 文章和页面中。
在块编辑器中添加一些常用块
块编辑器可以做到以前经典编辑器所能做的一切。
不过，你会发现自己做事比以前更快更优雅。此外，它还能做更多的事情，比如让你使用一系列无需代码的选项来设置内容样式。
以下是一些您可以使用的常用模块。
1. 在 WordPress 区块编辑器中添加图片
WordPress 区块编辑器中有一个现成的图片区块。只需添加该区块，然后上传图片文件或从媒体库中选择图片即可。
您还可以从计算机中拖放图像，编辑器会自动创建一个图像块。
添加图片后，您将能够看到区块设置，您可以在其中添加图片的元数据，例如替代文本、图片分辨率大小以及添加指向图片的链接。
2. 在区块编辑器中添加链接
区块编辑器自带多个区块，您可以在其中添加文本。最常用的是段落区块，工具栏中有一个“插入链接”按钮。
所有其他常用文本块在工具栏中也都有链接按钮。
您还可以使用键盘快捷键插入链接，Mac 电脑上的快捷键是 Command + K，Windows 电脑上的快捷键是 CTRL + K。
3. 在古腾堡计划中添加图片库
图库模块的工作方式与图像模块类似。您添加模块后，即可上传或选择图像文件。
4. 使用 Gutenberg 编辑器在 WordPress 文章中添加短代码
所有短代码都将像在经典编辑器中一样正常工作。您可以直接将它们添加到段落块中，也可以使用短代码块。
在区块编辑器中探索其他内容区块
Gutenberg 编辑器承诺通过引入新的区块来解决 WordPress 中一些长期存在的可用性问题。
以下是一些我们认为用户会觉得非常有帮助的精选功能。
1. 在 WordPress 中，如何在文本旁边添加图片
许多用户在使用旧版编辑器时无法在文本旁边添加图片。现在，您可以使用“媒体和文本”模块轻松实现此功能。
这个简单的模块由两个并排的模块组成，方便您轻松添加图片和旁边的文字。
2. 在 WordPress 文章和页面中添加按钮
旧版编辑器的另一个烦人之处在于，向博客文章或页面添加按钮时，要么需要使用插件生成按钮的短代码，要么需要切换到 HTML 模式并编写代码。
幸运的是，Gutenberg 编辑器有一个按钮模块，可以让你快速地向任何文章或页面添加按钮。
您可以为按钮添加链接、更改颜色等等。
3. 在博客文章和落地页中添加精美的封面图片
另一个值得尝试的酷炫功能是封面模块，它允许你为文章和页面添加封面图片或彩色背景封面。
封面图是一张较宽的图片，通常用于页面上的新章节或文章开头。它美观大方，能帮助您创建引人入胜的内容布局。
只需添加一个封面模块，然后上传您想要使用的图片即可。您可以为封面选择叠加颜色，或者将其设置为固定背景图片，以便在用户向下滚动页面时创建视差效果。
4. 在文章中创建表格
经典的 WordPress 编辑器没有按钮可以向文章中添加表格。你必须使用插件，或者通过编写自定义 CSS 和 HTML 代码来创建表格。
现在，区块编辑器默认包含一个表格区块，让您可以轻松地在文章和页面中添加表格。只需添加该区块，然后选择要插入的列数和行数即可。
现在您可以开始向表格行添加数据了。如有需要，您可以随时添加更多行和列，并且提供了两种基本样式选项。
5. 创建多列内容
创建多列内容是经典编辑器完全无法处理的另一个问题。
幸运的是，区块编辑器允许您添加“列”区块，该区块会添加两个段落区块列。
这个列模块非常灵活。您最多可以在一行中添加 6 列，甚至可以在每列中使用其他模块。
使用 Gutenberg 的额外技巧，助您成为 Gutenberg 专家
看着区块编辑器，你可能会想，你花在添加和调整区块上的时间是否会比创建实际内容的时间更多。
嗯，区块编辑器速度非常快，即使是几分钟的基本使用，也能让你毫不费力地立即添加区块。
很快你就会意识到，采用这种方法，你的工作流程将会变得多么高效。
以下是一些高级用户的额外技巧，可帮助您更快地使用 WordPress 区块编辑器。
1. 将模块工具栏移至顶部
您可能已经注意到，在上面的截图中，每个区块顶部都会出现一个工具栏。您可以将此工具栏移动到编辑器顶部。
要访问“顶部工具栏”选项，请单击屏幕右上角的三个点按钮。
2. 使用键盘快捷键
Gutenberg 提供了几个方便的快捷键，可以让你的工作效率更高、更轻松。你应该立即开始使用的第一个快捷键是 /。
只需输入 /，开始输入，编辑器就会显示匹配的模块，您可以立即添加。
如需更多快捷键，请点击屏幕右上角的三点菜单，然后选择“键盘快捷键”。
这将弹出一个窗口，其中列出了所有可用的键盘快捷键。Windows 和 Mac 用户的快捷键列表会有所不同。
3. 拖放媒体文件自动创建媒体块
Gutenberg 允许您将文件拖放到屏幕上的任何位置，它会自动为您创建一个区块。
例如，您可以拖放单个图像或视频文件，系统会自动为您创建模块。或者，您也可以拖放多个图像文件来创建一个图库模块。
4. 添加 YouTube、Twitter、Vimeo和其他嵌入内容
区块编辑器让在 WordPress 内容中嵌入第三方内容变得更加轻松。它提供了所有常用第三方服务的区块。
不过，您可以随时复制粘贴嵌入网址，它会自动为您创建一个区块。
例如，添加 YouTube 视频网址将自动创建一个 YouTube 嵌入块并显示视频。
虽然直接粘贴 URL 对 Facebook 和 Instagram 帖子不起作用，但解决方法很简单。
你只需要使用Smash Balloon Social Photo Feed启用“oEmbeds”功能，然后将 URL 粘贴到“嵌入”块中即可。
在 WordPress 的 Gutenberg 区块编辑器中添加更多区块
WordPress 的区块编辑器允许开发者创建自己的区块。一些优秀的 WordPress 插件为这个新编辑器提供了区块包。
以下是其中几个例子：
1. Spectra WordPress Gutenberg 区块
Spectra WordPress Gutenberg Blocks是一个区块库，其中包含许多高级区块，可帮助您向内容中添加更多设计元素。
Spectra 由广受欢迎的Astra WordPress 主题背后的团队创建，可帮助您创建精美的设计而无需编写任何代码。
PublishPress Blocks是另一个功能强大的区块库，它提供了额外的区块来扩展 Gutenberg 区块编辑器。
它包含精美的布局选项、滑块、按钮、图标、图片库、地图、标签、用户评价、手风琴等。
Stackable – Gutenberg Blocks是一套设计精美的 Gutenberg 区块合集，可用于您的网站。它包含用于容器、文章、功能网格、手风琴、图片框、图标列表、行动号召等的区块。
关于 Gutenberg（WordPress 中的区块编辑器）的常见问题解答
自从 Gutenberg 成为 WordPress 的默认编辑器以来，我们收到了很多关于如何使用它的问题。以下是关于这个区块编辑器的一些最常见问题的解答。
1. 我在区块编辑器中较早发布的文章和页面会怎样？我还能编辑它们吗？
区块编辑器不会影响您之前的文章和页面。您仍然可以编辑它们，区块编辑器会自动在一个包含经典编辑器的区块中打开它们。
您可以在旧版编辑器中编辑它们，或者您可以将旧文章转换为区块并使用区块编辑器。
2. 我还能继续使用旧版编辑器吗？
是的，您仍然可以继续使用旧版编辑器。只需安装并激活经典编辑器插件即可。
激活后，区块编辑器将被禁用，您将能够继续使用经典编辑器。
经典编辑器插件在可预见的未来仍将得到官方支持。不过，我们强烈建议您现在就开始使用区块编辑器，以便熟悉 WordPress 中创建内容的现代方式。
3. 如果区块编辑器与我正在使用的插件或主题不兼容，我该怎么办？
古腾堡计划的开发周期很长，这给了插件和主题作者充足的时间来测试其代码的兼容性。
然而，某些插件和主题可能仍然无法与区块编辑器完美兼容。在这种情况下，您可以安装经典编辑器插件，请求开发者添加对 Gutenberg 编辑器的支持，或者寻找其他替代插件或主题。
4. 我如何才能了解更多关于古腾堡计划的技巧和窍门？
WPBeginner是学习WordPress区块编辑器的最佳平台。我们是互联网上最大的WordPress资源网站。
我们将发布新文章并更新旧资源，以帮助您掌握区块编辑器。
5. 遇到古腾堡计划的问题？
如果您在使用 WordPress 区块编辑器时遇到问题，我们创建了一个快速故障排除指南，其中列出了用户遇到的所有 常见区块编辑器问题以及解决方法。
视频教程
如果您不喜欢文字说明，那就观看我们的视频教程吧：
