WordPress块模式

自从引入块模式以来，WordPress 生态系统中对块模式的兴趣激增。

向 Gutenberg 添加块模式对 WordPress 用户非常有利。 这是因为您现在可以在设计网站时使用预制设计并根据自己的喜好进行调整。 与从头开始设计网站页面相比，这确实有助于节省时间。

在本文中，我们将研究这些块模式是什么，在哪里可以找到它们，如何使用它们，以及它们与可重用块的比较。

目录

什么是块模式

使用现有的块模式

块模式与可重用块

如何创建自己的块模式

• 手动方法
• 通过模式目录

如何创建自定义块模式插件

取消注册块模式

取消注册块模式类别

结论

什么是块模式

块模式是组合在一起以创建预先设计的布局的块的集合。

例如，想要设置号召性用语的 WordPress 用户可以通过在他们的页面中添加一些块来实现，例如标题、段落和按钮块。 然而，布置块以匹配您首选的设计布局可能并不容易，尤其是对于新手 WordPress 用户而言。 在这种情况下，块模式确实派上用场，因为 WordPress 用户只需添加号召性用语块模式。 然后，他们可以将块模式编辑为所需的视图。

使用现有的块模式

WordPress 集成了一个块编辑器 (Gutenberg)，它是经典编辑器的替代品。 在编辑器中，您可以轻松地将模式添加到您的页面或帖子中。 首先，您需要先单击块插入器。

单击它后，导航到下图所示的 Patterns 选项卡：

接下来，单击“探索”按钮

在呈现的弹出窗口中，您将拥有许多基于不同类别分组的模式。

为了在页面或帖子中插入模式，您只需单击它，然后它应该会在您的页面或帖子中呈现。

完成此操作后，您可以根据自己的喜好进一步自定义模式中的块。

您还可以从 wordpress.org 块模式目录中找到更多模式。

一旦找到您喜欢的图案，您只需在所需图案上出现鼠标悬停事件时单击显示的复制按钮即可复制它。

完成此操作后，您需要将模式粘贴到您的页面或帖子中。

块模式与可重用块

可重复使用的块是单个或多个块的集合，您稍后可以在帖子或页面中使用它们。

按照上面的定义，可重用块似乎与块模式非常相似，因为它们都涉及在帖子或页面中添加预制块。 但是，这两个项目之间存在差异。

当谈到可重用的块时，这些块与块模式相比不太灵活。 可重用块保留单个实例，无论它们应用在哪个页面或帖子中。 这意味着，如果您将可重用块添加到多个页面并决定在其中一个页面中自定义可重用块，则更改将应用​​于所有页面的可重用块的所有实例。

另一方面，对于块模式，一旦您将块模式添加到多个页面并在特定页面中对块模式进行一些自定义，则自定义不会应用于其余页面上的块模式。 因此，块模式实例是不同的。

与可重复使用的块不同，块模式也可以在您的主题或插件代码中注册。

如果您想使用将应用于多个页面或帖子的特定布局，那么块模式是理想的，然后他们可以在各个页面或帖子上自定义它们，以匹配相应页面或帖子的上下文。

另一方面，可重用块非常适合您想要在页面中复制和使用确切内容的场景。 例如，这可以在横幅广告中。

如何创建自己的块模式

您可以通过多种方式创建自己的块模式。 在本文中，我们将介绍其中两种方法：

• 手动方法
• 通过模式目录

手动方法

在这种方法中，我们需要首先在页面或帖子中创建块集合，然后将其注册为模式。

创建块集合

为了设置您的块集合，您需要执行以下操作：

i) 首先创建一个新页面或帖子

ii）添加您想要的块，以在帖子或页面中形成图案或布局。 在我们的例子中，我们将添加一个媒体和文本块以及一个按钮块和一些样式。

下面是块的示例显示：

注册块模式

为了将块集合注册为块模式，您需要执行以下操作：

i) 在您拥有块集合的页面或帖子中，切换到代码编辑器：

ii) 复制所有呈现的代码并将它们粘贴到所需的文本编辑器中，例如记事本或 Sublime Text：

iii) 接下来，将以下代码添加到您的子主题中的 functions.php 文件中：

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );

您需要将“在此处填写您复制的代码”的内容替换为上面（ii）中复制的代码。

以下是我们最终代码的示例：

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );

完成此操作后，您可以访问您的页面或帖子，并在导航到模式部分后，您将在“精选”部分看到新模式，如下图所示：

注册模式类别

WordPress 提供了一些默认模式类别，您可以在注册模式时使用它们。 其中包括：按钮、列、图库、标题、文本、查询和精选。

在注册块模式时，更好的方法是在自定义类别中注册模式。 为了实现这一点，您需要首先注册一个模式类别。

为了注册模式类别，您需要在子主题的 functions.php 文件中添加以下代码。

 function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );

您可以将类别标签更改为您的偏好。 在上面的代码示例中，我们使用了类别标签“自定义”。

为了使自定义模式类别显示在您的页面或帖子上，您需要将其与模式相关联。 在本例中，我们将更改原始模式注册代码以适应此模式类别。 为此，请搜索以下代码行：

 'categories' => array( 'featured' ),

然后，您需要将“特色”类别更改为“自定义”类别，以便代码现在读取为：

 'categories' => array( 'custom' ),

在我们的案例中注册模式和模式类别的最终代码将如下所示：

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

一旦您现在访问您的页面或帖子并尝试向其中添加模式，该模式将呈现在我们新注册的“自定义”类别中，如下所示：

通过模式目录

如果您想创建 WordPress 生态系统中的每个人都可以访问的模式，您现在可以从 Patterns Directory 中实现这一点。

访问模式目录后，您需要执行以下操作：

i) 登录到模式目录。

ii) 单击“创建新模式”链接。

iii) 在下一个屏幕上，添加您的模式标题并开始添加您想要的块。 您需要至少添加三个块。

iv) 完成块添加后，您可以将模式保存为草稿。

v) 接下来，验证您的模式不违反此处列出的准则：模式准则。 如果一切正常，那么您可以提交模式。

您可以通过单击此处所示的“我的模式”链接来查看已有的模式：

“我的模式”部分中呈现的模式是草稿、您已提交的模式和等待审核的模式。

vi) 然后您可以复制新块并将其粘贴到您的页面或帖子中。

如何创建自定义块模式插件

您可以选择使用自定义插件来添加模式和模式类别，而不是在您的 functions.php 文件中注册您的模式和类别的代码。 为此，您需要执行以下操作：

i) 通过您的主机面板或使用 Filezilla 等 FTP 软件通过 FTP 访问您的网站文件

ii) 导航到 wp-content > plugins 目录路径

iii) 在插件目录中，创建一个名为“custom-patterns”的文件夹

iv) 在文件夹中，创建一个名为 custom-patterns.php 的文件

v) 在文件中添加以下标题注释：

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */

您可以自定义上面的标题注释以匹配您所需的插件命名。

vi) 在标题注释下方，添加您的代码以注册模式和类别。 在我们这里的例子中，我们将使用我们之前创建的代码来注册我们的模式和自定义类别。 因此，最终代码将是：

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

vii) 在仪表板的插件列表中，您现在应该可以从插件列表中查看插件。 单击插件名称旁边的激活链接以激活插件

viii）一旦激活，您现在应该可以在块编辑器中看到块模式和自定义类别，如下所示：

取消注册块模式

可以删除您注册的块模式。 例如，如果您希望删除我们之前注册的“my-plugin/media-text-pattern”块模式，则需要在子主题的 functions.php 文件中添加以下代码：

 function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );

在上面的代码中，您需要将“my-plugin/media-text-pattern”替换为您注册的模式的名称。

取消注册块模式类别

如果您只想取消注册模式类别并保留模式本身，则需要在子主题的 functions.php 文件中添加以下代码：

 function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');

上面的代码取消注册我们之前添加的“自定义”类别。 您需要将“custom”替换为您注册的类别。

结论

在本文中，我们研究了什么是块模式、如何使用它们，以及注册和取消注册块模式和类别。 使用块编辑器设计网站时，块模式非常关键。 它们可以轻松地在您的网站中设计动态页面和帖子。

我们确实希望本文能提供有关如何在您的网站中使用块模式的相关见解。 如果您有任何问题或意见，请随时在下面的评论部分提交。