如何使用新的WordPress区块编辑器–您的WordPress古登堡指南

自WordPress 5.0在2018年12月6日发布以来,WordPress具有新的默认内容编辑器。在开发过程中称为WordPress Gutenberg编辑器, "古腾堡" 现在只是 "WordPress编辑器" 要么 "块编辑器" 如果您想更具体.


新的块编辑器以以下形式带来了一种完全不同的内容创建方法: 块 (由此得名…)。在这篇文章中,您将确切学习如何使用这些块以及新编辑器的其他功能来在WordPress网站上创建内容.

无论您是否已将网站更新为WordPress 5.0,请继续阅读以了解如何使用新的Gutenberg块编辑器来构建内容 和布局 在您的站点.

WordPress古登堡指南

什么是古腾堡?

古腾堡(Gutenberg)是新WordPress区块编辑器的项目名称,该名称已将WordPress TinyMCE编辑器替换为WordPress 5.0中的默认WordPress编辑器.

虽然古腾堡(Gutenberg)是官方名称,而编辑器正在开发中,但现在 "WordPress区块编辑器" 要么 "WordPress编辑器" 因为它是核心软件的正式组成部分。因此,您经常会看到我将其称为 "块编辑器" 在这篇文章中,而不是 "古腾堡".

作为快速更新,这是旧的WordPress TinyMCE编辑器的外观。该编辑器现在称为 经典编辑

原始的wordpress tinymce编辑器

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

WordPress Gutenberg块编辑器

不过,这不仅仅是美学上的更新. 古腾堡彻底改变了编辑体验 通过转向基于块的内容方法(确切地说是一秒钟内的更多块!).

当前的重点是内容创建,最终目标是拥有Gutenberg块编辑器 "超出了发布页面模板的范围,最终实现了完整的网站自定义."

这意味着最终您将能够使用块(包括目标页面和其他重要内容)来构建整个网站.

古腾堡是WordPress的一部分吗?

古登堡于2018年12月6日作为WordPress 5.0的一部分正式发布. 如果您已将网站更新为WordPress 5.0,则现在默认情况下应该会看到新的块编辑器.

但是,由于发布的规模很大,一些托管WordPress主机选择不立即更新人们的网站。因此,您的网站可能尚未运行WordPress 5.0。在这种情况下,是否要更新取决于您(尽管出于性能和安全原因,您不应等待太久).

WordPress Gutenberg编辑器如何工作

一秒钟前,我告诉您Gutenberg是基于块的编辑器。让您挂断电话是不礼貌的,因为如果您像大多数人一样,可能不知道那意味着什么.

因此,这里是基于块的编辑101:

本质上,古腾堡用很多个人替换了当前WordPress TinyMCE编辑器的单个编辑字段 "块".

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

那有什么障碍?

好吧,一个区块几乎可以是任何东西。例如,您可以使用以下块:

  • 常规文字
  • 图片
  • 影片嵌入
  • 纽扣
  • 小部件(是的,与您在边栏中使用的那些小部件相同)
  • 桌子
  • 等等.

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

每个块都是其自己的实体,您可以单独操作。例如,这是古腾堡(Gutenberg)的快速帖子,其中包含三个部分:

  • 2个文字块
  • 1个图像块

观看我如何轻松地通过拖放来重新排列这些块:

古腾堡拖放

而且因为每个块都是 "分离", 您还可以仅针对特定块添加诸如自定义背景之类的内容.

通常,它为您提供了更大的灵活性和深度控制.

所以古腾堡是当时的页面创建者?

嗯,不是。至少不是目前的形式.

古腾堡(Gutenberg)将使对诸如博客文章或标准页面之类的常规内容进行样式设置变得更加容易,但是它不能以当前形式用1:1替代页面构建器.

从表面上看,古腾堡已经缺乏两个基本要素:

  • 灵活的列,尽管有一个基本的列块,并且一些第三方开发人员创建了有趣的块.
  • 真正的拖放功能–较新的Gutenberg版本可让您通过拖放功能重新排列图块,但它仍不像大多数页面构建器一样自由格式.

话虽如此,Gutenberg块编辑器已准备就绪,对于大多数人而言,不需要页面构建器 "标准" 内容,并且还创建了一个统一的方法来创建更多内容 复杂的职位 WordPress中的布局.

但是当涉及到更多 复杂页面, 像着陆页一样,您可能会喜欢页面构建器提供的更大的灵活性(至少在古腾堡的初始版本中).

例如,在Elementor vs Divi Builder与Beaver Builder之间的比较中,您可以看到首页构建器如何提供类似的信息:

  • 自由形式的拖放编辑
  • 真正的多列支持,您可以在其中创建任意数量的列以将单个元素拖入
  • 大量的预制模板
  • 先进的样式选项,带有用于自定义边距/填充的斑点等
  • 响应式设计设置

新的块编辑器可能有一天会到达那里。但是至少在最初的发行形式下,页面构建器仍然可以让您灵活地设计更复杂的独立页面.

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

没有, 您不必使用新的块编辑器, , 您可以继续使用以前的WordPress编辑器。要停用古腾堡块编辑器并在升级到WordPress 5.0后将您的网站恢复为经典编辑器,可以使用官方 经典编辑器 插入.

阅读我们的指南 如何禁用古腾堡块编辑器 了解更多.

您是否需要特殊的主题才能使用新的Gutenberg块编辑器?

由于现在是默认的WordPress编辑器,因此块编辑器可以与任何WordPress主题一起使用。但是,选择专门提供古腾堡兼容性的主题将带来一些非常实际的好处.

首先,主题可以为所有这些新块提供内置样式。更好的是,主题实际上可以在编辑器中加载这些样式。这意味着您在构建内容时可以看到积木的真实样式,以获得更好的所见即所得体验(在此处查看此操作的基本版本

古腾堡主题还将能够提供由各种模块组成的预制模板,因此您要做的就是将内容插入现有模块并点击 发布.

此外,还有其他一些小好处,例如全角图像对齐。因此,您可以使用所需的任何主题,但值得仔细检查以确保您主题的开发人员计划添加支持.

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

  • 尼芙 – Neve是我们的新主题,专门与Gutenberg块编辑器配合使用.
  • 扎克拉 – ThemeGrill一个不错的轻量级选择.
  • 赫斯提亚精简版 –遵循材料设计原则的灵活主题.

有关更多选项,请查看我们与Gutenberg兼容的最佳WordPress主题的集合。.

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

假设您使用的是WordPress 5.0和新的块编辑器,那么您就可以开始研究本文的内容了。下面,我将向您展示如何实际使用新的WordPress Gutenberg块编辑器来构建完整的页面布局.

这样,您就可以充分利用WordPress 5.0和新的编辑器了.

WordPress区块编辑器界面快速浏览

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

古腾堡块编辑器界面

  • (一个) –让您添加新块.
  • (B) –撤消/重做按钮
  • (C) –使您可以访问文档设置,包括类别 & 标签,特色图片等。这类似于WordPress编辑器中的当前侧边栏
  • (D) –当选择单个块时,这使您可以访问特定于该块的设置
  • (E) –可让您访问帖子的实时预览或发布/更新帖子
  • (F) –添加一些块后,您就可以在其中实际处理帖子的内容

添加新块

正如我在介绍中所讨论的,您将使用单独的 "块" 使用新的编辑器构建布局.

要添加一个新块,只需单击 +加 图标,然后选择要添加的内容类型:

添加一个新块

在上面的示例中,我向您展示了如何添加基本的段落块。但是古腾堡实际上包括了很多不同的区块,分为不同的部分:

块的类型

在顶部,您会看到一个列表 最常被使用 块。但是,如果向下滚动,还会看到“通用块”,“格式”,“布局元素”,“小部件”和“嵌入”部分:

块的类型

  • 内联元素 –仅包含一个内嵌图像的块.
  • 普通块 –包含基本构件,例如图像,段落(常规文本),标题,引号等.
  • 格式化 –让您添加更多格式的内容,例如拉引号,表格或经典的WordPress文本编辑器
  • 布局元素–让您将文本分为两列,包括按钮,分隔符或 "更多" 标签
  • 小部件 –让您添加简码,最新帖子或类别。甚至可以在Gutenberg中显示侧边栏小部件.
  • 嵌入 –帮助您嵌入来自Twitter,YouTube,Facebook,Instagram等外部来源的内容.
  • 可重复使用 –一旦掌握了一切,就可以将块组另存为可重复使用的模板,并将其显示在此处。在您保存第一个可重复使用的模板之前,不会显示该区域,我们将在本文中稍后向您介绍如何做。.

使用古腾堡构建基本布局

让我们从简单开始。假设您只想构建一个基本的博客文章布局,其中包括:

  • 常规文字
  • 一个图像
  • 报价单
  • 嵌入式YouTube视频

使用古腾堡(Gutenberg)的方法如下:

首先,您需要在编辑器中撰写整个帖子。或者,如果您像我,并且喜欢 在Google文件中撰写, 您可以将其全部粘贴,然后Gutenberg将自动将其转换为块.

添加非文本块

现在,您的内容已分成多个块,您可以将鼠标悬停在要插入第一个图像的位置上,然后单击 图标。那会造成休息。然后,点击 再次插入图标以插入图像块:

图像块

这将允许您插入图像块,从中可以以与当前WordPress编辑器类似的方式上传或选择图像:

插入图片

选择图像后,您应该在页面布局中立即看到它:

内嵌图片

接下来,将鼠标悬停在要插入拉引号的位置上,并使用相同的方法插入另一个块。您可以搜索 "引用" 或去 普通块 部分:

插入报价

然后,您将看到新的拉引号块。要创建报价,您需要做的就是单击代码块并输入:

输入报价

要插入YouTube视频,您可以添加一个新视频 的YouTube 从块 嵌入 标签。要插入视频,只需输入URL,然后单击 嵌入

youtube块

可选–创建不同的列

想要更具创意? Gutenberg现在包括实验性的色谱柱功能,可让您快速创建多个色谱柱。您需要做的就是添加 列(测试版) 从块 布局元素 部分。然后,您可以在其中插入其他块:

古腾堡专栏

完成后,您只需点击 发布 按钮:

发表帖子

而且您将在前端放置格式化的博客文章.

如何自定义单个块

由于WordPress Gutenberg编辑器包含许多不同的块,因此我无法向您展示如何使用每个单独的块.

但我可以为您提供适用于所有模块的基本框架.

基本上,您可以控制 内容 在编辑器的实际正文中:

编辑块

对于基本的文本样式和对齐方式,可以使用将鼠标悬停在块上时出现的菜单栏:

样式块

对于更高级的样式,通常会在 设置标签.

要访问该选项卡,请选择要编辑的块,然后浏览至 标签:

定制块

如何重新排列单个块

要重新排列块,您有两个选择。您可以使用 要么 将鼠标悬停在一个块上时,可沿相应方向移动该块:

移动古腾堡块

或者,您可以拖放块。要激活拖放功能,您需要将鼠标悬停在 六个点 上下箭头之间

古腾堡拖放

放在一起

一旦您了解了新块编辑器的工作流程,它就会轻松而直观地进行。.

起初,您可能会遇到一些成长的烦恼,并且难以执行您认为理所当然的基本操作.

但是一旦掌握了一切,就应该遍历建筑布局。加上古腾堡(Gutenberg)随附的更高级的块,您将比TinyMCE WordPress编辑器更具灵活性.

古腾堡(Jutenberg)的一些巧妙但更高级的技巧

随着您对WordPress Gutenberg块编辑器更加熟悉,您可能会发现其中一些技巧可以节省时间.

通过键入快速创建一个新块

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

/块名

将显示一个自动建议框,以帮助您找到相关的阻止.

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

相当方便且省时!

阻止快捷方式

直接编辑源代码

您随时可以通过点击以下网址来编辑整个帖子的源代码 三点 在右上角,然后选择 代码编辑器

在gutenberg中编辑代码

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

新的块编辑器包括几种不同的模式,可让您更改编辑体验。您可以:

  • 添加固定工具栏,例如TinyMCE编辑器
  • 全屏显示
  • 放一个 "聚光灯" 在活动块上

要使用这些 "观看次数", 点击 三点 右上角的图标.

古腾堡的景色

使用Gutenberg键盘快捷键可以节省时间

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

  • 在所选块上方或下方插入新块
  • 删除区块
  • 复制块
  • 等等.

要打开键盘快捷键的完整列表,请使用 Shift + Alt + H 捷径.

古腾堡(Gutenberg)键盘快捷键

创建可重复使用的块模板

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

要创建模板:

  • 选择要包含的块
  • 点击 三点 图标
  • 选择 添加到可重复使用的块

古腾堡可重复使用的块模板

编辑可重复使用的块内容

除了使快速插入格式化的内容变得容易之外,可重用块还使您可以快速更新该可重用块的所有实例.

也就是说,一旦您编辑了可重复使用的块内容,使用该可重复使用的块的每个帖子也会获得新内容.

要编辑可重复使用的块,请滚动至 可重复使用 块插入器中的“部分”,然后单击 管理所有可重复使用的块 按钮。或者,您可以访问yoursite.com/wp-admin/edit.php?post_type=wp_block(确保使用您的真实网址替换yoursite.com).

编辑WordPress可重用块

用插件扩展块编辑器

如果想花哨的话,现在可以找到很多添加自己块的Gutenberg扩展插件.

水獭块 是入门的好选择。它为您提供了其他功能,例如定价,推荐,Google地图,共享图标, "点击鸣叫" 按钮等.


Otter的古腾堡块和模板库 Otter的古腾堡块和模板库

作者: 主题岛

当前版本:1.5.4

上次更新时间:2020年5月26日

otter-blocks.zip


98%评级


60,000+安装


WP 5.2+要求

使用块管理器控制混乱

新的编辑器添加了很多块,尤其是如果您使用的是我们上面提到的某些块插件。这会使事情变得混乱,并使您减速。如果有些块您从未打算使用,则可以使用 区块经理 禁用它们.

要使用块管理器:

  • 点击 三点 右上角的图标
  • 选择 区块经理
  • 使用复选框根据需要禁用块

WordPress区块管理器

使用块导航快速浏览内容

对于冗长的内容或使用大量嵌套块的内容,很难快速找到所需的块.

为了帮助您,块编辑器包括一个 块导航 工具,您可以通过点击工具栏或使用 Shift + Alt + O 键盘快捷键.

如果您位于嵌套块(例如列)中,则 块导航 工具将显示所有嵌套块。要选择一个特定的块,您可以在列表中单击它.

块导航功能

在编辑和选择模式之间切换

使用WordPress 5.4,您可以访问两种不同的模式,您可以使用顶部工具栏在两种模式之间进行切换:

  • 编辑 –这是您大部分时间的工作。它使您可以编辑所有块的内容。这是默认的编辑器模式.
  • 选择 –这样可以更轻松地选择特定的块,尤其是在使用嵌套块(例如,列内的块)时。点击进入街区后,您将自动切换回 编辑 模式.

WordPress区块编辑器选择模式

试用新的块编辑器功能

自从块编辑器合并到内核以来,实际上有两个版本的块编辑器:

  1. WordPress核心软件中的本机版本(这可能是您使用的版本)
  2. 古腾堡插件

Gutenberg插件版本基本上是核心编辑器的测试场。插件版本包含正在开发的新功能。最终,这些功能将合并到核心中。但是,如果您想尽早与他们一起玩耍,您所要做的就是从WordPress.org安装Gutenberg插件.


古腾堡 古腾堡

作者:古腾堡团队

当前版本:8.2.1

上次更新时间:2020年5月28日

gutenberg.8.2.1.zip


40%的评价


200,000+安装


5.3.0要求

您所有的旧内容会怎样??

在结束之前,请允许我快速介绍一下更新到WordPress 5.0后所有旧内容会发生的情况(如果还没有的话).

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

当您将网站更新为WordPress 5.0时,并且已有使用原始TinyMCE编辑器构建的现有内容,块编辑器会将所有旧内容合并为一个 经典街区. 这个Classic块基本上是TinyMCE编辑器…但是嵌入在新的块编辑器中.

古腾堡经典街区

要使用旧内容,您可以:

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

转换为块

古腾堡块编辑器的下一步是什么?

尽管块编辑器现已正式成为核心部分(由于WordPress 5.0的发布),但WordPress团队还远远没有完成Gutenberg项目.

目前,核心团队正在努力让区块编辑器替换WordPress小部件,以及让您创建带有区块的导航菜单.

这些功能目前还不完善,但仍在继续。因此,必须尽快开始学习块编辑器界面!

对于大多数休闲用户,经过一段时间的磨难,它将带来更灵活的内容创建体验.

非开发人员将能够通过按钮,内容嵌入等更多元素直观地制作更复杂的布局。希望这将有助于WordPress继续增长.

现在,我们希望收到您的来信。我敢肯定,你们中的许多人都对新的Gutenberg块编辑器有强烈的想法-请在评论中让我们知道!

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

布局,演示和编辑,Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map