如何使用新的WordPress块编辑器——你的WordPress”古腾堡”指南

WordPress 5.0的发布12月6日,2018,WordPress有一个新的默认内容编辑器。在开发过程中打电话给WordPress Gutenberg编辑,“古腾堡”现在只是WordPress编辑器或“块编辑器如果你想说得更具体些。

新的块编辑器会带来完全不同的方法来创建内容的形式阻碍因此得名……)在这篇文章中,您将确切地了解如何使用这些块,以及新编辑器的其他特性,在WordPress站点创建内容。

是否将站点更新为WordPress 5然而,继续阅读,学习如何使用新的古腾堡块编辑器来构建内容布局在你的网站上。

古登堡是什么??

Gutenberg是新WordPress块编辑器的项目名称,它将WordPress TinyMCE编辑器替换为WordPress 5.0中的默认WordPress编辑器.

而古登堡是官方名称,而编辑是发展中,现在只是“WordPress块编辑器或“WordPress编辑器因为它是正式核心软件的一部分。像这样的,你会经常看到我称它为“块编辑器在这篇文章中,而不是“古腾堡”.

作为一个快速的复习,下面是旧的WordPress TinyMCE编辑器的样子。这个编辑器现在称为 经典的编辑器

原始文字印刷时间编辑器

下面是新的WordPress中的样子 块编辑器,又名古腾堡:

古登堡新编辑

这不仅仅是一种美学上的更新,不过。 古腾堡完全改变编辑体验通过移动到一个基于块的方法内容( 更确切地说,什么区块是在一秒钟!!

尽管目前的重点是内容创建,最终目标是让Gutenberg块编辑器工作”“超出后进入页面模板,最终,全站点定制”。“

那意味着最后您可以使用块构建整个站点,包括登陆页面其他重要内容。

古登堡是WordPress的一部分吗??

12月6日,作为WordPress 5.0的一部分,Gutenberg正式发布,2018。如果您已经将站点更新到WordPress 5.0,现在应该默认看到新的块编辑器。

然而,因为释放的幅度,一些受管理的WordPress主机选择不立即更新人们的网站。由于这个原因,您的站点可能还没有运行WordPress 5.0。在这种情况下,是否更新取决于您(尽管您不应该因为性能和安全原因等太久

WordPress古腾堡编辑器是如何工作的

第二,我告诉你,古腾堡是一个基于块的编辑器。把你吊起来有点粗鲁,因为如果你和大多数人一样,你可能不知道这意味着什么。

所以这里是基于块的编辑101:

基本上,古腾堡取代单编辑字段当前WordPress TinyMCE编辑的个人”街区.

然后,这些块允许您构建比旧的经典WordPress编辑器中所允许的更复杂的设计。

一块是什么??

好,街区几乎可以是任何东西。例如,你可以有街区用于:

  • 规则文本
  • 图像
  • 视频嵌入
  • 按钮
  • 小部件(小部件)是的,这些小部件使用在你的边栏)
  • 桌子
  • 等。

而最妙的是,开发人员将能够创建他们自己的第三方块,您可以通过插件访问这些块,从而获得更大的灵活性。

每个块都是它自己的实体,您可以在单独的基础上对其进行操作。例如,这里有一个快速的古登堡帖子,包含三个街区:

  • 2文本块
  • 1图像块

看我如何轻松地重新排列那些块可以通过拖拽:

古登堡拖曳

因为每个街区都是单独的“,还可以添加自定义背景之类的内容只针对特定的块.

一般来说,它给你更多的灵活性和深度控制。

因此,古登堡是一个网页建设者,正确的??

EHH不完全是这样。至少不是目前的形式。

古登堡将让常规内容(如博客帖子或标准网页)的设计变得更加容易,但它不是当前形式的页面生成器的1:1替代品。

只是在表面上,古腾堡已经缺少两个基本要素:

  • 灵活的列,虽然有一个基本的列块和一些第三方开发人员已经创建了有趣的块。
  • 真正的拖放——古登堡的更新版本允许您通过拖放来重新排列块,但是它仍然不像大多数页面构建器那样是自由形式的。

话虽如此,古腾堡块编辑器将消除需要页面建筑商对大多数”标准”内容,它还创建了用于创建更多内容的单一统一方法复杂的邮递WordPress中的布局。

但是当谈到建设更多复杂的,就像登陆页面,您可能会欣赏页面构建器提供的更大的灵活性(至少在古登堡首次发布期间)

例如,在我们的Elementor与Divi Builder与Beaver Builder的比较,您可以看到顶级页面构建器如何提供以下内容:

  • 自由形式的拖放编辑
  • 真正的多列支持,您可以创建任意数量的列拖单个元素
  • 成吨的预制模板
  • 高级样式选项,带有用于自定义边距/填充的点以及更多
  • 响应设计设置

可能会有一天新的块编辑器。但至少在最初发布形式,页面建筑商仍将给你设计的灵活性更复杂的独立页面。

您必须使用新的块编辑器吗?你能保留以前的WordPress编辑器吗??

,您不必使用新的块编辑器,并且,你也可以继续使用以前的WordPress编辑器。停用古腾堡块编辑器并返回你的网站升级到WordPress 5.0后典型的编辑器,您可以使用官方的经典编辑器插件。

阅读我们的导游如何禁用Gutenberg块编辑器要学习更多的知识。

使用新的Gutenberg块编辑器需要特殊的主题吗??

因为它现在是默认的WordPress编辑器,构建块编辑器是为了处理任何WordPress主题。然而,选择一个特别提供Gutenberg兼容性的主题将提供一些非常实际的好处。

首先,主题可以为所有这些新块提供内置样式。更好的是,主题可以加载这些样式编辑内部.这意味着在为更好的WYSIWYG体验构建内容时,您可以看到块的真正样式(看到这个行动的基本版本

Gutenberg主题还可以提供由各种块组成的预制模板,这样您只需要将内容插入现有块中并点击发布.

此外,还有一些其他的小优点,如全宽度图像对齐。所以,你可以使用任何你想要的主题,但是值得再次检查以确保主题的开发人员计划添加支持。

如果只想使用主题进行测试,所有这些主题都支持新的块编辑器:

  • 内维尔——粒雪是我们专门建造的新主题与古腾堡块编辑器。
  • OHANA主题-您需要从Github安装它
  • 原子块–可以从Array免费获得

为了获得更多的选择,看看我们的集合最佳与古登堡兼容的WordPress主题.

使用Gutenberg WordPress块编辑器构建第一个布局

假设您正在使用WordPress 5.0和新的块编辑器,你准备深入研究一下这篇文章的要点。下面,我将向您展示如何实际使用新的WordPress Gutenberg块编辑器来构建完整的页面布局。

那样,你会准备好最从WordPress 5.0和新编辑器。

快速浏览WordPress块编辑器界面

在开始添加一些块之前,让我们快速浏览一下主块编辑器接口的元素:

wordpress古登堡界面编辑解释道

  • (a)——允许您添加新块。
  • (b)-撤消/重做按钮
  • (c)——给你访问文档设置,包括类别和标签之类的内容,特征图像,等。这与WordPress编辑器中的当前侧栏类似
  • (D)–当选择了单个块时,这使您可以访问设置特定的块
  • (e)–允许您访问您的帖子的实时预览或发布/更新您的帖子
  • (f)——一旦你添加一些街区,这就是你实际处理你文章的内容的地方

添加新模块

正如我在介绍中所讨论的,你们要分开使用街区使用新编辑器构建布局。

添加一个新块,您只需要单击 +Plus图标并选择要添加的内容类型:
添加新块
在上面的示例中,我向您展示了如何添加一个基本的段落块。但是古登堡实际上包括许多不同的街区,分成不同的部分:
砌块类型
在顶部,您会看到 最常用阻碍。但是如果向下滚动,您还将看到部分常见的街区,格式化,布局元素,小部件,Embeds:
砌块类型
  • 内联元素–对于内联图像仅包含一个块。
  • 公用块–包含像图像这样的基本构建块,段落(规则文本)标题,报价,等。
  • 格式化–让您添加更多格式化的内容,如拉引号,桌子,或者经典的WordPress文本编辑器
  • 布局元素–将文本分成两列,包括按钮,分离器,或“更多“标签
  • 小部件-让你加短码,最新文章,或类别。甚至可以在Gutenberg中显示侧边栏小部件。
  • 嵌入–帮助您嵌入来自外部资源(如Twitter)的内容,YouTube,脸谱网,Instagram,还有更多。

用Gutenberg构建一个基本布局

让我们从简单的开始。说你只是想建立一个基本的博客布局,其中包括:

  • 规则文本
  • 一个图像
  • 一个报价
  • 嵌入的YouTube视频

以下是你如何处理古登堡:

首先,你会写你的整个文章的编辑器。或者,如果你像我一样,喜欢用谷歌文档书写,您可以将其全部粘贴进去,然后Gutenberg将自动将其转换为块。

添加非文本块

现在你的内容分成块,您可以悬停在要插入第一个图像的位置上,然后单击图标。那将造成一次突破。然后,单击再次图标以插入图像块:

图像块
这将允许您插入图像块,您可以上传或选择图像以类似方式目前WordPress编辑器:
插入图像
一旦您选择了您的图像,您应该在页面布局中看到它:
内联图像
下一步,悬停在要插入拉引号的位置上,并使用相同的方法插入另一个块。你可以搜索“引用“或者去 公用块章节:
插入引用
然后,你会看到你的新拉报价块。为了创建您的报价,所有你需要做的就是点击成块和类型:
进入报价
插入YouTube视频,你可以添加一个新的 YouTube块从 嵌入标签。插入视频,所有你需要做的就是输入URL,然后单击 嵌入
YouTube

可选的——创建不同的列

想变得更有创造力吗?古腾堡现在包括一个实验性列功能,让你可以快速创建多个列。您只需要添加列(β)块从布局元素部分。然后,您可以插入其他块里面

古登堡柱
一旦你完成了,您只需要单击 发布按钮:
发表文章
而且你的博客文章格式在前端。

如何定制个人块

因为WordPress Gutenberg编辑器包含大量不同的块,我无法向您展示如何使用每个单独的块。

但是我可以给你一个基本框架,适用于所有块。

基本上,你控制 内容在编辑器的实际身体:
编辑一个街区
基本的文本样式和对齐,可以使用悬停在块上时出现的菜单栏:
塑造街区
为了更先进的造型,你通常风格的块 设置选项卡。

要访问该选项卡,选择要编辑的块并浏览到标签:

定制块

如何重新排列各个块

重新排列块,你有两个选择。您可以使用向上向下箭头时悬停在一块移动块在各自的方向:

移动古登堡区块
或者,你可以拖放块。要激活拖放功能,您需要将鼠标悬停在 六点上下箭头之间
古登堡拖曳

把它们放在一起

一旦您掌握了如何使用新的块编辑器工作的流程,这是相当无痛和直观的。

起初,你可能会经历一些成长的痛苦和挣扎,以执行你认为理所当然的基本行动。

但是一旦你掌握了诀窍,你就应该在建筑布局中巡航。随着古腾堡提出的更高级的街区,你会有更大的灵活性比TinyMCE WordPress编辑器。

一些整洁,但更先进,古腾堡的技巧

当你越来越熟悉WordPress古腾堡块编辑器,你可能会发现其中一些技巧可以节省时间。

通过键入快速创建新块

上面,我向您展示了如何使用插入按钮创建块。但是为了节省时间,只需输入以下语法,就可以实际创建块:

/块名

自动建议框将出现以帮助您找到相关的块。

例如,以下是如何仅用键盘创建图像块:

非常方便,而且节省时间!!

块快捷方式

直接编辑源代码

在任何时候,你可以编辑的源代码整个帖子点击三个点在右上角和选择代码编辑器

用古登堡语言编辑代码

激活全屏模式,固定工具栏,等。

新的块编辑器包含几个不同的模式,让你改变编辑体验。你可以:

  • 添加一个固定的工具栏,比如TinyMCE编辑器
  • 全屏幕
  • 放一个“聚光灯在活动块上

使用这些““观点”,点击三个点右上角的图标。

古腾堡的观点

使用Gutenberg键盘快捷方式节省时间

除了标准格式化快捷方式之外,块编辑器有许多专用的键盘快捷键,可以帮助您:

  • 在选定块之上或之下插入新块
  • 删除块
  • 复制一个区块
  • 等。

打开键盘快捷键的完整列表,使用移位+ALT+H捷径。

古腾堡键盘快捷键

创建可重用块模板

如果您具有要在多个点中重用的块的特定集合/排列,您可以将一组块保存为可重用的模板。您将能够命名模板。然后,您可以像插入常规块一样插入它。

创建模板:

  • 选择要包含的块
  • 单击三个点偶像
  • 选择添加到可重用块
Gutenberg可重用块模板

用插件扩展块编辑器

如果你想要的,现在您可以找到许多添加自己的块的Gutenberg扩展插件。

水獭块是一个很好的选择,让你开始。它为诸如定价之类的事情提供了额外的块,推荐信,谷歌地图,共享图标,“点击推特按钮,还有更多。

你的旧内容怎么样了??

在我把事情做完之前,让我快速介绍一下一旦更新到WordPress 5.0,所有旧内容将会发生什么如果你还没有

别担心,它不会消失!但是体验有点不同:

当您将站点更新到WordPress 5.0时,使用原始TinyMCE编辑器构建现有内容,块编辑器将所有旧的内容到一个经典街区.这个经典的块基本上TinyMCE…但嵌入新的块编辑器编辑。

古登堡古典街区

处理旧内容,你也可以:

  • 将其保留在Classic块中,并像使用旧的WordPress编辑器那样对其进行编辑
  • 使用三个点图标和选择转换为块.将一切都分解成单独的块。然后,你可以使用你的内容就像如果你最初创建的古腾堡块编辑器。

转换为块

新古腾堡块编辑器是未来

虽然古登堡有它的批评者,由于WordPress 5.0的发布,它正式成为WordPress核心的一部分。

对于大多数临时用户,它会,在经历了一些成长的痛苦之后,带来更加灵活的内容创作体验。

非开发人员将能够直观地用额外的元素设计更复杂的布局,比如按钮,内容嵌入,还有很多。这样,,有希望地,帮助WordPress继续成长。

现在,我们很想听到你的声音。我确信你们中的许多人对新的Gutenberg块编辑器有强烈的想法——所以让我们在评论中了解它!!

别忘了加入我们的速成课程以加速你的WordPress网站。通过一些简单的修复,您甚至可以减少50-80%的装载时间: