Gutenberg WordPress 是一种全新的块编辑器,用于在 WordPress 中编辑帖子和页面。从 WordPress 5.0 开始,每个 WordPress 用户都需要学习,因此 WordPress Gutenberg 指南适合所有人。

如果您认为您已将站点升级到 WordPress 5.0,则您的站点应默认使用新的 Gutenberg 编辑器。您现在所能做的就是学习如何使用新的古腾堡积木系统。我们将简单地指导您通过古腾堡创建基本的 WordPress 帖子,但无论您使用古腾堡制作什么样的内容,您都可以使用相同的方法。

使用 WordPress 古腾堡指南

[](https://res.cloudinary.com/practicaldev/image/fetch/s--PyC8mFF5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh5.googleusercontent .com/E75jfWT2Pq6-Io1DNNgIzIt85uycPnASKVnnmn7tSC48z2uXUX43ivf8DRGZRKpbWfKF8DS4BskY17aXmkcLwqMFfWINY6Qm6afSkYlTEDLUAQR5IflN-gXEh3h4zr-kFotP3v3G)

使用古腾堡既简单又简单。在这篇文章中,我们将向您展示一个使用古腾堡的简单文章。

首次打开新页面或帖子时,您会看到空白画布可供您使用。

** ‘+’** 按钮在左上角。选择它以打开块面板。每个选项卡显示逻辑组织块的列表。这是可以找到所有块的地方。

向下滚动以查看所有可用的块。 WordPress 包含几十个块,并且每次更新都会引入更多块。如果您使用第三方阻止插件,您可能会看到更多。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--P79D4Lz4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh6. googleusercontent.com/9gCfKu4fy_w1vHYS-7ujHS07FZ3eFloeV3Rj1ATnwd3uXuSSMGBYeeZQfe3Bpx250Rd5Jf355QkOm0pAQYMqmy1X2qak0nYiFxQWdd3nB1THkgAyMQnsrUPAmdyvQNEp0Txl_RwL)

您可以在六个主要部分中找到您的块:

“内联元素”部分目前有一个用于插入内联图像的块。

“通用块”部分包含用于创建帖子或页面的所有基本块,包括段落、图像、标题等。

“格式化”部分有更多选项,例如代码、自定义 HTML,用于自定义帖子或页面的内容。

“布局元素”部分允许您自定义按钮、列、组、媒体和文本。

“小部件”部分允许您嵌入简码、档案、日历、最新评论、帖子和标签云。

“嵌入”部分增加了对 Facebook、Twitter、YouTube 等外部资源集成的支持,无需额外的插件。您在此列表中看到的确切内容取决于您的 WordPress 主题以及您是否安装了任何第三方块插件。

如果您使用像 Ultimate Addons for Gutenberg 这样的 Gutenberg Block 插件,您还会在侧边栏中看到额外的部分,概述了该特定插件添加的所有块。

在页面右侧,您会看到一个熟悉的发布侧边栏。这与永久链接、特色图像、类别等部分一直都是一样的。

您将在右侧注意到的一个变化是您所看到的新动态性质。该列将根据您在中心选择的块而变化。

让我们开始。

1\。创建新页面

创建新页面的工作方式与往常一样。

登录到 WordPress。

当您在仪表板上时。选择页面>>添加新的。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--SGANHwsW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh6. googleusercontent.com/VXmodgnPyYYl9q14WLIh-a2caZz1Vdn28MnvQyUGOVF6U-hX4B_whs-cYBzGl3ppbyAgNCxh0Qtef13tJpu_YerZaaKV2JWudw9ooJLn0P5ue6D0XOMrf2W6d67vu2mN9NchNhRH)

现在您应该会看到一个空白页面,其中包含 WordPress 侧边菜单和右侧的新菜单。这是我们在本指南中所做的一切的基础。

它也是我们将用来构建功能齐全的网页的空白画布。

2\。添加标题

首先,我们要添加一个标题。

由于标题是 WordPress 工作方式的基础,因此标题区域已经内置在页面中,并使用“添加标题”平滑地勾勒出来。

给你的页面标题。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--epLMXoup--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh6.googleusercontent.com/ GHw5SjaF6CDQzlToLVzQuEH7y8zB_TLitm80HddCf0j20UyG8GhDrJLaI0xmwW2lzPcN7tfRJrK7yKt5mYW96o_zkmF0psWOGBOYDuvicjwkQodZHkogUO4Hi7duDoVvRGw6SHAM)

3.添加新块

[](https://res.cloudinary.com/practicaldev/image/fetch/s--JJPTRw8n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh6. googleusercontent.com/rLmyWIN1zH9eTtPfKkpWdv-ODMe3KjNsP3v2zewOrs1AaoMDGISPSgvqFtiIuaZb3LP1cZT8Uz17IncBSzWwzVkOTxsVR8046zgvSNq9lvhQgtw5EbYH1jccdhhxK95i9GZJOPwO)

默认情况下,下一个块是段落块。但是,使用 Gutenberg 编辑器添加新块很容易。

选择左上角的“+”图标,然后从页面左侧的块列中选择一个块

把它拖到主页上然后放开

您也可以用光标在页面上选择一个区域,然后从块列表中选择块,它将出现在页面上。

您还可以使用正斜杠和块名称来添加新块。

您可以选择页面上的黑色“+”框来添加块。如果您选择黑框,您将看到一个弹出菜单,其中包含流行块的列表。

从那里选择您想要的块或选择全部扫描以打开块侧边栏并从中选择。

4\。删除块

[](https://res.cloudinary.com/practicaldev/image/fetch/s--BktIuC5T--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh3.googleusercontent .com/WaKEqsIMBDZz-aZuvQKIdMB3r9yGBLafk9ipZCm4T_PpPogb2TuiGKsffdRFwc1k1IyknMDs0ZU3yJlCY_tOfd6Ii7JMHuURWJLi8js8cn55hzFt9zbN0soRir5vAvFbIP_8h1GZ)

删除块几乎和添加它们一样容易。

选择要删除的块

选择块菜单右侧的三个点

选择底部的删除块。

您还会看到可以使用 Ctrl + Alt + Z 的快捷键组合。选择、删除或使用快捷方式后,该块将消失。

5\。使用块添加标题

接下来的步骤是添加标题。

标题对于帮助读者理解内容和搜索引擎优化都至关重要。

选择页面标题下方的黑色“+”框

选择标题块

在新块中键入或粘贴您的标题

[](https://res.cloudinary.com/practicaldev/image/fetch/s--7pxndgO4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh3.googleusercontent .com/DLwm_a4cqPE-3AuoSfO5LGFlEHxodGlr21LnICyN1og6fuvU3KpOB2DJe3mnhA8FGSFagMF2CGOvgB1pGplGDjk66cyiG3EchZLtr_aO8Pi4-qPqfmuLuMRTZD_eHW4rD71ZeGEL)

标题文本在 H2 中自动格式化。您可以根据所选块在右侧菜单中看到更改。

6.使用块编辑标题

添加标题时,您会在块上方看到一个小弹出菜单。这提供了自定义单个块的选项。

您可以更改样式、位置、标题类型、对齐方式、加粗标题、将其更改为斜体、添加链接以及进行其他更改。

7\。使用块添加图像

没有一两个图像的 WordPress 帖子或页面是不完整的。通常,它是一个标题图像,无论您想在内容中包含多少图像。

添加图像非常简单。

从列表中选择一个图像块,它将出现在页面上

选择新块中的蓝色上传按钮以添加图像。或者,选择媒体库链接以从您的 WordPress 媒体库添加或从 URL 插入以从其他地方复制

[](https://res.cloudinary.com/practicaldev/image/fetch/s--8yq2gPaZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh6.googleusercontent .com/A3Mm1ehrPfcnXj9MNV0V-2WxqNUfYd7Pxc0vvIHGxE7RyQK_OIxfJ7DS-kxUck4Xoaj7KB7L7Q_IE3bVv3Wyc5V79at8uk17Z6QzpTgPw7COTbyx4ftT-6iak3K8Lkar6LpiWnxG)

您可以立即在页面右侧的图像菜单中添加图像替代文本。在这里您还可以立即调整图像的大小和样式。

8.使用块编辑图像

添加图像时,您会在图像块上方看到现在熟悉的弹出菜单,其中包含一些选项。

在这里您可以更改块、添加 URL、裁剪、添加文本、添加效果和更改图像。

9\。使用古腾堡编辑器添加书面内容

在古腾堡的编辑器中添加内容同样真诚。您可以只在页面上的空间中键入或粘贴,也可以添加段落块以保持井井有条。

选择页面上的黑色“+”按钮

从弹出菜单中选择段落块

将您的内容键入或粘贴到块中

10\。使用古腾堡编辑器编辑书面内容

[](https://res.cloudinary.com/practicaldev/image/fetch/s--H0Wofe3H--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh5.googleusercontent. com/bcn3Fv_X-kqs-zJnqaxZz_1TPggUseEGdX_NKdcjPXellOTQtsof6gsscHT_3r2X83YVUIvHO_OqCPOHXnr6U3Gi2Vh4odyDBvfmTrnTebZ2dpmdFKsD_TBhqZEkoK1MLCBRiGX1G)

编辑书面内容使用与您目前添加的其他块相同的方式。

请参阅弹出菜单以了解您的选项。它们包括更改块、重新排序其位置、更改对齐方式、添加粗体、斜体或带有向下箭头下的其他选项的 URL。

11\。在块编辑器中添加链接

[](https://res.cloudinary.com/practicaldev/image/fetch/s--stm-AEAM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh3 .googleusercontent.com/Jss4SCMMjM6gG4shemT42On55jr9EZ-XTLlMlbxMxl-aV8UGBWlQHPZ5FqoJ7H_0P9wBpGWokjsGasRdIPyFz-SfOuhP26F-jxF6PlFT3kV5_mwawNqh3C5JF5WW0CX2U5jTKHc3)

链接是网站工作方式的基础,因此它是我们页面构建过程中明智的下一步。

选择您添加的内容,您要在其中添加 URL

从块上方的编辑菜单中选择链接图标

将您的链接写入或粘贴到出现的 URL 框中

检查下方预览框中的 URL

选择是否在新标签页中打开

选择预览旁边的 URL 框以在您粘贴的链接的右侧插入链接或返回图标。

12\。在块编辑器中编辑链接

您的链接编辑选项受到合理限制,因为您只能使用它们做很多事情。

选择链接,将出现弹出菜单。在这里您可以更改 URL,更改它是否在新页面上打开,仅此而已。

13\。嵌入 YouTube 视频

[](https://res.cloudinary.com/practicaldev/image/fetch/s--GV0lvoBe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh6.googleusercontent .com/l7ehKOWZuj9O6nwWfjFaqMU7jWjASHlHzhR453fLo7S3_CPJ-ceUJqLTUsR0VKWib5tJcnIDrEosi3teYGLmYgbDHXd1mL9vP9q8jrsmM0nCEYOgCmGP8UOCB3Cx616fcEYLXijY)

嵌入 YouTube 视频过去需要将代码修补到旧版 Classic 编辑器的代码视图中。现在容易多了。

打开块侧边栏并向下滚动到嵌入

选择 YouTube 块以将其插入页面

将 YouTube 网址粘贴到显示的位置

选择蓝色的嵌入按钮

视频应该出现在带有主图像和播放按钮的块中。

14\。编辑 YouTube 视频块

YouTube 视频块中的编辑选项仅限于更改块类型、更改对齐方式和更改视频 URL。

15\。使用 Gutenberg 添加简码

添加短代码是您在构建网站时可能很难发现自己在做的另一件事。

简码通常用于将元素插入到没有小部件或其他插入方法的页面中。

要添加简码,请选择蓝色或黑色“+”以打开块侧边栏

从小部件部分选择简码块

将您的简码粘贴到框中

[](https://res.cloudinary.com/practicaldev/image/fetch/s--uiDR2EK9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh3.googleusercontent .com/ZNhU3g39r5XNKcP7IPlLRH6nix0OdCNb-u9b1EFSoXGz8BYQHgz1NfSMfzLXkEN-Xap5rdshUTyJ_CKJc6-AX-OhMJ5aDTekVKW9qFNP6bEaEDgXF4xCDoxF4xSJYD0RLPSW144t)

您可以或需要使用简码块做的事情不多。也不需要太多编辑

16\。向帖子和页面添加按钮

[](https://res.cloudinary.com/practicaldev/image/fetch/s--IrpII81G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh5.googleusercontent .com/D-4wVTGMHS9SSHTEE1PiZ8cAtCL7SH6KhW4n2IkqsNk38QHRCSsVkH5-SCkC3UC270gCGWL7MLQX_QdvSovSrWjkbX3Drfj9b4TxMcKG1jaq3x6DulN4BU40I70hMhe5Xef_h4-b)

使用块添加按钮是 Gutenberg 的另一个不太直观的元素,但它仍然很容易。

从块侧边栏的设计区域中选择要阻止的按钮

在按钮块的白色区域中键入所需的按钮语法

从块上方的编辑菜单中选择按钮样式

从块上方的编辑菜单中添加按钮 URL

以相同的方式设置文本样式,然后你就完成了

17\。创建表

[](https://res.cloudinary.com/practicaldev/image/fetch/s--1fp6Nkh0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh6.googleusercontent .com/L_s4SRNpzQbf8nFiyg-C_s7eX2UYtqiHrE-vFntRlzNwegYbQeu16EZN7BoXB7JBF0u99B3AOAMSELh3fZoy4AcavxN6f3Zhrnhu0zsvhVTr0ww4BRrg0CRI7GynA3-0MOXkJY_8)

您不太可能需要将表格添加到 WordPress 帖子或页面,但有时您可能会这样做。

您现在可能已经猜到了,这是一个障碍。

从块侧边栏中选择表格块

从选项中选择表格中所需的列数和行数

准备好后选择创建表

您现在应该看到表格出现在块中,带有用于导航的灰色轮廓

将您的表格条目添加到相应的框中

18\。编辑表格

编辑表格非常简单。

从块内表格上方的菜单中选择您的编辑选项。大多数控件将位于“编辑表”选项中。

19\。在列中排列块

[](https://res.cloudinary.com/practicaldev/image/fetch/s--aq8siO07--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh4.googleusercontent .com/xxRelaxOwOx_KPae1VBG3MoVCSyQsfw0KOLylOCQwNdTdR3Pslla9UBE0Cs4bXl2QrvmwPd76WewoOoHIs84hBeAMRq90R9N3YipqAoqv4qLZ3JbpwWvN6qktWrr3kuwiWDbcJpI)

到目前为止,我们已经创建了一个带有单个中心列的有点直接的页面。那么,如果您想要更多列怎么办?

在页面上选择一个位置以添加您的列,然后选择蓝色或黑色的“+”按钮以打开块侧边栏

从设计部分中选择列块

选择新块中的列数

将特定块添加到每一列

20\。编辑列中的块

当您使用列时,您在父元素中将页面分为三个。

这为您提供了四个可以编辑的块,并且您的选项会根据您添加的块动态变化。

21\。使用古腾堡嵌入

在 WordPress 中嵌入曾经涉及将代码剪切和粘贴到页面或帖子的代码视图中。它过去运行良好,但在尝试将嵌入嵌入设计时可能会带来挑战。

使用 Gutenberg 嵌入现在很简单,因为您现在有一系列专门用于嵌入的块。

选择蓝色或黑色“+”图标以访问块侧边栏

向下滚动到嵌入

从列表中选择您要查找的嵌入

将源中的 URL 或代码输入到嵌入块中

[](https://res.cloudinary.com/practicaldev/image/fetch/s--NWBtCDYG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh5。 googleusercontent.com/aaBpHz1x2PKW7y1XS38w3Em2n9UH9k5L5VPOBcN2AlyxJg5J7MKwCaJf8Q2p5YaV6TJGKmvO7cfm3tOQ6z3utX8WxIJ6fp2s-H_sQvcsUwJE0rkL-AyM69shxysv4xUp_em02-W2)

确认任何设置,点击嵌入,您应该会看到源代码出现在块内的帖子或页面中。

如果您没有看到嵌入的特定块,请使用嵌入块。这是一个通用块,允许您使用与上述相同的过程将几乎任何 URL 粘贴到 WordPress 中。

22\。在 Gutenberg 中保存和重用块

Gutenberg 编辑器现在使用所谓的可重用块。这些是您可以在网站的任何位置创建和重复使用的模板。

例如,假设您创建了一个号召性用语块。您可以添加图像、按钮、号召性用语副本并将其保存为可重复使用的块。

然后,您可以从块侧边栏中选择该块,并在任何页面或您喜欢的帖子上多次使用它。这是一个严重的节省时间!

让我们在 Gutenberg 创建一个简单的可重用块。

选择要使用的位置和块。我们使用了来自 Ultimate Addons for Gutenberg 的号召性用语块。你可以使用任何你喜欢的东西。

像往常一样创建和编辑块

在编辑菜单中选择三点选项

选择添加到可重用块

将您的块命名为有意义的东西

为块命名后,您应该会在其上方的编辑菜单中看到其名称更改。如果您打开块侧边栏,您会在最顶部看到一个名为“可重用块”的新选项卡。

检查这个选项卡,你会看到你的新块。

您现在可以使用与添加任何其他块相同的过程在您网站的任何位置选择和使用该块。

23\。使用古腾堡块编辑器发布

[](https://res.cloudinary.com/practicaldev/image/fetch/s--sPzSo4HP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://lh5.googleusercontent .com/UD_R0HOO76-wc89FHvRkCgwCKL1TbcLFKCsHU9W3l40wnRtST83zPsEndnZ94A6NXmN-JoY_t9Z8uJnpnslRVF1iUvV_UUUEB1Z2NUQRod1604SBeCWvI_pJOneB1SBswYSJ4E40)

使用 Gutenberg 发布页面或帖子与往常一样。不过还有一个额外的步骤。

页面右上角的蓝色“发布”按钮仍然存在,但不是按一次即可发布页面,您需要按一次然后再次确认。

如果您正在编辑已发布的页面,您将看到更新而不是保存,但粘贴到块中的粘贴结果是相同的。

结论

总之,我们希望这个简单易用的 Gutenberg WordPress 指南对创建页面或发布帖子有很大帮助。 WordPress Gutenberg blocks 是 WordPress 的新编辑器。 WordPress古腾堡编辑器使我们的发布变得容易。我们可以进一步将Gutenberg 编辑器插件用于所有短代码。

帖子WordPress Gutenberg Guide New Blocks Editor首先出现在WP 指上。