WordPress 块模式初学者指南 [+ WCEU 2022 演讲者 Sean Blakeley 的见解]

自从在 WordPress 5.0 (Gutenberg) 中推出块编辑器以来,块已成为大多数 WordPress 用户工作流程的重要组成部分。虽然您可以通过从头开始组装块集合来创建几乎任何类型的设计,但核心团队一直专注于寻找方法让 WordPress 用户更容易从块的多功能性中受益。

WordPress 块模式,或一个或多个块的预定义集合,让您可以更轻松地在块编辑器中创建和自定义设计。您无需从头开始设计,只需添加您喜欢的块图案、自定义内容,然后您就可以开始比赛了。

在此详细指南中,我们将涵盖您需要了解的有关 WordPress 块模式的所有信息,并包括 Sean Blakeley 在 WordCamp Europe 2022 会议“块模式革命”中的见解 。请随时单击以下任何链接跳转到该部分:

  • 什么是 WordPress 块模式?
  • 为什么使用 WordPress 块模式?
  • WordPress 块模式与可重用块
  • 在哪里可以找到块模式(以及如何使用它们)
  • 如何使用或不使用代码创建自己的自定义块模式

什么是 WordPress 块模式?

WordPress 块模式是一个或多个块的预定义集合,您可以轻松将其插入 WordPress 帖子、页面、完整的站点编辑模板等。插入块图案后,您可以使用自己的内容对其进行完全自定义,使其独一无二。

您可能更熟悉的另一个术语是“模板”。块模式本质上是预制模板。您将“模板”导入编辑器,然后根据需要对其进行定制。
以下是官方 WordPress.org 模式库中定价表的块模式示例:

您可以在帖子或页面中插入该模式,然后自定义所有文本和颜色以匹配您的站点。

WordPress 块模式如何工作?

Americaneagle.com的 WordPress 技术总监 Sean Blakeley 在他的 WCEU 2022 会议上将块模式定义为“包含块的容器或容器”。它不添加任何功能,不改变任何东西。它只是一个容器——但这看似简单。”
他提供了音乐的类比:“音符的数量是有限的,但是使用这有限数量的音符的作曲却千差万别。块是音符,块模式是组合。”
要使用块模式,您将使用内置模式资源管理器或 WordPress.org 模式库将其插入编辑器。然后,您将能够完全自定义所有内容和设计设置,就像您从头开始创建设计一样。
我们在下面有一整节介绍如何查找和使用块模式,因此我们将更详细地介绍这个主题。

为什么使用 WordPress 块模式?

开始使用块模式有几个原因。
首先是块模式可以帮助您节省时间并提高工作效率:

  • 如果您正在设计站点,块模式可以帮助您在构建关键页面时节省时间。出于这个原因,许多主题已经开始包含它们自己的块模式,您可以在设置站点时使用这些模式。
  • 如果您发现自己在多个地方重复使用布局,将它们保存为块模式可以消除每次手动重新创建布局的需要。

其次,块模式还可以帮助您获得您可能没有的新设计能力。如果您不是专业设计师,那么从头开始创建引人注目的设计是很困难的(或者可能是不可能的)。使用块模式,您可以轻松地将专业设计融入您的WordPress 网站,而无需设计学位。
第三,根据 Blakeley 的说法,块模式有助于使 UI 组件的创建民主化。“想想从 TinyMCE 编辑器和短代码到古腾堡拖放界面的演变,”布莱克利在他的 WCEU 2022 会议上说。这种非凡的演变使几乎任何人都能够创建 UI 组件,包括代理机构的客户和自由职业者。“我们现在可以提供馅饼,并让客户也可以自己制作馅饼,”他说。

WordPress 块模式与可重用块

如果您熟悉 WordPress 编辑器,您可能已经注意到 WordPress 块模式听起来像是编辑器中的另一个功能:可重用块。块模式和可重用块都允许您插入一个或多个块的集合。
那么,WordPress 块模式和可重用块之间有什么区别,什么时候使用它们才是正确的时机?

以下是主要区别:

  • 块模式- 这些是您用作起点的模板。您通常会自定义模式的内容以使每个实例都是唯一的(尽管您不必这样做)。
  • 可重复使用的块——这些块是在每个实例中都相同的块组。如果您更新可重用块,则该更改将应用​​于该可重用块的每个实例。

关键区别在于当您编辑块模式或可重用块时会发生什么:

  • 块模式- 插入后对块模式所做的任何更改仅适用于该内容。
  • 可重用块- 插入后对可重用块所做的任何更改都适用于可重用块的所有实例。

例如,假设您想在帖子中插入号召性用语 (CTA)。您可以根据您的目标使用模式或可重用块:

  1. 如果您计划为每个帖子个性化 CTA 的内容,您可能需要使用块模式。块模式将消除为每个实例重新创建基本设计的需要,但您可以根据需要自由更新内容,而无需更改 CTA 的其他实例。
  2. 如果您希望 CTA 在每篇文章中都完全相同,则需要使用可重复使用的块。如果您将来想更改 CTA,只需编辑一次可重用块,该 CTA 的所有实例都会自动更新。

在哪里可以找到 WordPress 块模式(以及如何使用它们)

虽然我们将在下一节中讨论如何创建您自己的块模式,但开始使用块模式的最简单方法是使用预制模式。

您有多种选择来查找和使用预制块模式:

  1. 官方 WordPress.org 模式库提供了大量预制模式。使用它们就像将它们复制并粘贴到您的设计中一样简单。
  2. 您的主题可能包含一些自己的模式。随着主题开发人员在他们的工作流程中包含块模式,这在当今变得越来越普遍。
  3. 您可以安装块插件,为您的站点添加新模式。

让我们来看看所有的选项……

WordPress.org 模式库

块模式的“官方”来源是 WordPress.org 模式库。就像 WordPress.org 有免费插件和主题的目录一样,它也有一个免费块模式的目录。
“这使用户能够在整个 WordPress 社区中以方便的方式共享块模式,”布莱克利在他的 WCEU 2022 会议上说。

要找到您喜欢的块模式,只需前往模式库 并使用搜索和筛选选项:

要查看更大的预览,您可以单击该图案以打开其列表页面。

要使用图案,请单击“复制图案” 按钮将其复制到剪贴板:

现在,为您要使用该模式的帖子或页面打开 WordPress 编辑器。

将光标定位在您想要图案所在的位置并将图案粘贴进去。您可以像复制和粘贴常规文本时那样粘贴它:

  • 右键单击并选择粘贴。
  • 使用普通的键盘快捷键 – Ctrl+V / Cmd+V。

您应该在编辑器中看到该模式。您可以自由编辑所有内容,就像您自己创建设计一样:

关于 WordPress.org 块模式中图像的注释

如果您复制并粘贴包含图像的块图案,则默认情况下该图像将托管在第三方服务器上。
这不适合在您的网站上长期使用,因为如果发生某些事情,该图像可能会更改或停止工作。

为避免出现问题,您可以执行以下两项操作之一:

  1. 如果要使用自己的图片,可以将图案中的图片替换为自己独有的图片。
  2. 如果您想继续使用示例模式中的图像,您可以下载它,然后将其上传到您的 WordPress 媒体库。然后,您可以将模式中的外部图像替换为服务器上托管的版本。

使用主题的内置模式

如今,许多主题已经开始包含它们自己的块模式。这并不适用 于所有主题,但值得检查您的主题是否有自己的模式。
通常,这些模式经过专门优化以配合您的主题及其设计美学。此外,您还可以从 WordPress 编辑器中访问这些模式,这使得使用它们变得很方便。
首先,打开要使用模式的帖子或页面的编辑器。
单击加号 图标打开块插入器侧边栏。然后,选择模式 标题。
如果您的主题提供块模式,它们应该显示在侧边栏中。

为了更容易找到块模式,您可以使用下拉菜单按类别过滤,或者您可以单击探索 以打开更大的块模式资源管理器:

这是完整的块模式浏览器的样子:

要插入块图案,您需要做的就是单击它。然后它将显示在编辑器中,您可以根据需要对其进行完全自定义。

安装添加模式的插件

最后,许多插件也会添加自己的模式(尽管有些插件可能称它们为“模板”)。
这些插件中的大多数都包含它们自己的自定义块,以及使用这些块的块模式。
最受欢迎的选项是Redux,其中包含 1,000 多种模式。但是,您可以在 WordPress.org 上找到其他插件,所以请随意探索。

插入模式的确切方式将取决于插件,但它是如何与 Redux 一起工作的:

  1. 打开要添加模式的帖子或页面的编辑器。
  2. 单击 顶部工具栏上的库选项。
  3. 浏览并插入模式。

如何创建自己的 WordPress 块模式

在某些情况下,您可能希望创建自己的块模式,您可以根据需要重复使用这些模式。

您有两个主要选项来创建 WordPress 块模式:

  1. 您可以安装一个插件,让您使用编辑器设计和保存自己的块模式。
  2. 您可以使用自定义代码在没有插件的情况下注册您自己的块模式。

如果您不是开发人员,您会希望使用第一种方法,因为它不需要任何技术知识。

使用插件创建 WordPress 块模式

虽然 WordPress 允许您直接从编辑器中保存自己的可重用块,但您无法获得块模式的相同功能。
然而,在免费的 WordPress 插件的帮助下,您可以添加类似的功能,这样您就可以将任何块/块组保存为自己的模式,就像您可以将可重复使用的块一样。
 Justin Tadlock 的Blockmeister 和Block Pattern Builder是两个不错的选择。这两个插件的工作方式相似,但我们推荐 Blockmeister,因为它可以让您更好地控制使用自定义块模式类别和关键字来组织块模式。
首先,从 WordPress.org 安装并激活免费的 Blockmeister 插件。

创建块模式

您有两种创建块模式的选项。
首先,如果您已经在要保存为块模式的帖子或页面中创建了布局,则可以继续并打开该页面的编辑器。
然后,选择要包含在模式中的所有块,然后单击 工具栏上的三点图标。

在下拉列表中,您会 在本机选项上方看到一个新的添加到块模式选项,以另存为可重用块。继续并选择该选项:

然后,您可以为您的模式命名以帮助您记住它:

 如果你想从头开始设计一个新的块模式,你也可以在你的 WordPress 仪表板中转到Block Patterns → Add New 。

这将再次打开 WordPress 编辑器。但是,您在此处创建的任何设计都只会调整块图案。它不会像您在帖子或页面编辑器中工作时那样在您的网站上发布任何新内容:

组织你的块模式

Blockmeister 的优点之一是它允许您使用类别和关键字(您可以将关键字视为标签)来组织您的块模式。
要添加这些组织选项,请转到WordPress 仪表板中的块模式 → 所有模式 以查看所有模式的列表。

然后,编辑要为其添加类别或标签的模式:

这将打开您在上面看到的同一编辑器。如果需要,您可以编辑块图案内容本身。

要添加块模式类别或关键字,请使用侧边栏中的选项:

插入您的自定义块模式

您可以像任何其他块模式一样从编辑器内部插入自定义块模式。您将能够使用您在上一节中创建的类别和关键字找到它们:

使用自定义代码创建 WordPress 块模式

对于更高级的用户,您还可以使用代码创建自己的块模式。
为此,您将使用register_block_pattern 函数。官方的 Block Editor Handbook 提供了使用该功能的详细说明和示例。您可以在此处找到该文档。

立即开始使用 WordPress 块模式

WordPress 块模式在 WordPress 块编辑器中扮演着重要的角色。它们可以帮助您访问新设计,同时提高工作效率。展望未来,随着主题和插件开发人员继续在他们的产品中构建块模式,它们将继续发挥越来越大的作用。
您还可以使用像 Blockmeister 这样的插件或一些自定义代码来创建自己的块模式来简化您的工作流程。今天尝试插入您的第一个块图案,您会立即看到它们的多功能性。

Newsletter Updates

Enter your email address below and subscribe to our newsletter

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注