使用即将推出的 WordPress Gutenberg 编辑器的终极指南

已发表: 2018-10-30

在接下来的几个月里，您使用 WordPress 创建内容的方式将发生根本性的变化。您多年来一直使用的当前文本编辑器将消失，取而代之的是全新的 WordPress Gutenberg 编辑器。

像这样的大变化可能会在你的脑海中敲响警钟……

您的工作流程会中断吗？您当前的插件和主题会继续运行吗？您如何使用这个新编辑器继续创作精彩内容？

在这篇文章中，您将了解这些问题的答案以及更多内容。

这是最终的 WordPress Gutenberg 编辑器指南，适用于使用 WordPress 创建内容的任何人和每个人。

你会学到：

什么是 WordPress Gutenberg 编辑器，为什么/何时出现，以及一些基本常见问题的答案。
如何模仿当前的编辑器功能并使用 Gutenberg 创建基本的博客文章。
使用 Gutenberg 更高效地工作的一些不为人知的技巧（基于我在实时站点上使用它的实践经验）。
如何利用 Gutenberg 中的新功能从您以前从未访问过的内容和布局功能中受益。

无论如何，这款新编辑器即将推出，因此请花一些时间熟悉 WordPress Gutenberg 编辑器，以便您在它发布后立即投入使用！

古腾堡编辑器是什么，以及为什么你应该关心

古腾堡编辑器是对当前 WordPress 文本编辑器的完全重新构想，您可以使用该编辑器使用 WordPress 创建帖子或页面。

我说重新构想而不是重新设计，因为它真正从头开始重建编辑体验。

开发完成后，Gutenberg 将替换当前的 WordPress 文本编辑器，您将使用 Gutenberg 编辑器创建未来的内容（尽管如果您想坚持当前的体验，您将有多种选择——稍后会详细介绍）。

那么是什么让古腾堡编辑器成为“彻底的重新想象”呢？

首先，让我们先来回顾一下我所说的“WordPress 编辑器”的含义。如果您不太确定我一直在谈论什么，那么当前的 WordPress TinyMCE 编辑器如下所示：

如果您一直使用Wordable直接从 Google Docs 发布 WordPress 帖子，那么您可能不会在那里花很多时间！ 但我敢打赌，您仍然很有可能熟悉编辑器的工作方式。

古腾堡编辑器介绍了一种叫做“块”的东西

当前的 WordPress 文本编辑器有点像一个长的 Microsoft Word 文档。古腾堡用一种叫做blocks 的东西来改变这种动态。

古腾堡中的每个“事物”都不是单个编辑字段，而是它自己的“块”。 如果你曾经用 Medium 写过一篇文章——这是同样的想法。

例如：

每一段文本都是它自己独立的块。
图像是它自己的块。
YouTube 视频是它自己的块。
……你懂的。

然后，您可以使用一系列块来组合您的内容。例如，下面是与上面相同的内容在古腾堡中的样子。它有四个不同的块：

三个独立的段落块
一个图像块

这种基于块的方法的重要性在于它为内容和布局解锁了更高级的功能。

例如，您将能够引入列、插入和样式按钮，并执行许多其他操作，而这些操作要么使用当前编辑器无法完成，要么需要使用当前编辑器使用 HTML/CSS。

稍后，我将更详细地介绍块。但是，如果您想立即体验一下，您可以前往此处体验古腾堡编辑器的现场演示——无需安装任何东西。

这就是 WordPress 核心团队进行此更改的原因

在其生命的大部分时间里，WordPress 都使用相同的基本编辑器 (TinyMCE)。虽然设计可能在这里和那里发生了变化，但核心功能从未动摇过。

那为什么现在改变了？ 如果它在过去的大约 15 年里有效，为什么它不能在接下来的 15 年里继续工作？

有几个原因。

首先，当前的编辑器对于这个时代的临时用户来说太有限了。虽然 WordPress 可以创建您可以想象的任何东西，但只有在您了解一些 HTML/CSS 的情况下才能做到这一点。

再加上来自 Squarespace 和 Wix 等可视化网站建设者的竞争（过去一年他们的使用量都翻了一番），你就会明白为什么 WordPress 核心团队认为 WordPress 需要更灵活的编辑体验来保持优势。

其次，Gutenberg 提供了统一繁忙的 WordPress 用户拥有的许多不同界面的能力。我不想在这里太技术化。但是，如果您使用第三方插件，您可能有各种短代码、元框和设置区域，这些都是 WordPress 工作流程的一部分。

古腾堡可以将所有这些不同的接口统一到块系统中。

第三，古腾堡将现代技术引入 WordPress。具体来说，反应。这不仅有助于编辑器本身，而且还允许第三方开发人员使用这些现代技术。

最后，内容编辑只是这个过程的开始。虽然现在，古腾堡只是要改变你创建帖子和页面的方式，但最终的目标是让古腾堡进入完整的视觉网站设计。

迁移到新的古腾堡编辑器的利弊

那么……古腾堡对你来说是件好事吗？

嗯，这实际上是 WordPress 社区中一个非常分裂的问题，双方都有激烈的争论。

一方面，有人在吹捧古腾堡的好处：

内容的更多可能性——古腾堡为按钮、拉引号等添加了预先构建的块。这使您可以更好地控制您的内容，而无需自定义 CSS。此外，第三方插件可以添加自己的内容块，这为您提供了更大的灵活性。
更多布局可能性——除了新的内容可能性之外，您还可以获得新的布局选项，例如无需任何自定义代码即可包含列或分隔符的能力。
统一体验——无需使用短代码插入来自第三方插件的内容，这些插件将能够创建自己的块，从而创建更简单、更统一的编辑体验。
移动友好- 默认情况下，古腾堡在移动设备上运行良好，可让您从任何设备创建或编辑内容。

但另一方面，有人指出了一个如此雄心勃勃的项目的一些大问题：

向后兼容性-整个互联网约有32% 的用户使用当前的 WordPress 编辑器，这使得过渡到全新的编辑体验变得非常困难。基本上，所有旧内容都有很多边缘情况，很难确保无缝过渡。
对开发人员来说很难——主题和插件开发人员需要将 Gutenberg 兼容性构建到他们的插件和主题中，而较旧的扩展可能并不总是能完美运行。有数以万计的旧插件可能会遇到兼容性问题。
用户教育——虽然新用户可能喜欢 Gutenberg，但老用户需要学习新的工作流程，这对于为非技术客户构建网站的开发人员来说尤其困难。

那么 WordPress Gutenberg 编辑器是好事还是坏事？

好吧，我在这里插入一些个人意见，但我认为从长远来看，古腾堡将是一个积极的变化。您可以更好地控制内容的外观和功能，而无需外部解决方案或自定义代码解决方案。

话虽如此，在与您可能使用的现有插件的兼容性方面，肯定有可能出现短期成长的痛苦。并且很难迫使 WordPress 庞大的用户群学习新的界面。

古腾堡编辑器什么时候发布？

简短的回答是——我们不知道确切日期。 Gutenberg 将作为 WordPress 5.0 的一部分发布，但目前还没有关于 WordPress 5.0 确切发布日期的官方消息。

不过，我们现在确实有一个粗略的想法。根据最近的 WordPress 5.0 启动会议，预计日期最早为2018 年 11 月 19 日，或最晚为2019 年 1 月 22 日。

这是更长的答案：

现在，古腾堡编辑器在测试状态下作为插件存在。如果您愿意，您实际上可以安装该插件并立即开始在您的网站上使用它（不过，它处于测试阶段，所以我不推荐它）。

测试版和测试完成后，WordPress 团队会将古腾堡编辑器合并到WordPress 5.0 中的核心 WordPress 软件中。然后，一旦您将 WordPress 站点更新到 WordPress 5.0，Gutenberg 编辑器将自动替换当前的 TinyMCE 编辑器。

古腾堡编辑器发布后，您现有的内容会怎样？

由于古腾堡正在替换当前的编辑器，您可能想知道所有现有内容会发生什么。

别担心——古腾堡是为向后兼容而构建的。

就目前而言，古腾堡将您所有的旧内容放入一个经典块中。例如，当我安装 Gutenberg 时，上面的 TinyMCE 示例如下所示：

如果您愿意，您可以继续在单个 Classic 块内工作，尽管体验有点尴尬。或者，您可以单击三个点图标将旧内容转换为古腾堡块：

将旧内容转换为块后，它将像任何其他古腾堡编辑器帖子一样工作。

由于古腾堡编辑器对旧内容使用这种单一的经典块方法，因此您不会遇到任何过渡问题。但是您可能会遇到第三方插件的问题，因此您仍应保持警惕并检查旧内容。

古腾堡编辑器是否适用于所有 WordPress 主题？

是的！ 同样，因为 Gutenberg 将成为默认编辑器，它自然需要与任何 WordPress 主题一起使用。

话虽如此，开发人员可以做一些事情来为古腾堡添加特殊功能，因此您很快就会开始看到“与古腾堡兼容”出现在许多主题的营销材料中。

以下是使主题与古腾堡兼容的原因：

特殊块样式- 主题可以为核心古腾堡块添加特殊样式。这可确保所有 Gutenberg 块与您的主题设计完美匹配。
全角对齐– Gutenberg 允许您创建横跨整个屏幕的全角图像，但前提是主题开发人员专门启用它。
编辑器样式– 主题开发人员还可以将自己的样式添加到后端 Gutenberg 编辑界面。这创造了更多的视觉设计方法。您可以在此处查看示例。

WordPress 5.0 发布后，您是否必须使用 Gutenberg 编辑器？

不！虽然 Gutenberg 将成为 WordPress 5.0 中的默认编辑器，但您实际上不必使用它。

如果您想继续使用当前的 WordPress 编辑器，有一个官方的经典编辑器插件可以隐藏古腾堡的所有痕迹并恢复当前的编辑体验。

或者，此插件还可以让您使用两个编辑器并逐个在它们之间切换。

WordPress Gutenberg 教程 - 您将如何使用新编辑器

好的，现在您已经完成了古腾堡 101 速成课程，让我们亲自体验古腾堡编辑器。

本节的目标是让您熟悉古腾堡编辑器，以便您能够在它发布后立即投入使用。

首先，这里有一个图形可以帮助您了解古腾堡编辑器界面的核心元素：

这是编辑器的主体。这是您处理内容的地方
这些按钮可让您添加新块。如果您想添加图像、视频或任何其他块内容，您将使用它们。
这是您添加帖子标题的地方。
这些选项可让您保存草稿、查看预览并最终发布您的帖子。
当您没有选择区块时，此侧边栏可让您管理帖子的整体选项，例如类别和特色图片。当你有一个块中选择，它可以让你为特定块的选项。

然后，当您要添加新块时，您将看到此弹出窗口，其中包含所有可用块的列表。您可以：

使用手风琴选项卡浏览所有可用的块
直接搜索你想要的块

如何使用古腾堡编辑器创建简单的博客文章

在本节中，您将了解如何执行与您在当前 WordPress 编辑器中已经可以执行的相同类型的操作。

基本上，您将学习如何使现有工作流程适应古腾堡编辑器。然后，在下一节中，我将向您展示如何利用古腾堡编辑器的新功能。

添加或格式化基本文本内容

基本段落文本内容很简单——您只需单击并键入即可。唯一的直接区别是，每当您按 Enter创建新行时，Gutenberg 都会自动为您的下一段创建一个新块：

当您单击一个块时，您会看到一个格式工具栏出现，您可以在其中：

更改对齐方式
添加粗体和斜体
插入链接
等等。

基本上，这很像当前编辑器中的工具栏：

稍后，我将向您展示这种默认方法的巧妙替代方法。

除了工具栏中的格式选项之外，您还可以在右侧边栏中获得一些选项，让您：

控制文字大小和颜色
添加首字下沉

到目前为止足够简单，对吧？

创建标题（H1、H2 等）

您有几个不同的选项来创建标题。

首先，您可以使用+图标插入一个新的标题块：

插入标题块后，您可以键入以添加文本并使用侧栏或工具栏来控制要使用的标题（例如 H2 与 H3）：

或者，您还可以：

使用更改块类型按钮将常规段落块转换为标题块。
使用 markdown 创建标题（例如“## 这是标题 2”）

这是一个 GIF 来说明这两种方法：

插入图像、视频或其他媒体内容

好的，现在您可以创建和格式化基本文本和标题。这会让你大部分时间到达那里！

但是插入媒体内容呢？

要插入任何媒体内容，您可以使用相同的+图标插入块。

要在现有内容下方插入媒体内容，请使用左上角的+图标。

或者，您还可以通过将鼠标悬停在要插入内容的位置上，在现有内容之间插入一个新块。然后，您将使用新块左侧的添加块按钮：

打开“插入块”弹出窗口后，您可以选择：

图像– 从 WordPress 媒体库或外部 URL 插入图像。
视频– 嵌入来自 WordPress 媒体库或外部 URL 的视频。
嵌入– 单独的块，可帮助您嵌入来自 YouTube、Vimeo、Spotify、SoundCloud、Instagram 和大量其他来源的内容。

例如，下面是从 WordPress 媒体库中插入图像的样子：

以下是嵌入 YouTube 视频的方法：

从其他插件插入短代码

如果您像大多数 WordPress 用户一样，您可能会使用短代码将一些插件包含在您的帖子或页面内容中。

最终，目标是让这些类型的插件创建您可以直接使用的自己的 Gutenberg 块（稍后会详细介绍）。但在那之前，您仍然可以使用Shortcode块在 Gutenberg 内容中包含短代码：

重新排列内容（您有两个选择）

好的，到目前为止足够简单……但是如果您想更改块的顺序怎么办？

为此，您有两个选择。

首先，如果您将鼠标悬停在块的左侧*，您可以使用拖放来移动块：

其次，您还可以使用向上或向下箭头将块向上或向下移动一个位置：

*要激活拖放，请将鼠标悬停在上下箭头之间的 6 个点上。

处理幕后信息（类别、URL Slug 等）

好的，以上内容应该涵盖了如何添加基本的博客内容。但是，准备发布帖子的所有其他幕后工作呢？

对于大多数操作，您可以使用侧边栏的“文档”选项卡。您将在这里：

提前选择发布日期/安排帖子
选择作者
添加类别和标签
选择您的特色图片
输入您的摘录

此外，您可以使用侧边栏上方的按钮来：

预览您的帖子
保存草稿（古腾堡会自动保存您的草稿，因此您通常不需要手动执行此操作）
发布您的帖子

唯一棘手的是设置您的帖子或页面的 URL slug。要编辑它，请单击标题。然后，您将能够编辑 slug：

Yoast SEO之类的插件怎么样？它们将如何工作？

您很有可能需要为每个内容配置一些其他后端插件。

您可以通过两种方式与这些插件进行交互。

首先，许多开发人员已经在致力于直接与古腾堡兼容。例如，Yoast SEO 已经支持 Gutenberg，您将直接从同一个文档侧边栏配置您的 Yoast SEO 设置：

对于还没有 Gutenberg 支持的旧插件，您仍然可以像使用 TinyMCE 编辑器一样使用元框：

使用古腾堡提高工作效率的六个技巧

当您第一次开始使用古腾堡编辑器时，它可能会感觉有点迟钝。这些提示可以帮助加快流程并使快速插入和自定义您需要的块变得更加容易。

1. 通过键入“/”快速插入块以节省大量时间

当您刚开始使用 Gutenberg 时，我在上面向您展示的插入块的方法很有用，因为它可以让您看到所有可用的块。

但是，一旦您熟悉了需要哪些块，就可以使用快速插入功能更快地插入它们。

而不是单击+图标，只需：

按回车键创建一个新块
输入“/”
开始输入块的名称

当您键入时，Gutenberg 会自动建议匹配的块。然后，只需按 Enter即可插入所需的块。

这是在行动：

那快了很多，对吧？

2. 学习快速编辑的键盘快捷键

古腾堡配备了可以加快工作速度的键盘快捷键。

您可以通过单击CTRL + Alt + H (Windows) 或CMD + Alt + H (Mac) 来调出这些快捷方式的完整列表：

您应该通读完整列表，但这里有一些最有帮助的：

Ctrl + S – 保存草稿。
Ctrl + Z – 撤消或Ctrl + Y – 重做。
Ctrl + Alt + Backspace – 删除选定的块（非常方便）。
Ctrl + Shift + D – 复制选定的块。
Ctrl + Alt + T – 在所选块之前插入一个新块。
Ctrl + Alt + Y – 在所选块之后插入一个新块。

您还可以使用大多数全局快捷键，例如Ctrl + B加粗或Ctrl + V粘贴。

3. 将桌面上的图像拖放到 Gutenberg 内容中

如果您需要包含大量图像，这是另一个巧妙的技巧。

您无需为每个图像手动创建一个新的图像块，只需将图像直接从桌面上的文件夹拖到您可以将其包含在帖子中的位置即可。

然后 WordPress 会自动将其上传到您的媒体库并将其插入到那里。只有一件事需要注意——确保在拖动图像时看到蓝线，否则将无法工作：

4.添加固定编辑工具栏

有些人觉得 Gutenberg 难以解决的一件事是，当您在不同的段落块之间单击时，编辑工具栏会不断地闪烁进出。

如果你不喜欢这样，你可以打开统一工具栏选项，在古腾堡界面的顶部获得一个始终存在的工具栏：

5. 对标题、列表等使用 Markdown 语法

如果您喜欢使用 Markdown，您将能够在 Gutenberg 中加入一些 Markdown 语法。

例如：

## – 创建一个 H2（你已经看到了这个 – 它转换成一个标题块）。
* - 开始一个无序列表。
1. – 启动一个有序列表。
> – 创建一个引用块（转换为引用块）。

您不能使用所有降价语法。但是上面的例子对于更快的格式化已经非常有帮助：

6. 如果需要，直接编辑 HTML

如果确实遇到了要直接编辑 HTML 的情况，可以通过单击右上角的三个点或使用Ctrl + Shift + Alt + M快捷键来访问代码编辑器：

利用 Gutenberg 的新功能 – 列、按钮等！

好的，我们已经介绍了：

如何使用 Gutenberg 创建基本的博客文章。
加快与古腾堡合作的一些技巧。

现在，让我们来看看您可以用古腾堡做的一些很酷的新东西。这些令人兴奋的功能应该有助于解释为什么 WordPress 团队决定继续使用 Gutenberg。

插入按钮 – 不需要 HTML

使用旧的编辑器，创建按钮的唯一方法是手动添加 CSS 类或使用第三方插件。

使用 Gutenberg，您只需添加Button块。要编辑按钮文本，您只需单击并键入。要更改颜色，您可以使用侧边栏：

创建多列布局

使用旧的编辑器，如果没有您自己的自定义 HTML 或第三方插件，就无法创建多列布局。

使用 Gutenberg，您只需添加Columns块。然后，您可以添加不同的栏目内的其他块：

创建全宽拉伸图像

如果您的主题支持它，您将获得一个新的全角对齐选项，可让您在整个屏幕上拉伸图像，从而打开一些有趣的内容布局：

创建可重用的块模板

如果您发现自己经常使用相同的块组合，则可以通过创建可重用的块组来节省时间。

首先，您可以单击并拖动以选择要包含的所有块。然后，您可以使用三个点添加到可重用块：

你会给它一个名字。然后，您将能够像插入任何其他块一样插入整个模板：

您可以使用第三方插件添加更多块和功能

这是古腾堡开始变得更酷的地方：

第三方插件可以添加自己的块，您可以在 Gutenberg 设计中使用这些块。

这有两种方式可以使您受益：

您已经使用的插件将创建自己的古腾堡块。例如，如果您使用事件日历插件，则只需使用插件的事件块即可插入事件。
开发人员正在制作专用的 Gutenberg 插件，这些插件添加了大量通用的新内容块，让您可以更好地控制您的设计。

例如，查看免费的 Stackable 插件。安装并激活它后，您将在 Gutenberg 中获得一组全新的 Stackable 块：

然后你可以使用这些块做一些很酷的事情，比如插入定价表或推荐：

这只是 WordPress Gutenberg 编辑器的开始

就是这样！如果你做到了这一步，你应该是一个古腾堡大师，一旦 WordPress 5.0 发布，他就准备好开始运行。

虽然学习新的工作流程并不在大多数人的“周末有趣方式”清单上，但掌握古腾堡的来龙去脉对于使用 WordPress 的任何人来说都是必不可少的。

古腾堡不仅会影响您现在创建内容的方式，而且还将在 WordPress 的未来发展中发挥重要作用。

你在上面看到的一切只是古腾堡的第一阶段。在第二阶段，Gutenberg 将进入页面模板，第三阶段将 Gutenberg 转变为完全网站定制的工具。

所以……成为古腾堡的好朋友，因为在接下来的几年里你会看到很多！