如何开发和构建WordPress区块样板

WBOLT_COM 6 月 10, 2023 1.2k+ 0

WordPress是一个强大的在线发布工具，允许任何人轻松地创建和分享文本和/或多媒体内容。但除此之外，它也是一个伟大的专业工具，适用于设计师、营销人员和开发人员，无论其背景和技能如何。

简而言之，WordPress可以成为你最有价值的工作同事，并帮助你在各种专业领域取得成功。

考虑到这一点，我们在这个博客上发表了一系列文章，以帮助你获得成为一个WordPress开发者所需的技能：

是的，你可以用Gutenberg开发技能提升你的职业预期，但你不一定需要成为一名开发人员来为你的WordPress网站创建高级布局。

WordPress用户可以利用强大的功能，让他们轻松地创建高级区块布局，而不需要任何麻烦。在这篇文章中，我们将把注意力放在区块样板上。

区块样板 vs. 可重复使用区块 vs. 与模板部件
如何创建区块样板
删除支持、取消注册和隐藏区块样板
用样板创建器构建和分享区块样板

区块样板 vs. 可重复使用区块 vs. 与模板部件

区块样板是在WordPress 5.5中首次引入的，允许WordPress用户只需点击几下，就可以把复杂的即用型嵌套区块结构纳入他们的内容。

开箱后，WordPress提供了一些内置的区块样板，供你在创建内容时选择。此外，区块主题通常提供更多的区块样板，你可以直接从区块插入器添加到你的内容中。

例如，目前的默认主题Twenty Twenty-Three就提供了以下的区块样板：

特色
文章
文本
图库
Call to action
Banner
页眉
页脚
引语

你并不局限于WordPress或你的主题所提供的样板，因为样板目录提供了大量现成的区块样板。

但是，区块样板并不是你可以利用的唯一功能，在你的WordPress网站上创建区块布局。新的Gutenberg区块编辑器提供了额外的工具供你选择，以创建你的内容布局，包括可重用区块和模板部件。这些功能之间有什么不同？什么时候更喜欢其中一个？让我们深入了解一下。

区块样板
可重用区块
模板部件
区块样板、可重用区块和模板部件之间的区别

区块样板

区块样板是预定义的区块组，你可以将其添加到你的内容中，并使用相同的设计工具对所包含的区块进行定制。对区块样板所做的改变只会影响你正在编辑的特定实例，而不会应用于你可能已经添加到你网站的其他文章或页面的任何其他实例。

你可以使用区块样板来包括你需要定制的预建布局，改变图像、文本、样式，或添加/删除元素。

区块样板是可重复使用的，这意味着一旦你创建了你的自定义区块样板，你可以把它添加到你网站的任何地方，并使用编辑器的内置控件，只需点击几下就可以定制它。

区块插入器中的样板面板

你可以在编辑器的区块插入器中的样板选项卡中浏览和插入区块样板，或者在区块插入-样板中点击探索所有样板按钮时，通过样板目录中的样板探索来探索可用的样板。

探索WordPress样板目录中的样板

你会在区块插入器的样板标签中发现大量的样板，或者直接从编辑器的界面中探索区块样板库。你也可以访问区块样板网站，选择一个样板，然后点击复制。

在样板库中挑选一个样板

一旦你复制了一个样板，把它粘贴到你的内容中，你就完成了。

将区块样板添加到你的内容中是快速和简单的

现在你可以自定义样板中包含的区块组，而不影响注册的样板或你网站上的任何额外实例。

可重用区块

可重用区块是一个预先构建的区块或区块组，你可以将其添加到你网站的任何文章或页面。你也可以将可重用区块导出到其他网站。

可重复使用的区块对于建立你可能想在你的网站的几个页面和/或不同网站上包含的元素特别有用。想想看，CTA、促销Banner、价格表，等等。

在下面的例子中，我们从一个栏目区块、一个图片、一个段落和一个按钮创建一个可重复使用的区块。

创建可重用区块

一旦你创建了一个可重复使用的区块，你可以从区块插入器中把它添加到你网站的任何页面。

区块插入器中的可重用区块

WordPress认为可重复使用的区块是 wp_block 文章类型，因此，将它们存储在 wp_posts 表中。

在区块设置菜单中管理可重复使用的区块

一旦你创建了你的可重用区块，你就可以从可重用区块管理界面来管理它们。你可以通过几种方式进入该页面：

将/wp-admin/edit.php?post_type=wp_block添加到您网站的WordPress URL中。
点击区块插入器中的管理可重用区块按钮。
点击区块设置下拉菜单中的 “管理可重用区块” 按钮。

可重复使用的区块管理屏幕

在那里，你可以

编辑、移除或将你的块导出为JSON、
从JSON中导入可重用区块、
创建新的可重用区块。

对一个可重用区块的所有修改都将应用于整个网站上该区块的每一次出现，不管是在哪个管理页面进行修改。

如果你大量使用可重用区块，不要错过J. B. Audras的这个伟大的插件。

模板部件

在Gutenberg时代之前，WordPress的主题和模板主要是用PHP构建的。对子主题、模板层次结构和主要的前端开发语言的扎实知识是创建或定制模板的基本要求。但随着区块主题的引入，情况发生了变化。

在选择了这个功能的区块主题和经典主题中，你可以在网站编辑器界面上轻松地创建或定制模板或模板部分。不需要任何开发技能，当然，除非你决定成为一个主题开发者。

一个区块模板是一个区块项目的列表。区块项目的例子是网站标题、标志和导航。

模板部件是一个页面的特定部分，可以在几个地方可视化，如页眉和页脚，并可以显示在你的WordPress网站的每一页上。

你可以通过网站编辑器界面创建和编辑模板部分，在那里你可以使用所有可用于区块的编辑工具。

创建新的模板部件

但与区块样板和可重复使用的区块不同，模板部件是为网站中不经常变化的区域准备的。

在Twenty Twenty-Three主题中编辑页脚模板部件

区块样板、可重用区块和模板部件之间的区别

总结一下，以下是三者之间的主要区别：

区块样板

区块样板是预定义的区块布局，你可以将其添加到你的内容中，并使用与所含区块相同的工具进行定制。对一个区块样板所做的改变将只影响该区块样板的单一实例。
你可以从样板目录中复制和粘贴区块样板。
你可以创建新的样板，并在样板目录中发布它们。

可重用区块

可重复使用的区块是一组区块，你可以在你网站的任何文章或页面上使用。对一个可重用区块所做的所有修改都将应用于整个网站上该块的每一次出现，不管是在哪个管理页面做的修改。
可重用区块作为 wp_block 文章类型存储在 wp_posts 表中。
你可以从其他网站导入和导出可重复使用的区块。

模板部件

模板部件是一个页面的特定区域，可以显示在多个位置，包括页眉、页脚和侧边栏，在你的WordPress网站的几个页面上重复出现。
你可以通过网站编辑器界面创建和编辑模板部分。
模板部分是为网站中不经常变化的区域准备的。

如何创建区块样板

伴随着区块样板功能，WordPress 5.5为开发者引入了一个新的API，以 “创建预先设计的内容区块，可以很容易地插入到文章、页面、自定义文章类型和模板”。新的API提供了 register_block_pattern 和 register_block_pattern_category 函数来注册区块样板和样板类别。

从WordPress 6.0开始，你也可以用一个PHP文件来注册区块样板。

所以，在写这篇文章的时候，你有两种方法来创建一个区块样板。

使用 register_block_pattern 辅助函数、
在你的主题中的pattern文件夹中添加一个PHP文件。

使用插件创建区块样板

第一种方法主要是为WordPress的开发者准备的，但也足够简单，非高级的开发者也可以使用。

如果你决定采用第一种方法，你可以在插件的PHP文件中或在你的主题的functions.php中使用两个新的函数 register_block_pattern 和 register_block_pattern_category 来创建一个区块样板。

选择或注册一个样板类别

首先，你可能想为你的样板选择一个类别。随着WordPress 6.2，新的样板类别已经被添加，一些现有的类别已经被修改。在写这篇文章的时候，你可以使用以下内置类别：

热门(featured)
文章(posts)
文本(text)
画廊(gallery)
CTA (call-to-action)
横幅(banner)
页眉(header)
页脚(footer)
团队(team)
Testimonials (testimonials)
服务(services)
作品集(portfolio)
多媒体(media)

WordPress 6.2中可用的样板类别的完整列表

如果你的区块样板不属于任何默认的类别，你也可以使用 register_block_pattern_category 函数来注册一个新的类别。

这个函数接受两个参数：

$category_name: 样板类别名称，包括命名空间。
$category_properties: 一个类别属性的数组。

一个例子将帮助你更好地理解如何注册一个新的样板类别：

if ( function_exists( 'register_block_pattern_category' ) ) {
function my_plugin_register_pattern_category() {
register_block_pattern_category( 
'my-pattern-category', 
array(
'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
)
);
}
add_action( 'init', 'my_plugin_register_pattern_category' );
}

注册一个区块样板

一旦样板类型被注册，下一步就是注册区块样板本身。你将使用 register_block_pattern 辅助函数来注册区块样板，如下所示：

function my_plugin_register_block_pattern() {
register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );

这个函数需要两个参数：

$pattern_name: 一个机器可读的名字，其形式为 namespace/pattern-name 。
$pattern_properties: 该样板的属性数组。

下面是当前可用的样板属性的列表：

title (要求): 一个可供人类阅读的样板标题。
content (要求): 该样板的HTML标记。
description: 插入器中描述样板的文本。描述是可选的，但建议使用，因为它有助于用户找到该样板。
categories: 一个或多个已注册的样板类别的数组。你必须先注册一个类别，然后才能在这里使用它（见前面的章节）。
keywords: 一个帮助用户找到样板的关键字数组。
viewportWidth: 一个整数，指定预览中样板的宽度。
blockTypes: 一个可选的、将与样板一起使用的区块类型数组。
postTypes: 允许使用该样板的文章类型的数组。
templateTypes: 一个模板类型的数组，该样板在这里是有意义的（从WordPress 6.2开始可用）。
inserter: 一个布尔值，用于确定该样板是否应该在区块插入器中可见。将该值设置为 false 以隐藏该样板。默认情况下，所有样板都会出现在区块插入器中。

下面是 register_block_pattern 的一个使用例子：

if ( function_exists( 'register_block_pattern' ) ) {
function my_plugin_register_block_pattern() {
register_block_pattern( 
'my-plugin/my-block-pattern', 
array(
'title'			=> _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
'categories'	=> array( 'my-pattern-category' ),
'postTypes'		=> array( 'post' ),
'content'		=> '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
) 
);
}
add_action( 'init', 'my_plugin_register_block_pattern' );
}

在这段代码中，我们使用了 postTypes 属性，使该样板仅适用于普通博客文章。你也可以为 postTypes 设置一个不同的值，使其对不同的文章类型可用。如果你有一个 product 文章类型，并决定使该样板只适用于该文章类型，你要写：

'postTypes' => array( 'product' ),

现在创建一个新的文章（或自定义文章类型），打开区块插入器，并点击样板标签。你应该发现一个新的样板类别（My Pattern Category），其中有你的自定义区块样板。请自由发挥样板属性，以定制你的区块样板。

现在让我们再深入一点，尝试建立一个真实世界的区块样板。

一个现实世界中的区块样板的例子

假设你想建立一个包括标题、图片、段落和按钮的区块样板。

在编辑器中，为你的区块样板创建布局，然后切换到代码编辑器并复制标记。

一个区块布局的例子

在我们的例子中，我们有以下代码：

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">专注于WordPress主题和插件开发</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>闪电博是国内一家优秀的原创主题和插件开发商，同时提供实用的WordPress站长在线小工具及分享优质WordPress教程资源等。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>查看详情</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

你现在可以优化这段代码。如果你是用一个插件来注册区块样板，你必须改变图片的URL，如下：

esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

这样，WordPress就不会在上传文件中寻找图片，而是在你的插件的图像文件夹中寻找。

然后你可以使用 viewportWidth 属性，在区块插入器中提供一个更好的样板预览：

'viewportWidth' => 800,

在区块插入器中为博客文章添加自定义区块样板

你还可以包括一个关键词阵列，以帮助用户找到你的区块样板：

'keywords' => array( 'cta', 'demo', 'wbolt' ),

添加关键词以帮助用户找到你的区块样板

另一个帮助用户在搜索中找到区块的选项是添加区块类型阵列：

'blockTypes' => array( 'core/button' ),

这样，当用户搜索指定的区块之一时，该区块样板将出现在建议中。

postTypes 属性允许你使区块样板只对特定的文章类型可用。例如，你可以让该样板只对 product 文章类型可见：

'postTypes' => array( 'product' ),

最后，你可以给你的区块样板的封装器添加一个CSS类。

要做到这一点，你需要创建一个带有 className 属性的新组：

<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
<!-- Your blocks -->
</div>
<!-- /wp:group -->

注意，你需要在下面的 div 元素中添加相同的类名。

要想更仔细地了解区块样板和更多的代码例子，也请看WordPress.org主题手册中的区块样板。

用一个文件创建一个区块样板

如上所述，WordPress 6.0引入了一种新的、更容易的方法来向你的WordPress主题添加区块样板。现在你可以通过在主题根目录下的/patterns文件夹中声明它们为PHP文件来隐式注册区块样板。

假设你想在你的区块主题中隐式注册上一节中构建的相同的区块样板。在这个例子中，我们将使用Twenty Twenty-Three主题。

你可以设置与上一方法相同的参数，但在文件头的注释中包含这些参数。此外，你不使用camel字母大小写的参数名，而是用空格隔开，你不使用数组，而是使用逗号分隔的列表项。

首先，停用你在前面的例子中用来注册样板的插件。然后创建一个新的my-block-pattern.php文件，并包括以下标题：

<?php
/**
* Title: My awesome pattern
* Slug: twentytwentythree/my-block-pattern
* Post Types: post
* Categories: featured, banner
* Viewport Width: 800
* Keywords: Call to action, wbolt
* Block Types: core/buttons
*/
?>

接下来，你将把内容添加到你的区块样板中。你可以使用与我们之前的例子相同的标记，但首先，你需要对其进行一些修改：

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">专注于WordPress主题和插件开发</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>闪电博是国内一家优秀的原创主题和插件开发商，同时提供实用的WordPress站长在线小工具及分享优质WordPress教程资源等。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( '查看详情', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

该标记与之前的例子基本没有变化。我们只做了两个改动。

占位图片的URL现在由 get_theme_file_uri 函数生成：

<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>

当然，你首先应该把placeholder.jpg图片放在你主题的/assets/images文件夹中。

下面的指令生成了你要翻译的文本。

<?php echo __( 'View plans', 'text-domain' ); ?>

现在保存你的文件并创建一个新的文章。你的区块样板应该出现在Featured和Banners类别中。

✍️ 注意，你添加到样板中的PHP代码只有在样板被添加到你的内容中时才会执行。一旦放在文章中，区块样板的行为就像静态区块一样。

删除支持、取消注册和隐藏区块样板

在某些情况下，你可能想对区块样板进行特殊操作。例如，你可能想用你自己的区块样板替换一个核心区块样板，或者在某些条件下取消注册一个类别。下面是你可以执行的操作。

1. 移除对所有核心区块样板的支持

首先，主题开发者可以移除对核心区块样板的支持，并提供他们自己的一套样板。要移除对核心样板的支持，你可以这样使用 remove_theme_support 函数：

remove_theme_support( 'core-block-patterns' );

建议将 remove_theme_support 函数添加到 after_setup_theme 钩子中。

2. 取消注册单个区块样板

如果你想提供一个自定义的替代方案，或者你不希望它被用于你的主题，你也可以取消注册一个特定的区块样板。

样板API为此提供了 unregister_block_pattern 函数：

function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

如果你也能取消对核心区块样板的注册，你将使用以下方法：

function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

你将在 init 钩子中使用 unregister_block_pattern 。

3. 取消注册一个区块样板类别

你也可以取消注册一个样板类别，把 unregister_block_pattern_category 函数挂到 init 钩子上：

function my_theme_unregister_block_pattern_categories() {
unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

你还可以创建你的样板，并通过一个免费的在线工具与社区分享它们：样板创建器。

如果你有一个WordPress.org账户，你可以从样板目录中访问样板创建器。

WordPress.org样板目录