Divi WordPress Theme

2018年12月6日,随着WordPress 5.0的发布,WordPress进行了重大更改。 旧的经典TinyMCE内容编辑器已不复存在,取而代之的是代号为Gutenberg的全新块编辑器。

尽管新的块编辑器确实可以让您执行一些以前无法在WordPress中执行的操作,但当您初次使用它时,它也不总是最直观的工具。

为了帮助您从新的块编辑器中获得最大收益,我们决定创建本教程,以帮助您快速掌握如何使用块编辑器执行与之前使用TinyMCE编辑器相同的操作类型。

无论您是已经将网站升级到WordPress 5.0,还是仍在使用WordPress 4.9,本教程都可以为您提供帮助。

*注–虽然新的编辑器在开发过程中被命名为“ Gutenberg”,但实际上它现在是默认编辑器,这意味着它仅被称为“ WordPress编辑器”或“块编辑器”。 因为WordPress团队希望取消Gutenberg的名称,所以您经常会看到我称其为“块编辑器”,因此本教程对于以后浏览的人们来说是有意义的!

WordPress Gutenberg块编辑器的(非常)快速介绍

与新编辑器的最大区别是 (因此名称为“块编辑器”)。 使用旧的TinyMCE编辑器,您的所有内容都在一个长字段中,有点像Microsoft Word文档。 但是,使用新的编辑器,内容中的每个项目都是一个单独的“块”。 例如:

  • 段落是一个单独的块
  • 图像是一个单独的块
  • 嵌入式YouTube视频是一个单独的块
  • 标题是一个单独的块
  • …我想你现在明白了。 一切都是一个单独的块。

在此WordPress Gutenberg教程中,我将大量引用“插入新块”。 因此,在深入学习本教程之前,让我快速向您确切演示如何实际执行该操作。

插入新块有三种不同的方法:

首先,您可以使用 两个之一 加号图标。 这些图标将打开一个弹出窗口,您可以在其中选择要插入的块:

  1. 左上角的加号图标始终可见。 插入一个新块 在最后 您的内容。
  2. 仅当将鼠标悬停在两个现有块之间的空间上时,才会显示此加号图标。 它可以让您插入一个新块 之间 现有的块。

如何在古腾堡添加新块

其次,您也可以按Enter键在您正在使用的块下面创建一个新的空白块。然后,您可以使用块左侧的加号图标来选择要使用的块类型:

添加空白块

当您浏览块编辑器教程时,这些各种按钮将更有意义。

如何通过WordPress块编辑器使用文本

让我们从最基本的内容开始-文本。 在本节中,我将向您展示如何处理段落文本,标题,引号等内容。然后,我还将向您展示如何插入链接和其他基本设置。

添加各种段落文本

创建新的段落文本很容易–您只需单击并键入即可,就像使用旧编辑器一样。 唯一的区别是,每当您按下Enter键时,编辑器都会为您的下一个段落创建一个单独的块:

WordPress古腾堡文本教程

添加标题(H2,H3,H4)和其他文本块

如果要插入标题,一种方法是插入新的标题栏:

新增文字

另外,您也可以使用工具栏将常规段落块转换为标题:

标题

您可以对其他文本块使用相同的方法,例如:

  • 引号
  • 清单
  • 等等。

格式化文本(对齐方式,颜色等)

要设置文本格式,您将使用两个区域。

首先,有一个浮动工具栏。 该工具栏仅在您 不是 积极打字。 在这里您可以:

  • 更改对齐方式
  • 添加粗体和斜体

格式化文字

如果您不喜欢格式化工具栏的显示和消失方式,则还可以使用编辑器的设置将工具栏固定在界面顶部,这更类似于经典TinyMCE编辑器的工作方式:

固定工具栏

对于其他格式设置选项(例如文本的颜色或字体大小),您可以使用 堵塞 侧边栏(当您单击一个块时,它会自动选择)。

例如,如果您单击一个段落,则可以使用边栏使文本变大或变小和/或更改文本颜色:

侧边栏

不幸的是,每个块的这些选项都不相同。 例如,现在是 不是 除非您使用自己的自定义CSS,否则可以更改标题的颜色。

插入链接

要插入链接,请单击包含您要链接的文本的块。 然后,寻找 关联 格式工具栏上的图标。 这将打开一个界面,您可以在其中添加链接(也可以单击切换按钮以使链接在新选项卡中打开):

新增连结

如何插入媒体内容(图像,视频等)

既然您对如何在块编辑器中使用文本有了一个很好的了解,那么让我们介绍内容的另一个组成部分-图像和视频。

插入和格式化图像(包括替代文本)

插入图片的一种方法是添加 图像 堵塞。 这样您就可以访问WordPress媒体库(就像旧的编辑器一样)或从网址插入图片:

插入图片

但是,块编辑器还添加了一种更简单的插入图像的新方法。 现在,您可以将图像直接从桌面拖到编辑器界面中:

插入图像后,您可以使用右侧边栏执行以下操作:

  1. 添加替代文字
  2. 变更图片大小
  3. 使图像链接到特定的URL

您还可以通过直接在图片下方键入内容来添加标题:

配置图片

插入视频(和其他嵌入式内容)

为了帮助您嵌入来自YouTube,Vimeo和许多其他服务的视频,块编辑器为您提供了完整类别的 嵌入 块:

嵌入YouTube视频

选择一个块后,只需将URL粘贴到要嵌入的内容中:

插入连结

另外,您也可以将YouTube URL粘贴到空白块中,这样可以节省一些单击:

您可以对所有其他类型的嵌入式内容使用相同的方法。

如何移动和重新排列块

使用旧的WordPress编辑器,您必须使用剪切和粘贴来移动内容。 你仍然可以 种类 使用新的块编辑器可以做到这一点,但这并不完美。

例如,虽然您可以从一个块剪切和粘贴文本,但是剪切文本所在的空块仍将存在,因此并不完全相同。

相反,通常最好使用块编辑器的内置控件。

您可以通过两种方式移动块。 要访问它们,请将鼠标悬停在要操作的块上。

首先,您可以使用箭头将方块向上或向下移动一个位置。 其次,您还可以使用拖放功能将块移动到页面上的任意位置(要激活拖放功能,您需要将鼠标悬停在箭头之间的六个点上):

嵌入视频

使用块编辑器提高工作效率的20多种技巧

我希望上面的WordPress Gutenberg教程能使您对如何在基本级别上使用块编辑器有个好​​主意。 但是,一旦掌握了基础知识,就会有很多技巧可以帮助您更有效地使用编辑器。

我正在谈论诸如使用“ /”更快地插入新块,使用列创建更复杂的布局,使用键盘快捷键以节省时间等问题。

根据我使用编辑器的实际经验,我将所有这些技巧收集到了20多个块编辑器技巧的列表中,以帮助您提高工作效率。

用更多的块扩展您的内容

古腾堡块编辑器的一大优点是您不仅限于默认的块集合。 使用第三方Gutenberg块插件,您可以为以下内容添加新的块:

  • 定价表
  • 图片库
  • 滑杆
  • 感言
  • …还有更多

您可以禁用新的WordPress区块编辑器吗?

是的! 禁用新的块编辑器并继续使用TinyMCE编辑器非常简单。 实际上,我们实际上撰写了一篇专门针对该主题的文章。 了解如何禁用WordPress Gutenberg块编辑器并继续使用经典的TinyMCE编辑器。

充分利用此WordPress Gutenberg教程!

无论您是以Gutenberg编辑器还是WordPress块编辑器而闻名,我希望本教程对您有所帮助,并且您现在对如何使用新的块编辑器创建内容有了更好的了解。

如果您对如何使用新的块编辑器还有其他疑问,请发表评论,我们将竭诚为您服务!

【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=