块模式是主题作者可以使用的最强大的功能之一。WordPress 5.4中引入的模式让用户更容易从块编辑器中插入更复杂的布局，同时为设计者打开了一个充满可能性的世界。
从本质上讲，块模式就是一个或多个预先配置并呈现给最终用户的块。将它们视为可重用的块组。
它们是用户插入帖子和页面内容的理想起点，但在模板内部使用时也很有用。
用户可以从站点编辑器将其直接插入到模板中，或从Post Editor将其插入到其内容中：
与之相比模板零件这是可重用块组的一个类似功能，模式还允许您访问PHP。这意味着您可以国际化其中的文本，动态添加URL以包含图像等。
请注意，用户还可以从外观>编辑器>图案在admin中显示。您还可以使用此屏幕在开发安装中管理自己的模式：
在本节中，您将学习如何创建自定义块图案，在主题中注册它们，以及取消注册它们。您还将学习一些使用模式的有用提示、技巧和其他方法。
学习创建块图案的最简单方法是从在Post Editor中将几个块放在一起开始。这可以是您喜欢的任何内容，但出于本文的目的，下面共享的代码将是一个核心Cover块，其中嵌套了一些块，遵循以下结构：
试着自己重新创建它，尤其是当你刚刚习惯使用块编辑器时。您也可以根据自己的喜好进行自定义，但建议您在第一次创建模式时保持相对简单。
完成后，单击⋮（选项）图标，然后单击复制:
这将为您提供需要使用的代码，该代码应类似于：
<!-- wp:cover{“overlayColor”：“对比度”，“对齐”：“完整”}--><div class=“wp-block-cover alignfull”><span aria-hidden=“true”class=“wb-block-coor__background-has-contrast-background-color has-backgroud-dim-100 has-background-dim”></span><div class=“wp-block-cover__inner-container”><！--wp:group{“style”：{“space”：}“blockGap”：“2.5rem”}}，“layout”：{“type”：“constrained”，“wideSize”：“%”，“contentSize”:“75%”}}--><div class=“wp-block-group”><！--wp:heading{“textAlign”：“center”}--><h2 class=“wp-block-heading has-text-align-center”>欢迎访问我的网站</h2><!-- /wp:标题--><!-- wp:段落{“align”：“center”}--><p class=“has-text-align-center”>这是我远离家乡的小家。在这里，你会了解我。我会分享我的爱好、爱好和更多。有时，我甚至会在博客上发表一些有趣的文章</p>（第页）<!-- /wp：段落--><!-- wp:buttons{“layout”：{“type”：“flex”，“justifyContent”：”center“}}--><div class=“wp-block-buttons”><！--wp:button{“className”：“is-style-outline”}--><div class=“wp-block-button is-style-outline”>查看我的热门帖子→</a></div><!-- /wp:按钮--></div><!-- /wp:按钮--></div><!-- /wp:组--><!-- /wp：封面-->
在本文的其余部分中，您将使用相同的模式，学习如何注册、注销和进一步自定义它。
最好将大多数模式包装在Group、Cover或其他容器块（即允许嵌套块的块）中。这使得主题用户更容易在编辑器中移动整个模式。您还可以将CSS类添加到此外部块，以应用于整个模式的任何自定义样式。
在WordPress中注册块模式有两种方法：
- 通过将包含块标记的文件放置到
/图案文件夹。
- 通过手动调用
寄存器块模式（）功能。
最简单的路线是第一条。在接下来的部分中，您将学习如何同时完成这两项工作，但本手册将建议您使用/图案文件夹，但在某些边缘情况下除外。
使用/patterns目录注册模式
WordPress将识别放置在主题中的任何模式文件/图案文件夹，它将自动为您注册它，前提是它具有有效的模式文件头。
A类文件头是PHP注释的代码，在文件顶部有键+值对列表。WordPress解析此信息以收集元数据。在这种情况下，元数据用于注册块模式。
对于模式文件头，可以设置以下键：
标题:可以翻译的人类可读的标题。鼻塞:一个命名的slug，它是您的模式所特有的形式名称空间/模式名称.类别:模式所属类别的逗号分隔列表。描述:注册模式的详细描述。仅向屏幕阅读器显示。视口宽度:的宽度<iframe>预览图案时的视口（以像素为单位）。插入器:是否在插入器中显示图案。默认为真的.关键词:与搜索模式相关的关键字的逗号分隔列表。块类型:要与图案关联的块类型的逗号分隔列表。岗位类型:以逗号分隔的帖子类型列表，用于限制模式。默认为所有帖子类型。模板类型:模式所适用的模板类型的逗号分隔列表。
对于大多数模式，您至少应该添加标题,鼻塞、和类别领域。模式文件应如下所示：
<?php（电话）/***标题：英雄*Slug：主题lug/英雄*类别：特色*/?><!-- 此处显示模式代码。-->
现在，让我们将从上一节复制的代码添加到/模式/hero.php主题中的文件：
<?php（电话）/***标题：英雄*Slug：主题lug/英雄*类别：特色*/?><!-- wp:cover{“overlayColor”：“对比度”，“对齐”：“完整”}--><div class=“wp-block-cover alignfull”><span aria-hidden=“true”class=“wb-block-coor__background-has-contrast-background-color has-backgroud-dim-100 has-background-dim”></span><div class=“wp-block-cover__inner-container”><！--wp:group{“style”：{“space”：}“blockGap”：“2.5rem”}}，“layout”：{“type”：“constrained”，“wideSize”：“%”，“contentSize”:“75%”}}--><div class=“wp-block-group”><！--wp:heading{“textAlign”：“center”}--><h2 class=“wp-block-heading has-text-align-center”>欢迎访问我的网站</h2><!-- /wp:标题--><!-- wp:段落{“align”：“center”}--><p class=“have text align center”>这是我远离家乡的小家。在这里，你会了解我。我会分享我的爱好、爱好和更多。有时，我甚至会在博客上发表一些有趣的文章</p>（第页）<!-- /wp：段落--><!-- wp:buttons{“layout”：{“type”：“flex”，“justifyContent”：”center“}}--><div class=“wp-block-buttons”><！--wp:button{“className”：“is-style-outline”}--><div class=“wp-block-button is-style-outline”>查看我的热门帖子→</a></div><!-- /wp:按钮--></div><!-- /wp:按钮--><!-- /wp:组--><!-- /wp：封面-->
现在，如果你在WordPress中添加或编辑一篇新文章，你应该会在插入器中看到你的模式。单击模式选项卡并选择作为特色的:
您还应该能够看到下面列出的模式外观>编辑器>图案在WordPress管理员中。
使用PHP注册模式
而不是使用/图案文件夹来自动注册您的模式，您可以选择通过PHP手动注册它们。您可以混合和匹配这两种注册方法，但单个模式只能用一种方法注册。
要使用PHP注册块模式，必须使用寄存器块模式（）功能。其签名如下：
寄存器块模式（字符串$pattern_name，数组$pattern_properties)：布尔
该函数接受两个参数并返回真的或假，具体取决于模式是否已成功注册：
$图案名称:一个命名的slug，它是您的模式所特有的形式名称空间/模式名称.$pattern_properties（$模式属性）:
内容:图案的块标记。标题:可以翻译的可读标题。段塞:一个命名的slug，它是您的模式所特有的形式名称空间/模式名称.类别:模式所属的类别数组。描述:注册模式的详细描述。仅向屏幕阅读器显示。视图端口宽度:的宽度<iframe>预览图案时的视口（以像素为单位）。插入器:是否在插入器中显示图案。默认为真的.关键字:与搜索模式相关的关键字数组。块类型:要将图案与之关联的块类型数组。帖子类型:限制模式的帖子类型数组。默认为所有帖子类型。来源:注册模式的源。这应该设置为主题因为这个图案来自一个主题。模板类型:模式适用的模板类型数组。
通过PHP注册模式时，应该在初始化挂钩。现在尝试通过在中添加以下代码来注册您的自定义模式函数.php（请确保将自定义标记添加到内容属性）：
add_action（'init'，'themeslug_register_patterns'）；函数themeslug_register_patterns（）{register_block_pattern（'themeslug/hero'，数组(“title”=>__（“Hero”，“themeslug”），“categories”=>数组（“featured”），“source”=>“theme”，“内容”=>“<！--此处显示块模式。-->') );}
在构建主题时，模式不仅仅是用户可以添加到其内容中的块的可重用部分。这是一个很好的特性，但模式的真正威力是在主题的前端输出中直接使用它们。
您可以在模板或模板零件通过添加Pattern块标记并传递模式slug。
下面是调用现有“英雄”模式时模式块标记的外观：
<!-- wp:pattern{“slug”：“themeslug/hero”}/-->
这应该相对简单。你只需要知道段塞注册模式时的值。
现在尝试将其添加到主题的模板中，例如/模板/home.html或/模板/index.html标题下方。带有模式代码的模板应如下所示：
<!-- wp:template-part{“slug”：“header”}/--><!-- wp:pattern｛“slug”：“themeslug/hero”｝/--><!-- 其他一些块。/--><!-- wp:template-part{“slug”：“footer”}/-->
现在通过转到外观>编辑器>模板并选择将其添加到的模板：
有时需要注销块模式，以便它们不会出现在用户的插入器中。例如，您可能想删除一些核心WordPress模式，那些由父主题添加的模式（如果您正在构建子主题），或者那些由第三方插件添加的模式。
当您需要注销单个块模式时，您将使用unregister_block_pattern（）功能：
unregister_block_pattern（字符串$pattern_name）：bool
与注册模式时一样，您还需要在初始化挂钩。因为模式通常（但并不总是）以默认优先级注册10在初始化，您将希望使用更高的优先级，以便稍后运行代码。
通过将此代码添加到您的函数.php文件：
add_action（'init'，'themeslug_unregister_patterns'，999）；函数themeslug_unregister_patterms（）{unregister_block_pattern（'themeslug/hero'）；}
虽然您可以使用unregister_block_pattern（）要注销单个核心WordPress模式，您还可以通过删除对核心块图案功能。
要删除所有核心WordPress模式，请将此代码添加到主题函数.php文件：
add_action（'after_setup_theme'，'themeslug_move_core_patterns'）；函数themeslug_remove_core_patterns（）{remove_theme_support（“核心块模式”）；}
WordPress还自动从官方远程加载一些模式图案目录在有些情况下，你可能不想加载这些模式，例如它们与你的主题设计不匹配。您可能还想选择不在为客户端构建的站点上调用远程API。无论是什么情况，您都可以通过筛选应该_加载_移动_锁定_模式挂钩。
要禁用远程模式，请将此代码添加到函数.php文件：
添加过滤器（“should_load_remote_block_patterns”，“__return_false”）；
下面，您将找到各种提示、技巧和其他有用的功能，这些功能使块模式成为WordPress主题开发中强大而灵活的一部分。
模式中的国际化文本
块模式的主要用例之一是国际化文本（准备翻译）。例如，如果模板或模板部分中有文本，则国际化该文本的唯一方法是将其移动到一个模式中，在该模式中您可以完全访问PHP。
因为模式文件只是PHP，所以可以在WordPress中使用任何国际化函数。在下面的示例中，您将使用esc_html_e（）为了安全起见，可以避开文本，并为翻译人员做好准备。
尝试以“英雄”模式为例，用esc_html_e（）功能。您的模式文件应该如下所示：
<?php（电话）/***标题：英雄*Slug：主题lug/英雄*类别：特色*/?><!-- wp:cover｛“overlayColor”：“contrast”，“align”：“full”｝--><div class=“wp-block-cover alignfull”><span aria-hidden=“true”class=“wb-block-coor__background-has-contrast-background-color has-backgroud-dim-100 has-background-dim”></span><div class=“wp-block-cover__inner-container”><！--wp:group{“style”：{“space”：}“blockGap”：“2.5rem”}}，“layout”：{“type”：“constrained”，“wideSize”：“%”，“contentSize”:“75%”}}--><div class=“wp-block-group”><！--wp:heading{“textAlign”：“center”}--><h2 class=“wp-block-heading has-text-align-center”><？php esc_html_e（“欢迎访问我的网站”，“主题日志”）？></氢气><!-- /wp:标题--><!-- wp:段落{“align”：“center”}--><p class=“has-text-align-center”><？php esc_html_e（“这是我远离家乡的小家。在这里，你会了解我。我会分享我的喜好、爱好和更多。偶尔，我甚至会在博客帖子中说一些有趣的话。”，“themeslug”）？></p>（第页）<!-- /wp：段落--><!-- wp:buttons{“layout”：{“type”：“flex”，“justifyContent”：”center“}}--><div class=“wp-block-buttons”><！--wp:button{“className”：“is-style-outline”}--><div class=“wp块按钮是样式大纲”><a class=“wp-block-button_link wp元素按钮”><？php esc_html_e（'查看我的热门帖子→'，'主题塞'）？></a> </div><!-- /wp:按钮--></div><!-- /wp:按钮--><!-- /wp:组--><!-- /wp：封面-->
使用图像和其他资产
为图像和其他资产添加动态URL是模式的另一个重要功能。因为您可以访问PHP，所以可以使用以下函数获取主题文件uri（）例如，输出与主题捆绑的图像URL。
尝试将图像背景添加到“英雄”图案的封面块中。如果你需要一张图片，试着从WordPress上抓取一张照片目录（以下示例使用此尼泊尔夜景照片).
下载图像并将其保存到您的主题/资产/图像文件夹（或您选择的文件夹）并将其命名英雄背景.jpg.
然后在编辑器中打开图案并上传图像作为Cover块的背景，其应如下所示：
如前所述，复制组成图案的块。您会注意到，在模式代码中有两个图像URL实例。它将是一个硬编码的URL，类似于：
http://localhost/wp/wp-content/uploads/2023/10/hero-background.jpg
您需要更改这两个实例，以便它们指向位于主题中的图像/资产/图像文件夹。为此，您需要做两件事：
将硬编码图像URL更改为：
<?php echo esc_url（get_theme_file_uri（'assets/images/hero-background.jpg'））？>
您的最终模式代码应该是这样的（请注意，此示例包括上一节中解释的国际化文本）：
<?php（电话）/***标题：英雄*Slug：主题lug/英雄*类别：特色*/?><!-- wp:cover{“url”：“<？php-echo esc_url（get_theme_file_uri（'assets/images/hero-background.jpg'））？>”，“id”：3838，“dimRatio”：50，“overlayColor”：“contrast”，“align”：“full”}--><div class=“wp-block-cover alignfull”><span aria-hidden=“true”class=“wb-block-coor__background-color-has-background-dim”></span><img class=“wpblock-cover__image-backgrround wp-image-3838”alt=“”src=“”php-echo esc_url（get_theme_file_uri（'assets/images/hero-background.jpg'））？>“data-object-fit=“cover”/><div class=“wp-block-cover__inner-container”><！--wp:group{“style”：{“space”：}“blockGap”：“2.5rem”}}，“layout”：{“type”：“constrained”，“wideSize”：“%”，“contentSize”:“75%”}}--><div class=“wp-block-group”><！--wp:heading{“textAlign”：“center”}--><h2 class=“wp-block-heading has-text-align-center”><？php esc_html_e（“欢迎访问我的网站”，“主题日志”）？></氢气><!-- /wp:标题--><!-- wp:段落{“align”：“center”}--><p class=“has-text-align-center”><？php esc_html_e（“这是我远离家乡的小家。在这里，你会了解我。我会分享我的喜好、爱好和更多。偶尔，我甚至会在博客帖子中说一些有趣的话。”，“themeslug”）？></p>（第页）<!-- /wp：段落--><!-- wp:buttons｛“layout”：｛“type”：“flex”，“justifyContent”：“center”｝--><div class=“wp-block-buttons”><！--wp:button{“className”：“is-style-outline”}--><div class=“wp-block-button is-style-outline”><a class=“wb-block-bbutton __link wp-element-button”><？php esc_html_e（'查看我的热门帖子→'，'主题塞'）？></a> </div><!-- /wp:按钮--></div><！--/wp:按钮--><!-- /wp:组--><!-- /wp：封面-->
有条件地加载第三方块
有时，如果在用户的安装中注册了块，您可能只想使用它。这对于插件中可能包含的第三方块尤其如此。
需要注意的是，如果你添加了块标记，但没有安装，WordPress会提示用户安装块。这不会导致网站崩溃，因此可以避免使用本节中描述的方法。
但如果您希望隐藏未注册的块（或使用其他方法），可以有条件地检查块是否通过WP_Block_Type_Registry:：is_registered（）方法。
此示例代码显示了如何检查核心/段落块。如果已注册，它将输出块标记：
<?php if（WP_Block_Type_Registry:：get_instance（）->is_registered（'核心/段落'））：？><!-- 在此处添加块标记。--><?php-endif？>
通过在此条件检查中包装Paragraph块，尝试将此方法应用于之前注册的“hero”块。下面是模式代码的外观：
<?php（电话）/***标题：英雄*Slug：主题lug/英雄*类别：特色*/?><!-- wp:cover{“url”：“<？php-echo esc_url（get_theme_file_uri（'assets/images/hero-background.jpg'））？>”，“id”：3838，“dimRatio”：50，“overlayColor”：“contrast”，“align”：“full”}--><div class=“wp-block-cover alignfull”><span aria-hidden=“true”class=“wb-block-coor__background-color-has-background-dim”></span><img class=“wpblock-cover__image-backgrround wp-image-3838”alt=“”src=“”php-echo esc_url（get_theme_file_uri（'assets/images/hero-background.jpg'））？>“data-object-fit=“cover”/><div class=“wp-block-cover__inner-container”><！--wp:group{“style”：{“space”：}“blockGap”：“2.5rem”}}，“layout”：{“type”：“constrained”，“wideSize”：“%”，“contentSize”:“75%”}}--><div class=“wp-block-group”><！--wp:heading｛“textAlign”：“center”｝--><h2 class=“wp-block-heading has-text-align-center”><？php esc_html_e（“欢迎访问我的网站”，“主题日志”）？></氢气><!-- /wp:标题--><?php if（WP_Block_Type_Registry:：get_instance（）->is_registered（'核心/段落'））：？><!-- wp:段落{“align”：“center”}--><p class=“has-text-align-center”><？php esc_html_e（“这是我远离家乡的小家。在这里，你会了解我的。我会分享我的喜好、爱好等等。时不时，我甚至会在博客文章中说一些有趣的话。”，'themeslug'）？></p>（第页）<!-- /wp：段落--><?php-endif？><!-- wp:buttons{“layout”：{“type”：“flex”，“justifyContent”：”center“}}--><div class=“wp-block-buttons”><！--wp:button{“className”：“is-style-outline”}--><div class=“wp-block-button is-style-outline”><a class=“wb-block-bbutton __link wp-element-button”><？php esc_html_e（'查看我的热门帖子→'，'themeslug'）？></a> </div><!-- /wp:按钮--></div><!-- /wp:按钮--><!-- /wp:组--><!-- /wp：封面-->
当然，由于Paragraph块是由核心WordPress注册的，并且假设它还没有注销，那么Paragraphy块应该出现在编辑器和前端。这方面的主要用例是有条件地检查第三方块。
如果您需要有条件地注册整个模式，而不是简单地有条件地输出它的特定部分（如前一节所示），根据您喜欢如何注册模式，有两种方法可供选择。
在/patterns文件夹中有条件地注册模式
如果您使用了自动注册方法将图案放置在主题的/图案文件夹，没有真正的方法来有条件地注册它。在这种情况下，您必须取消注册该模式。
假设您只想使之前注册的英雄模式可用，如果核心/段落块被注册。在实际场景中，您可能正在检查第三方块核心/段落块仅用于此示例。
在您的函数.php文件以注销以前注册的图案：
add_action（'init'，'themeslug_unregister_patterns'，999）；函数themeslug_unregister_patterns（）{if（WP_Block_Type_Registry:：get_instance（）->is_registered（'core/pagment'））{unregister_block_pattern（'themeslug/hero'）；}}
如果通过PHP手动注册模式，只需将调用包装到寄存器块模式（）用你的条件检查。
使用与上面相同的示例，如果核心/段落块是通过将其添加到函数.php:
add_action（'init'，'themeslug_register_patterns'，999）；函数themeslug_register_patterns（）{if（WP_Block_Type_Registry:：get_instance（）->is_registered（'核心/段落'））{register_block_pattern（'themeslug/hero'，数组(“title”=>__（“Hero”，“themeslug”），“categories”=>数组（“featured”），“source”=>“theme”，“内容”=>“<！--此处显示块模式。-->') );}}
WordPress有几个默认注册的块模式类别：
特色关于音频（添加到WordPress 6.4中）横幅按钮行动要求柱接触页脚画廊收割台媒体文件夹帖子查询（使用帖子相反）服务团队证言文本视频（添加到WordPress 6.4中）
通常，最好为主题使用这些默认类别。这将保持用户习惯的一致UI。但有时您可能希望添加自己的类别，甚至删除已注册的类别。
在本文的这一节中，您将学习如何注册和注销自定义块模式类别。
要注册用于将一个或多个模式放入的自定义类别，必须使用寄存器块模式类别（）功能：
寄存器块模式类别（字符串$category_name，数组$category_properties)：布尔
该函数接受两个参数：
$类别名称:类别的唯一ID/段塞。这是一个很好的做法，以你的主题鼻涕为前缀。$category_properties（类别_属性）:用于定义有关类别的更多数据的属性数组：
标签:可翻译类别的可读标签/标题。描述:可以翻译的类别的描述。
尝试为主题添加新的自定义图案类别。将此代码添加到主题函数.php文件：
add_action（'init'，'themeslug_register_patter_categories'）；函数themeslug_register_pattern_categories（）{register_block_pattern_category（'themeslug/custom'，数组（'label'=>__（'主题名称：自定义'，'themeslug'），“description”=>__（“Theme Name的自定义模式”，“themeslug”）) );}
现在尝试添加主题插件/自定义类别到任何块图案：
<?php（电话）/***标题：英雄*Slug：主题lug/英雄*类别：特色、主题插件/自定义*/?><!-- 此处显示块标记。-->
该类别的任何注册图案现在都将出现在插入器和下面外观>编辑器>图案:
要注销已注册的模式类别，必须使用取消注册块模式类别（）功能：
unregister_block_pattern_category（字符串$category_name）：bool
该函数接受单个参数：
$类别名称:要注销的已注册类别的名称（即slug）。
尝试将此代码添加到您的函数.php以删除主题插件/自定义您在上一步中注册的类别：
add_action（'init'，'themeslug_unregister_pattern_categories'）；
函数themeslug_unregister_pattern_categories（）{
unregister_block_pattern_category（'themeslug/custom'）；
}
