WordPress 块模式 101:它们是什么? 以及如何使用它们

已发表: 2021-08-03

想在 WordPress 块编辑器中节省时间并创建更专业的设计吗? 如果是这样,了解 WordPress 块模式可能正是您所需要的。

使用块状图案,您可以插入预制设计,对其进行调整以满足您的需求,并准备好开始使用。 这是一个很好的节省时间。 而且,如果您不是设计师,块模式也很有帮助,因为即使您不具备从头开始构建这些设计的知识,它们也可以让您利用更多独特的设计。

在这篇文章中,我们将介绍您需要了解的有关 WordPress 块模式的所有信息:

  • 什么是 WordPress 块模式以及它们与可重复使用的块有何不同。
  • 如何在编辑器中使用块模式。
  • 在哪里可以找到新的块模式以及如何使用它们。
  • 如何在没有代码的情况下创建自己的块模式。
#WordPress #block patterns 101:它们是什么以及如何使用它们?
点击推文

什么是 WordPress 块模式?

WordPress 块模式本质上只是由块组成的模板。

它们可以包含以特定布局排列的单个块或多个块。 除了块本身,块图案还将包括这些块的设置(例如将按钮配置为某种颜色)。

您可以找到整页模板的块模式。 或者,更常见的是,您会发现您可能希望在页面中使用的某些部分的块模式。 然后,您可以将多个积木图案(如乐高积木)组合在一起来构建您的设计。

例如,假设您要创建一个具有图像背景、一些标题文本和一个按钮的部分。 您可以使用块编辑器手动设置它。 但是使用块模式,您可以插入具有该布局的预制设计,然后对其进行自定义以匹配您的内容。

正如我上面提到的,使用 WordPress 块模式的主要好处是:

  1. 它们可以节省您的时间。
  2. 它们使创建更复杂的设计变得更加容易,因为您可能不具备自己创建某些类型设计的知识。

块模式与可重用块

既然您知道 WordPress 块模式是什么,您可能会认为它们听起来很像 WordPress 可重用块,这是在块模式之前引入的核心功能。

可重复使用的块也是一个或多个块的集合,您可以轻松地将其插入到您的内容中。

它们的相似之处在于都可以让您快速插入预制设计,但它们有一个很大的不同:

  • 块状图案是您设计的起点。 您可以使用它们来导入您想要使用的基本设计,但您每次都将自定义它们,并且块模式的每个实例都会有所不同。
  • 可重复使用的块在每个实例中都是相同的。 可重用块的每个实例将始终相同,如果您在一个地方更新可重用块设计,这些更改将自动应用于可重用块的每个实例。

这是您何时可以使用每个示例的示例:

首先,假设您有一种特殊的格式可以在您的内容中插入引号。 因此,每当您插入引号时,您都希望使用完全相同的块排列来保持一致。

如果每个引用都不同,您将需要为此使用块模式。 您可以插入块模式以设置基本格式,然后添加唯一的引用文本。

现在,假设您有一个号召性用语 (CTA),让人们加入您的电子邮件列表,您希望在每篇博客文章的末尾包含该列表。 您希望此 CTA 在每个实例中都完全相同,并且您还希望能够在将来对其进行更新。

对于这个用例,您可能希望使用可重用的块。 可重用块将确保您的 CTA 的每个实例都是相同的。 如果您想更改 CTA,只需更新可重用块一次,这些更改将应用​​于每个实例。

如何使用 WordPress 块模式

您可以通过用于插入块的相同界面插入块模式。

首先,打开要在其中插入块模式的内容的编辑器。 然后,单击左上角的加号图标以打开内容插入器界面。

在出现的边栏中,单击“模式”选项卡。 然后,您可以使用下拉菜单过滤掉不同类型的模式。

当您找到您喜欢的模式时,您需要做的就是单击它以将其插入到您的内容中:

浏览 WordPress 块模式

插入块图案后,您可以像手动创建设计一样编辑所有单独的块:

编辑 WordPress 块模式

就是这样! 如果您想插入另一个块模式,您可以重复相同的过程。 块模式将插入您在编辑器中放置光标的任何位置。

如何查找和使用新的 WordPress 块模式

为了帮助您找到新的块模式,WordPress 团队在 WordPress 创建了一个官方块模式库。 您可以通过单击此处访问它。

您可以使用过滤器浏览所有块模式并单击结果进行预览。 如果您找到喜欢的块图案,只需单击“复制图案”按钮即可将图案复制到剪贴板:

块模式库

现在,打开要添加块模式的内容的编辑器并将其粘贴,就像粘贴常规文本一样 - 通过右键单击并选择粘贴或使用键盘快捷键如Ctrl + V (或Mac 上的Cmd + V )。

就是这样——你应该看到完整的块图案出现在你粘贴的任何地方:

从库中复制和粘贴块图案

除了 WordPress.org 上的官方块模式库,您还可以找到第三方目录,如 ShareABlock 和 Gutenberg Hub 模板库(使用与官方库相同的复制/粘贴方法)。

您还可以找到许多插件,让您插入块模式和模板,尽管它们可能使用自己的自定义解决方案而不是使用本机块模式功能。 无论哪种方式,最终的结果都是一样的。 您可以在我们关于 Gutenberg 模板插件的帖子中找到一些最佳选项。

如何在没有代码的情况下创建自己的 WordPress 块模式

到目前为止,核心 WordPress 块编辑器不允许您创建自己的块模式,除非您知道如何编码,这有点令人失望。

值得庆幸的是,正如您对 WordPress 所期望的那样,有一些插件可以解决这个问题。

我个人最喜欢的是 Justin Tadlock 的免费 Block Pattern Builder 插件。 本质上,这个插件可以让你使用块编辑器创建自己的设计,然后将其保存为块模式。 因此,您可以使用编辑器设计您的模式,将其保存为模式,然后像任何其他模式一样轻松插入它。

老实说,这个功能不在核心 WordPress 软件中有点奇怪,但这没什么大不了的,因为你可以通过安装一个免费插件来解决它。

首先,从 WordPress.org 安装并激活免费的 Block Pattern Builder 插件。 我正在使用 Justin Tadlock 的上述插件,但是 BlockMeister 有一个同名的插件,它似乎提供了相同的功能和更多的功能。

然后,打开常规编辑器并创建要保存的设计。 完成后,选择要包含在块模式中的所有块,然后单击三个点图标。 然后,选择Add to Block Patterns选项:

创建新的块模式

然后你可以给它一个名字:

给你的图案起个名字

就是这样——您现在可以像插入任何其他块模式一样插入它。 默认情况下,它将位于“未分类”部分:

插入您自己的块模式

除了在编辑器中工作之外,您还将在 WordPress 仪表板中获得一个专用的块模式选项卡来管理和创建块模式。

立即开始使用块模式

WordPress 块模式是一个非常有用的工具,可以从块编辑器中获得更多信息,因此了解它们的工作原理很重要。

了解有关#WordPress #block 模式的所有信息 - 它们的工作原理以及在哪里可以找到它们
点击推文

使用块模式非常简单——你可以像块一样插入它们。 一旦插入它们,您就可以编辑图案中的块,就像您自己创建设计一样。

为了给自己更多的灵活性,有几种方法可以访问新的块模式:

  1. 您可以使用 WordPress.org 上的官方块模式库或第三方库网站之一。 您需要做的就是在库和 WordPress 编辑器之间复制和粘贴。
  2. 您可以使用我们收集的 Gutenberg 模板插件之一。 这些插件并不都使用原生块模式功能,但它们确实具有完全相同的目的和功能。
  3. 您可以使用编辑器和像 Block Pattern Builder 这样的插件来设计自己的块模式。 保存设计后,您可以在未来轻松地重复使用它们。

要了解其他一些改进您在块编辑器中的工作方式的方法,请查看我们的指南,了解如何充分利用块编辑器和我们最好的块插件集合。

您对 WordPress 块模式还有任何疑问吗? 在评论中告诉我们,我们会尽力提供帮助。

免费指南

加快速度的 5 个基本技巧
您的 WordPress 网站

将加载时间缩短 50-80%
只需遵循简单的提示。

下载免费指南