各位观众老爷们，大家好！今天老衲就来给大家扒一扒WordPress里的“块模式”（Patterns）这玩意儿，看看它到底是个什么妖艳贱货，哦不，宝贝疙瘩，能让我们在WordPress里像搭积木一样玩转各种布局。
开场白：为啥要有块模式？
话说当年啊，没有块模式的时候，咱们想在不同页面或者文章里复用某个特定布局，那可真是个体力活！复制粘贴？改来改去？一不小心就改错地方了，简直是噩梦！
后来，WordPress的Gutenberg编辑器横空出世，带来了“块模式”这个神器。有了它，我们可以把常用的布局保存成一个模式，然后像调用函数一样，在任何地方重复使用。这就像是写了一段公共的CSS或者JavaScript，可以在多个地方引用，简直不要太爽！
什么是块模式？
简单来说，块模式就是一组预先配置好的块的集合，它们组合在一起形成一个特定的布局。你可以把这个布局保存成一个模式，然后在其他页面或文章中插入这个模式，从而快速创建相同的布局。
想象一下，你做了一个很漂亮的“联系我们”的块，包括联系方式、地图、表单等等，每次都重新做一个岂不是累死？把它保存成一个块模式，以后直接插入，岂不是美滋滋？
如何创建块模式？
创建块模式的方法其实很简单，分为两种：代码创建和编辑器创建。咱们先说说编辑器创建，毕竟图形界面更直观嘛。
-
编辑器创建：
- 在古腾堡编辑器中，先按照你想要的布局，把各个块排列好。比如，你可以创建一个包含标题、段落、图片的块的组合。
- 选中你想要保存为模式的所有块。注意！一定要全部选中！
- 在块编辑器的右上角，找到“选项”（三个点），点击它。
- 在下拉菜单中，选择“创建模式”。
- 给你的模式起个名字，最好是能让你一眼就认出来的名字。
- 可以选择是否将模式设置为“同步模式”（Synced pattern）。
- 同步模式： 修改同步模式，所有使用该模式的地方都会同步更新。适用于全局通用的布局，比如页脚、导航栏等。
- 非同步模式： 修改非同步模式，只会影响当前页面/文章，不会影响其他地方。适用于特定页面的布局，比如产品介绍、案例展示等。
- 点击“创建”按钮，OK！你的块模式就创建成功了！
-
代码创建：
如果你是个代码控，或者需要创建更复杂的块模式，那么代码创建就是你的不二之选。
-
注册块模式：
我们需要使用
register_block_pattern()函数来注册我们的块模式。这个函数接受一个数组作为参数，包含模式的各种信息。<?php function my_register_block_pattern() { if ( function_exists( 'register_block_pattern' ) ) { register_block_pattern( 'my-theme/my-custom-pattern', array( 'title' => __( 'My Custom Pattern', 'my-theme' ), 'categories' => array( 'text', 'banner' ), // 模式分类 'description' => __( 'A custom pattern with a title and paragraph.', 'my-theme' ), 'content' => '<!-- wp:heading --> <h2>My Awesome Title</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>This is a paragraph of text. You can add more content here.</p> <!-- /wp:paragraph -->', ) ); } } add_action( 'init', 'my_register_block_pattern' ); ?>register_block_pattern(): 注册块模式的核心函数。'my-theme/my-custom-pattern': 模式的唯一标识符，必须是唯一的，通常以主题或插件的名字开头。'title': 模式的标题，会在块编辑器中显示。'categories': 模式的分类，方便用户查找。WordPress自带了一些分类，比如text、media、buttons等，你也可以自定义分类。'description': 模式的描述，对模式的简单介绍。'content': 模式的内容，也就是块的HTML代码。注意！这里必须是符合Gutenberg格式的HTML代码，也就是以<!-- wp:block-name -->和<!-- /wp:block-name -->包裹的块代码。
-
关于
content属性：content属性是块模式的核心，它定义了模式的实际内容。你需要使用Gutenberg的块语法来编写这个属性。-
块的语法：
每个块都以
<!-- wp:block-name -->开始，以<!-- /wp:block-name -->结束。块的属性以JSON格式写在开始标签内。例如，一个段落块的语法如下：
<!-- wp:paragraph --> <p>This is a paragraph of text.</p> <!-- /wp:paragraph -->一个带属性的图像块的语法如下：
<!-- wp:image {"id":123,"sizeSlug":"large"} --> <figure class="wp-block-image size-large"><img src="path/to/your/image.jpg" alt=""></figure> <!-- /wp:image --> -
如何获取块的语法：
最简单的方法就是在编辑器中创建一个包含你想要的块的页面或文章，然后切换到“代码编辑器”模式，复制块的HTML代码即可。
-
-
注册块模式分类（可选）：
如果你想自定义块模式的分类，可以使用
register_block_pattern_category()函数。<?php function my_register_block_pattern_category() { if ( function_exists( 'register_block_pattern_category' ) { register_block_pattern_category( 'my-custom-category', array( 'label' => __( 'My Custom Category', 'my-theme' ) ) ); } } add_action( 'init', 'my_register_block_pattern_category' ); ?>register_block_pattern_category(): 注册块模式分类的函数。'my-custom-category': 分类的唯一标识符。'label': 分类的名称，会在块编辑器中显示。
-
将模式分类添加到模式中：
在注册块模式时，将分类的标识符添加到
categories数组中。<?php function my_register_block_pattern() { if ( function_exists( 'register_block_pattern' ) ) { register_block_pattern( 'my-theme/my-custom-pattern', array( 'title' => __( 'My Custom Pattern', 'my-theme' ), 'categories' => array( 'my-custom-category' ), // 添加自定义分类 'description' => __( 'A custom pattern with a title and paragraph.', 'my-theme' ), 'content' => '<!-- wp:heading --> <h2>My Awesome Title</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>This is a paragraph of text. You can add more content here.</p> <!-- /wp:paragraph -->', ) ); } } add_action( 'init', 'my_register_block_pattern' ); ?>
-
如何使用块模式？
创建好块模式之后，使用起来就非常简单了。
- 在古腾堡编辑器中，点击“添加块”按钮（那个加号）。
- 在块的搜索框中，输入你的块模式的名字，或者浏览“模式”选项卡。
- 找到你的块模式，点击它，OK！你的布局就插入到页面/文章中了。
代码示例：更复杂的块模式
咱们来看一个更复杂的例子，创建一个包含标题、段落、按钮的块模式。
<?php
function my_register_complex_pattern() {
if ( function_exists( 'register_block_pattern' ) ) {
register_block_pattern(
'my-theme/complex-pattern',
array(
'title' => __( 'Complex Pattern with Button', 'my-theme' ),
'categories' => array( 'buttons' ),
'description' => __( 'A pattern with a title, paragraph, and button.', 'my-theme' ),
'content' => '<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2>Learn More About Our Services</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>We offer a wide range of services to meet your needs. Contact us today to learn more!</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a href="#" class="wp-block-button__link">Contact Us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->',
)
);
}
}
add_action( 'init', 'my_register_complex_pattern' );
?>这个例子中，我们使用了group块来包裹其他的块，这样可以更好地控制布局。buttons块包含了button块，创建了一个按钮。
块模式的最佳实践
- 起个好名字： 好的名字能让你快速找到你想要的模式。
- 添加描述： 描述可以帮助你更好地理解模式的作用。
- 合理分类： 分类可以让你更方便地管理模式。
- 使用同步模式： 对于全局通用的布局，使用同步模式可以让你更方便地维护。
- 注意块的语法： 编写
content属性时，一定要注意块的语法，否则模式可能无法正常显示。 - 多用Group块： Group块可以用来组织其他的块，方便控制布局。
- 善用预定义的块： WordPress提供了很多预定义的块，可以满足你的大部分需求。
块模式的优势
- 提高效率： 快速创建重复的布局，节省时间和精力。
- 保持一致性： 确保网站的各个页面/文章风格一致。
- 易于维护： 修改同步模式，可以快速更新所有使用该模式的地方。
- 可复用性： 在不同的网站/项目中使用相同的模式。
- 降低出错率： 避免手动复制粘贴造成的错误。
块模式的局限性
- 学习成本： 需要了解Gutenberg编辑器的块语法。
- 复杂性： 对于复杂的布局，代码创建可能会比较繁琐。
- 依赖性： 块模式依赖于Gutenberg编辑器，如果编辑器发生变化，模式可能需要更新。
高级技巧
- 动态块模式： 可以使用PHP代码动态生成块模式的内容，实现更灵活的布局。
- 使用ACF（Advanced Custom Fields）： 可以使用ACF创建自定义字段，然后在块模式中使用这些字段，实现更强大的功能。
- 创建自己的块： 如果WordPress提供的块不能满足你的需求，可以创建自己的块。
表格总结
| 特性 | 描述 | 优点 | 缺点 |
|---|---|---|---|
| 定义 | 一组预先配置好的块的集合，组合在一起形成一个特定的布局。 | 提高效率，保持一致性，易于维护，可复用性，降低出错率。 | 学习成本，复杂性，依赖性。 |
| 创建方式 | 编辑器创建（图形界面，简单直观），代码创建（更灵活，可以创建更复杂的模式）。 | 编辑器创建：简单易用，适合初学者。代码创建：更灵活，可以实现更复杂的功能。 | 编辑器创建：功能有限。代码创建：需要一定的编程知识。 |
| 同步模式 | 修改同步模式，所有使用该模式的地方都会同步更新。 | 方便维护全局通用的布局。 | 修改会影响所有使用该模式的地方，需要谨慎操作。 |
| 非同步模式 | 修改非同步模式，只会影响当前页面/文章，不会影响其他地方。 | 适用于特定页面的布局，不会影响其他地方。 | 需要手动更新每个使用该模式的地方。 |
| 应用场景 | 各种重复使用的布局，例如：联系我们页面，产品介绍页面，页脚，导航栏等。 | 快速创建和维护网站的布局。 | 对于非常独特的布局，可能需要手动创建。 |
总结
块模式是WordPress Gutenberg编辑器的一大利器，它可以帮助我们快速创建和维护网站的布局，提高开发效率，保持风格一致。虽然有一定的学习成本，但是一旦掌握，将会大大提升你的WordPress开发能力。
好了，今天的讲座就到这里，希望对大家有所帮助！ 各位观众老爷们，下次再见！