1. Home
  2. »
  3. WordPress
  4. »
  5. 如何为您的 WordPress 网站选择完美的配色方案

新手指南:如何使用 WordPress 区块模式

搭建 WordPress 网站从未如此简单,而模块模式正是其中的关键所在。当我们最初发现它们时,就意识到它们能够显著提升我们的工作效率。

我们现在使用可重复使用的模块模式,例如用于 CTA 和优惠券按钮的模块——它们已成为我们创建内容的重要方式。

模块化图案让您无需编码或网页设计技能即可轻松获得专业外观的设计。

它们是预先构建好的模块组合,您可以快速插入和自定义,让您事半功倍,而无需每次都从头开始。

无论您是正在构建您的第一个 WordPress 网站,还是想要提高工作效率,本入门指南都将向您展示如何查找、使用和创建区块模式,从而在每个项目中节省时间。

新手指南:如何使用 WordPress 区块模式 how-to-use-wordpress-block-patterns-in-post20251114_ -1

什么是 WordPress 区块模式?

WordPress区块模式是预先设计好的区块集合,可以帮助您快速高效地创建自定义布局。在时间紧迫的情况下构建页面时,它们彻底改变了我们的工作方式。

WordPress 的区块编辑器直观易用,用户可以使用它设计美观的内容区块布局。这些区块包括文本、图片、按钮和其他元素,您可以根据需要进行排列组合。

新手指南:如何使用 WordPress 区块模式 wp-block-editor-120251114_ -1

然而,并非所有用户都有时间和设计技能每次都从零开始创建布局。我们自己也面临过这种挑战,因此,模块化布局模式在我们的工作流程中扮演着如此重要的角色。

区块样式提供了一种简便的解决方案。WordPress 默认包含多种预置样式,让您在几秒钟内即可轻松添加专业美观的布局。

新手指南:如何使用 WordPress 区块模式 patterns-block-editor20251114_ -2

流行的 WordPress 主题通常都包含自己的自定义模板。这些模板可以提供现成的设计,并根据您的主题进行定制,从而节省更多时间。

模式可以包括多列布局、媒体和文本组合、行动号召部分、标题和自定义按钮等。这种灵活性使它们适用于各种内容类型。

您还可以在 WordPress.org 网站上找到更多模块样式。如果您喜欢设计,甚至可以创建自己的样式并与 WordPress 社区分享。

接下来,我们将向您展示如何在 WordPress 中使用区块模式来创建令人惊艳的网站布局。

如何在 WordPress 中使用区块模式

WordPress 默认自带一些实用的区块样式,您可以在网站上使用。您的 WordPress 主题和一些插件也可能添加它们自己的样式。

要使用区块模式,您需要编辑要使用区块模式的WordPress文章或页面。

在文章编辑界面,点击“添加模块 [+]”按钮打开模块插入器。然后,切换到“图案”选项卡查看可用的模块图案。

新手指南:如何使用 WordPress 区块模式 block-patterns-post-editor20251114_ -3

您可以向下滚动查看可用的图案。

您还可以查看不同类别的块模式,例如特色块、按钮块、列块、标题块等等。

或者,您也可以点击“探索所有图案”按钮来查看方块图案。

在这里,您可以在弹出窗口中查看更大的预览图。

新手指南:如何使用 WordPress 区块模式 explore-all-patterns20251114_ -4

找到想要尝试的图案后,只需点击即可将其插入到帖子或页面的内容区域中。

该模式将出现在内容编辑器中,其中包含占位符内容,您可以编辑并替换为您自己的内容。

新手指南:如何使用 WordPress 区块模式 edit-block-pattern20251114_ -5

只需点击图案内的任何方块,即可编辑并根据您的要求更改其内容。

您仍然可以像往常一样对每个模块进行所有设置。例如,如果是封面模块,您可以更改封面颜色或背景图片

您可以根据需要为博客文章或页面添加任意数量的图案。您也可以像删除任何 WordPress 区块一样,删除图案以将其从文章或页面中移除。

新手指南:如何使用 WordPress 区块模式 remove-cover20251114_ -6

使用模块模式,您可以快速为您的文章和WordPress 网站创建漂亮的布局。

最终,块模式可以帮助您节省时间,否则每次需要添加标题、图库、按钮等时,您都需要手动排列块。

如何在块编辑器中创建图案

WordPress 让在区块编辑器中创建可重复使用的模式变得非常简单。

编辑帖子或页面时,只需选择要包含在图案中的模块,然后点击“创建图案”即可。

新手指南:如何使用 WordPress 区块模式 create-pattern-block-editor20251114_ -7

按住键盘上的Shift键并单击,即可选择多个方块。

但是,如果您的模块排列方式导致难以选择,您可以使用“文档概览”选项卡下的“列表视图”。

新手指南:如何使用 WordPress 区块模式 create-new-pattern-listview20251114_ -8

创建图案时会弹出窗口。

您需要为您的图案命名并选择一个类别。

新手指南:如何使用 WordPress 区块模式 pattern-name-categories20251114_ -9

下方会有一个切换开关,用于保持图案同步或不同步。

同步模式:当您或其他用户编辑模式时,这些更改将在下次使用该模式时保存。

未同步模式:将这些模式插入到文章或页面后所做的更改不会影响原始模式。

点击“创建”按钮保存您的图案。

下次你想使用该图案时,只需在块插入器中查找它的名称或类别即可。

新手指南:如何使用 WordPress 区块模式 reuse-custom-pattern20251114_ -10

如何在网站编辑器中创建模式

如果您使用的是具有完整站点编辑器支持的区块主题,那么您也可以在站点编辑器中创建图案。

访问“外观”»“编辑器”页面,打开网站编辑器。

您现在将进入网站编辑器界面。

新手指南:如何使用 WordPress 区块模式 siteeditor-patterns20251114_ -11

点击左侧边栏的“图案”继续。

您将看到所有可用的图案和类别。

要创建新图案,请点击“添加 [+]”按钮,然后选择“创建图案”。

新手指南:如何使用 WordPress 区块模式 create-patter-fse20251114_ -12

这将弹出一个窗口,您需要在其中为您的图案命名,选择一个类别,并决定是否要同步或不同步该图案。

点击“创建”继续。

新手指南:如何使用 WordPress 区块模式 pattern-settings-fse20251114_ -13

WordPress 会为你创建一个空白画布,供你创建自己的图案。

在这里,您可以添加模块来设计您的图案。

新手指南:如何使用 WordPress 区块模式 design-pattern-fse20251114_ -14

完成后,别忘了点击“保存”按钮保存你的图案。

WordPress中的模式管理

如果您使用的是具有完整站点编辑器支持的区块主题,那么您可以在站点编辑器中管理图案。

访问“外观”»“编辑器”页面,打开网站编辑器。

新手指南:如何使用 WordPress 区块模式 siteeditor-patterns20251114_ -11

在“图案”屏幕上,您可以点击图案进行编辑。您还可以点击图案旁边的三点菜单来复制、导出或删除图案。

要管理所有图案,请点击侧边栏中的“管理我的所有图案”选项卡。

新手指南:如何使用 WordPress 区块模式 manage-patterns-fse20251114_ -15

这将显示您所有图案的列表。现在,您可以编辑、导出或删除它们。

如果您使用的是经典主题(不支持完整站点编辑器的 WordPress 主题),则可以通过访问“外观”»“图案”页面来管理图案。

新手指南:如何使用 WordPress 区块模式 manage-patterns-classic-listview20251114_ -16

在这里,您可以添加、删除和导出您的模块图案。

请注意,即使是像Hestia这样的一些经典主题,现在也像全站编辑主题一样管理模式,而其他主题仍然使用下面屏幕截图中显示的旧界面。

所以,如何管理区块模式实际上取决于你使用的主题。

新手指南:如何使用 WordPress 区块模式 patterns-classic-themes20251114_ -17

寻找更多可在网站上使用的模块图案

WordPress 默认自带一些常用的区块样式。WordPress 主题也可能会向你的网站添加它们自己的样式。

但是,您可以找到比网站上的模块插入器提供的模块图案多得多的模块图案。

只需访问WordPress Patterns Directory网站即可查看更多模块模式。

新手指南:如何使用 WordPress 区块模式 block-patterns-directory20251114_ -18

在这里,您可以找到 WordPress 社区提交的区块样式。

要使用这些图案,只需点击查看图案,然后点击“复制图案”按钮即可。

新手指南:如何使用 WordPress 区块模式 copypattern20251114_ -19

接下来,您需要返回您的WordPress 博客,并编辑您想要插入此区块图案的文章或页面。

在编辑屏幕上,只需右键单击,然后在浏览器菜单中选择“粘贴”,或者按 CTRL+V(Mac 上为 Command + V)。

新手指南:如何使用 WordPress 区块模式 paste-pattern20251114_ -20

如何创建和分享您的积木图案

想创建自己的 WordPress 区块样式并与全世界分享吗?

WordPress 让创建区块图案变得非常简单,您可以将它们用于自己的网站,或与全球所有 WordPress 用户共享。

只需访问 WordPress 图案目录网站,然后点击“新建图案”链接即可。

新手指南:如何使用 WordPress 区块模式 newpattern-wporg20251114_ -21

注意:您需要登录或创建一个免费的 WordPress.org 帐户才能保存您的图案。

登录后,您将进入区块模式编辑器页面。它与 WordPress 默认的区块编辑器完全相同,您可以使用它来创建自己的模式。

新手指南:如何使用 WordPress 区块模式 block-pattern-creator20251114_ -22

只需添加模块即可创建图案布局。

您可以使用分组、封面、图库等布局模块来组织您的布局。

新手指南:如何使用 WordPress 区块模式 editing-block-pattern20251114_ -23

您还可以使用免版税图片来创建媒体模块。WordPress 媒体库可以让您轻松找到这些图片并将其用于您的设计模式中。

当你对自己的版型感到满意后,你可以将其保存为草稿或提交到版型目录。

新手指南:如何使用 WordPress 区块模式 save-submit-pattern20251114_ -24

在将您的模块图案提交到图案目录之前,请确保您已阅读模块图案目录指南

您可以点击“我的图案”链接来管理所有模块图案。它会显示您分享的所有模块图案、草稿图案以及您收藏的图案。

新手指南:如何使用 WordPress 区块模式 my-patterns20251114_ -25

如果您只想创建供自己使用的模块图案,可以将其保存为草稿。之后,从“我的图案”页面将其复制粘贴到您的 WordPress 网站。

手动创建 WordPress 区块模式

您还可以手动创建区块模式,并将其添加到您的 WordPress 主题或自定义代码片段插件(如WPCode)中。

只需在 WordPress 中创建一个新文章或页面。在内容区域,使用区块创建自定义布局或区块集合,并将其保存为模式。

新手指南:如何使用 WordPress 区块模式 switchcodeeditor20251114_ -26

之后,切换到代码编辑器模式。

接下来,你需要复制代码编辑器中显示的所有内容。

新手指南:如何使用 WordPress 区块模式 copyrawblockcode20251114_ -27

接下来,打开一个纯文本编辑器,比如记事本,然后粘贴这段代码。下一步你会用到它。

现在,您可以将您的积木注册为图案了。

要做到这一点,只需将以下代码复制并粘贴到主题的functions.php文件或代码片段插件(例如免费的 WPCode 插件,推荐)中即可。

1
2
3
4
5
6
7
8
9
10
11
12
function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

现在,将之前复制的原始代码块数据复制粘贴到 content 参数的值中。换句话说,您需要将“您的代码块内容代码写在这里”替换为您的代码块代码。请务必保留文本周围的单引号。

最后,别忘了将标题和描述更改为您自己的内容并保存更改。

现在您可以访问您的网站并编辑文章或页面。您新注册的区块图案将显示在区块插入器中。

新手指南:如何使用 WordPress 区块模式 add-custom-block-pattern20251114_ -28

如何在 WordPress 中移除区块图案

在 WordPress 中,您可以轻松移除或取消注册任何区块样式。假设您想移除上面示例中创建的区块样式。

您只需将以下代码复制粘贴到主题的 functions.php 文件或WPCode 文件中即可:

1
2
3
4
function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

在这个例子中,'my-plugin/my-awesome-pattern'是我们注册时使用的模式的名称。

您可以使用此代码注销主题或插件创建的任何区块图案。您只需要知道注册该图案时使用的名称即可。

移除 WordPress 核心模式

所有 WordPress 用户都可以使用 WordPress 的核心样式。这意味着它们可能已被过度使用,甚至可能与您的 WordPress 主题的其他部分不匹配。

如果您不想使用某种模式,只需避免将其添加到您的内容中即可。但是,如果您运营的是一个多作者 WordPress 网站,则可能需要阻止所有用户使用这些核心模式。

要移除所有 WordPress 核心模式,您需要将以下代码添加到主题的 functions.php 文件或 WPCode 文件中:

1
remove_theme_support( 'core-block-patterns' );

可重用代码块怎么了?

模块模式和可重用模块都旨在解决类似的问题:为用户提供轻松添加常用模块的选项。

为了解决这个问题,WordPress 核心团队将可重用的模块合并到了模式中。

为了实现与可重用模块相同的功能,您现在可以使用同步模式。当您或其他用户编辑模式时,这些更改将在下次使用该模式时保存。

新手指南:如何使用 WordPress 区块模式 pattern-settings-fse20251114_ -13

常见问题解答

以下是一些读者经常问到的关于积木图案的问题。

哪里可以找到更多拼布图案?

除了 WordPress 的默认样式外,您还可以在线浏览WordPress 样式目录,获取更多由社区创建的样式选项。

块状图案会降低网站速度吗?

不,区块样式本身不会影响网站速度。它们只是组织内容的一种方式,但为了获得最佳性能,请确保使用优化后的图片和区块。