WordPress 区块模式：什么是区块模式以及如何使用它们

设计 WordPress 文章和页面可能需要大量时间和投入。因此，您可能正在寻找加速这一过程的方法。WordPress 区块模式是非常方便的工具，但您可能不知道如何利用它们。

通过 WordPress 区块模式，您可以为博客文章和页面选择预制的页面布局。这些模板可以轻松从区块编辑器中获取。此外，在开发 WordPress 主题时，您还可以设计自己的模式。

本指南将探讨您需要了解的关于区块模式的一切，包括如何制作、注册和使用它们。让我们开始吧！

📚 目录：

什么是区块模式
如何使用区块模式
如何创建新的区块模式
如何删除和隐藏区块模式
如何无需代码创建区块模式

WordPress 区块模式概述（以及为什么您可能考虑使用它们）

WordPress 区块模式是将多个区块分组为单个模板的序列。区块模式首次在 WordPress 5.5（Eckstine）中引入，它们涵盖不同的类别，包括按钮、列和文本。

您可以在 WordPress 区块模式目录中找到这些元素：

WordPress 区块模式可能听起来与可重用区块类似。然而，它们有着非常不同的用途：

区块模式 有点像您设计的起点。您将区块模式作为基础导入，然后为每个设计自定义所有内容。您可以在两个不同的文章中使用相同的区块模式，但它们之间没有任何关联。
可重用区块 在该区块的每个实例中显示完全相同的内容。例如，您可能想在博客文章的末尾添加一个一致的 CTA。您可以使用可重用块来实现这一点。如果您将来更新该可重用块，该更新将应用于该可重用块的所有实例。

使用 WordPress 区块模式可以加快您的页面设计过程。您无需将不同的区块拖放到页面上，而是可以从预制的布局中进行选择。

👉 从开发角度来看，区块模式也非常方便。如果您正在创建不同的 WordPress 主题，这些模板可以加快速度。此外，您甚至可以制作和注册自己的区块模式以满足您的特定需求。

如何使用 WordPress 区块模式（三种方法）

查找、插入和编辑区块模式很容易。让我们来看看三种不同的方法！😎

从区块模式目录复制和粘贴模式
直接从区块编辑器插入模式
提交区块模式

1. 从区块模式目录复制和粘贴模式

首先，您可以直接从 WordPress 目录复制和粘贴区块模式。这种方法允许您浏览多种布局并查看其预览以获取灵感。

首先前往区块模式目录。然后，点击一个模式并在其名称下选择 复制模式：

或者，您可以点击 添加收藏 将模式保存到您的收藏夹中。但是，您需要登录您的 WordPress.org 账户。

接下来，导航到您的 WordPress 文章或页面，然后粘贴块模式：

现在，您可以编辑各个块或整个模式以满足您的需求。

2. 从块编辑器直接插入模式

您也可以直接从块编辑器添加块模式。这种方法更快，因为您不需要在块模式目录之间来回导航。但是，预览会更小，更难查看。

打开一篇文章或页面，然后单击左上角的 + 图标。选择模式，您将看到可用模板的列表：

点击您选择的布局，它将立即添加到您的文章或页面。您也可以使用下拉菜单按类别搜索块模式。

3. 提交块模式

您可能已经注意到官方目录中的许多块模式都是用户提交的。您可以通过制作自己的模式并提交来做出贡献。

首先，您需要登录您的 WordPress.org 账户。接下来，前往新模式页面并将您的块排列成独特的布局：

确保您的模式符合 WordPress 的要求。然后，点击提交。系统将提示您输入模式的标题和描述：

最后，为您的块模式选择相关类别，然后点击完成。您的布局现在已提交审核。

如何创建和注册新的块模式（适用于主题和插件开发）

本节将解释如何为设计和开发目的创建和注册您自己的块模式。让我们来看看！👇

第一步：注册您的块模式
第二步：添加块标记和 CSS 标记
第三步：选择或创建新的块模式类别

第一步：注册您的块模式

首先，您需要通过在页面上组织不同的块来制作块模式。对设计满意后，就该使用 register_block_pattern PHP 函数和 init 钩子了。

它的基本形式如下：

function prefix_block_pattern() {
  register_block_pattern( ... );
}

add_action( 'init', 'prefix_block_pattern' );Code language: JavaScript (javascript)

现在，在您的主题中创建一个新文件夹，称之为“patterns.php”。我们还建议创建额外的 PHP 文件来注册您的新模式。它需要来自您的 functions.php 文件的 PHP 才能正常工作。

您的新块模式需要以下属性：

title：块模式的名称。
content：块的标记容器。

您也可以添加以下属性：

描述：您的区块模板的可访问描述，在屏幕阅读器等辅助设备上可见。
分类：您的区块模板的分类（稍后我们会详细讨论）。
关键字：帮助用户找到您的区块模板的关键短语。
视口宽度：您模板的宽度。
区块类型：此模板的理想区块类型的描述。
插入器：使用"false"使区块模板在插入器中不可见。

您的区块模板注册应该看起来像这样：

register_block_pattern(
	'new-theme/amazing-block-pattern',
	array(
		'title'         => 'Amazing Block Pattern',
		'viewportWidth' => 'The pattern preview's width',
		'categories'    => 'Your block pattern's categories',
		'description'   => 'An amazing block pattern description',
		'keywords'      => 'Your block pattern's keywords',
		'blockTypes'    => 'An array of blocks',
		'content'       => 'The block comment and markup',
	)
);

您还需要添加您的区块模板标记。我们将在下一步解释这一点。

步骤2：添加区块标记和CSS标记

回到您在WordPress页面上组合的区块集合。您需要从区块编辑器复制它们的标记（代码）。在我们的示例中，我们使用的是带有背景图片、标题、列和文本的区块模板标记。

我们的示例区块模板如下所示：

复制标记并将其粘贴到 content 行上，用单引号包裹：

'content' => '
<!-- wp:cover {"url":"https://s.w.org/images/core/5.8/forest.jpg","dimRatio":60,"minHeight":800,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:800px"><span aria-hidden="true" class="has-background-dim-60 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="forest" src="https://s.w.org/images/core/5.8/forest.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"align":"wide","style":{"color":{"text":"#ffe074"},"typography":{"fontSize":"64px"}}} -->
<h2 class="alignwide has-text-color" style="color:#ffe074;font-size:64px">Forest.</h2>
<!-- /wp:heading -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"55%"} -->
<div class="wp-block-column" style="flex-basis:55%"><!-- wp:spacer {"height":"330px"} -->
<div style="height:330px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"style":{"color":{"text":"#ffe074"},"typography":{"lineHeight":"1.3","fontSize":"12px"}}} -->
<p class="has-text-color" style="color:#ffe074;font-size:12px;line-height:1.3"><em>Even a child knows how valuable the forest is.</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->
',

如果您的区块模板包含图片，您还需要使该图形具有可访问性。首先，将图片添加到主题文件夹中的 images 文件夹。然后，使用 get_theme_file_uri。

您还可以使用包装元素内的 className 属性为您的区块模板添加CSS类。在我们的示例中，那是 cover 区块。

因此，您的CSS将如下所示：

<!-- wp:cover {"className":"amazing-block-pattern", ...

请记住将"className"替换为您的CSS类。您还需要将此代码添加到包含类名的包装div中：

步骤3：选择或创建新的块模式类别

之前，我们简要讨论了类别元素。您需要选择WordPress的块模式类别之一或自行设计。

WordPress目前有以下类别：

相册
多列
按钮
文本
页眉
查询

如果您想使用新的块模式类别，您需要使用register_block_pattern_category辅助函数。它包括新类别的名称和块模式的标签：

if ( function_exists( 'register_block_pattern_category' ) ) {
    register_block_pattern_category(
      'custom',
      array( 'label' => __( 'Custom', 'text-domain' ) )
   );
}Code language: PHP (php)

注册后，您可以将此类别添加到块模式的类别行中。

如何移除和隐藏块模式

如果您想移除自定义块模式，可以使用带有布局前缀和缩略词的unregister_block_pattern函数。您还需要使用init钩子。它应该类似于以下内容：

unregister_block_pattern( 'prefix/amazing-block-pattern' );Code language: JavaScript (javascript)

您也可以隐藏块模式目录中的所有块模式。如果您不想在新主题中启用这些模板，此方法可能很有帮助。

您只需要使用should_load_remote_block_patterns过滤器，它看起来像这样：

add_filter( 'should_load_remote_block_patterns', '__return_false' );Code language: JavaScript (javascript)

👉 我们建议您咨询WordPress开发者资源以获取更多指导。在那里，您可以找到各种块模式开发的详细文档。

如何无需代码创建WordPress块模式

如果您不想通过代码方式创建块模式，您也可以安装诸如BlockMeister之类的插件。

BlockMeister允许您从编辑器中构建块模式。安装插件后，您可以选择一个或多个块，然后将它们保存为块模式，就像使用可重用块一样。

您还可以获得一个仪表板内界面来管理所有块模式并按类别组织它们。

返回顶部

结论 🏁

WordPress块模式是将各个块组合成统一模板的集合。您可以使用它们更快地设计您的文章和页面。此外，它们易于定制，您甚至可以创建和提交自己的布局。

ℹ️ 块模式对于主题和插件开发也很方便。您可以设计自己的模式，分配类别，并注册它们。总体而言，这些布局是便捷的设计和时间节省元素。

您对WordPress块模式有任何疑问吗？请在下面的评论部分告诉我们！

…

别忘了参加我们关于加速WordPress网站的速成课程。了解更多：

如何加速您的WordPress网站

通过一些简单的修复，您可以减少甚至50-80%的加载时间 🚀

通讯表单 – 侧边栏

名字 *

您的邮箱 *

立即订阅！

如果您是人类，请留空此字段。

通过在上方输入您的邮箱，即表示您订阅了我们的每周新闻简报。您可以随时更改您的决定。我们尊重您的收件箱和隐私。

原文链接：https://wpshout.com/wordpress-block-patterns/

标签

小狸科技

WordPress 区块模式：什么是区块模式以及如何使用它们

📚 目录：

WordPress 区块模式概述（以及为什么您可能考虑使用它们）

如何使用 WordPress 区块模式（三种方法）

1. 从区块模式目录复制和粘贴模式

2. 从块编辑器直接插入模式

3. 提交块模式

如何创建和注册新的块模式（适用于主题和插件开发）

第一步：注册您的块模式

步骤2：添加区块标记和CSS标记

如何移除和隐藏块模式

如何无需代码创建WordPress块模式

结论 🏁

留下评论取消回复

📚 目录：

WordPress 区块模式概述（以及为什么您可能考虑使用它们）

如何使用 WordPress 区块模式（三种方法）

1. 从区块模式目录复制和粘贴模式

2. 从块编辑器直接插入模式

3. 提交块模式

如何创建和注册新的块模式（适用于主题和插件开发）

第一步：注册您的块模式

步骤2：添加区块标记和CSS标记

如何移除和隐藏块模式

如何无需代码创建WordPress块模式

结论 🏁

相关文章

WordPress 中的 Blade 模板：使用 Kinsta 上的 Radicle 进行现代模板开发

使用 HTTP API 构建可靠的远程请求

WPBeginner 聚焦 20：WordPress 存储清理、更智能的预览和自动化更新

留下评论取消回复