首页 > 文章专栏 > 正文

新手教程:如何使用WordPress Block Patterns

WordPress 块模式入门指南:让网站搭建事半功倍

搭建 WordPress 网站从未如此简单,而 块模式(Block Patterns) 正是其中关键。我们首次发现它们时,就看到了提升工作效率的巨大潜力。

如今,我们像使用可复用块一样使用块模式来制作 CTA 和优惠券按钮——它们已成为我们内容创作的必备工具。

块模式让你无需编程或设计技能,就能轻松获得专业外观的布局。

它们是预先组合好的块集合,你可以快速插入并自定义,省去从零开始的麻烦。

无论你是刚搭建第一个 WordPress 网站,还是想加快工作速度,这份新手指南将教你如何查找、使用和创建块模式,在每个项目中节省时间。

WordPress 块模式新手图解

快速解答:什么是块模式?

简单来说,WordPress 块模式 是预先制作好的块组合,你可以直接插入文章或页面中。它们就像特定内容区域(如联系方式、价格表、标题)的设计模板。

使用它们,你可以立即创建专业布局,无需编写任何代码。只需插入模式,然后自定义文字和图片以匹配你的品牌。

本文涵盖的主题

  • 什么是 WordPress 块模式?
  • 如何在 WordPress 中使用块模式
  • 如何在块编辑器中创建模式
  • 如何在站点编辑器中创建模式
  • 管理 WordPress 中的模式
  • 查找更多块模式用于你的网站
  • 如何创建并分享你的块模式
  • 手动创建 WordPress 块模式
  • 如何删除 WordPress 中的块模式
  • 可复用块怎么了?
  • 关于 WordPress 块模式的常见问题
  • WordPress 设计额外资源

什么是 WordPress 块模式?

WordPress 块模式是预先设计的块集合,帮助你快速高效地创建自定义布局。我们在赶工期的项目中发现它们简直是救星。

WordPress 块编辑器直观易用,用户可以用文本、图片、按钮等内容块设计出漂亮的布局,并按需排列。

WordPress 块编辑器

不过,并非所有用户都有时间或设计技能每次都从头搭建布局。我们也遇到过这种挑战,所以块模式成了我们工作流程中的宝贵工具。

块模式提供了一个简单解决方案。WordPress 默认包含多种预建模式,让你几秒钟内就能添加专业外观的布局。

WordPress 块编辑器中的模式

流行的 WordPress 主题通常包含自己的自定义模式。这些模式为你提供与主题匹配的现成设计,进一步节省时间。

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

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

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

如何在 WordPress 中使用块模式

默认情况下,WordPress 自带几个有用的块模式,你的主题和某些插件也可能添加自己的模式。

要使用块模式,只需编辑你想要使用块模式的 WordPress 文章或页面。

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

文章编辑器中的块模式

你可以向下滚动查看可用的块模式。

你也可以按类别查看块模式,例如特色、按钮、列、标题等。

或者,点击 “探索所有模式” 按钮查看更多块模式。

在这里,你可以在弹出窗口中看到更大的预览。

探索所有模式

找到想要尝试的模式后,只需点击即可将其插入文章或页面的内容区域。

模式将出现在内容编辑器中,带有占位内容,你可以编辑并替换为自己的内容。

编辑块模式

只需点击模式中的任意块,即可编辑并更改其内容以满足你的需求。

你仍然拥有每个块的所有正常选项。例如,如果是封面块,你可以更改封面颜色或背景图片。

你可以根据需要为文章或页面添加任意数量的模式。你也可以像删除任何 WordPress 块一样删除模式。

删除封面块

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

最终,块模式帮助你节省手动排列块的时间,避免每次添加标题、图库、按钮等时重复劳动。

如何在块编辑器中创建模式

WordPress 在块编辑器中创建模式非常容易,你可以稍后重复使用。

编辑文章或页面时,只需选择要包含在模式中的块,然后点击 “创建模式”

在块编辑器中创建模式

你可以按住 shift 键并点击块来选中多个块。

但如果块排列方式使选择变得困难,你可以使用 文档概览 标签下的 列表视图

在列表视图中选择多个块

创建模式会弹出一个窗口。

你需要为模式提供名称并选择类别。

新模式名称和设置

下面会有一个开关,用于将模式设为 同步非同步

  • 同步模式:编辑模式会更新所有使用该模式的地方。适合全局项目,如邮件订阅框或行动号召按钮。
  • 非同步模式:插入模式后所做的更改不会影响原始模式。适合模板,例如产品评论布局,你可以在每篇新文章中更改文字。

点击 “创建” 按钮保存你的模式。

下次你想使用该模式时,只需打开块插入器。你会在 “我的模式” 标签或类别(通常带有文件夹图标)下找到它。

重复使用自定义模式

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

如果你使用的是支持全站编辑器的块主题,那么你还可以在站点编辑器中创建模式。

通过访问 外观 → 编辑器 页面打开站点编辑器。

你将进入站点编辑器界面。

站点编辑器界面

点击左侧边栏中的 “模式” 继续。

你将看到所有可用的模式和类别。

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

在站点编辑器中创建模式

这将弹出一个窗口,你需要提供模式名称、选择类别,以及决定模式是同步还是非同步。

点击 “创建” 继续。

配置自定义模式设置

WordPress 将创建一个空白画布供你设计模式。

在这里,你可以添加块来设计你的模式。

在站点编辑器中设计模式

完成后,别忘了点击 “保存” 按钮存储你的模式。

管理 WordPress 中的模式

管理模式的方式取决于你使用的主题类型。以下分为两种方法。

方法1:在站点编辑器中管理模式

如果你使用的是支持全站编辑器的块主题,则可以在站点编辑器中管理模式。

通过访问 外观 → 编辑器 页面打开站点编辑器。

站点编辑器界面

在模式界面中,你可以点击模式进行编辑。你也可以点击模式旁边的三点菜单来复制、导出或删除它。

要管理所有模式,请点击侧边栏中的 “管理所有我的模式” 标签。

管理模式快捷方式

这将显示你的模式的完整列表,你可以轻松编辑或删除它们。

方法2:在经典主题中管理模式

如果你使用的是经典主题(不支持全站编辑器的 WordPress 主题),则可以通过访问 外观 → 模式 页面来管理模式。

注意:此菜单选项取决于你的特定主题支持。并非所有经典主题配置中都能看到它。

列表视图管理所有模式

在这里,你可以添加、删除和导出你的块模式。

请注意,即使某些经典主题(如 Hestia)现在也像全站编辑主题一样管理模式,而其他主题仍使用下面截图所示的旧界面。

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

在经典主题中管理模式

查找更多块模式用于你的网站

默认情况下,WordPress 自带几个常用块模式。你的主题也可能添加自己的模式。

不过,你可以在 WordPress 模式目录网站上找到比块插入器中更多的块模式。

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

WordPress 块模式目录

在这里,你会发现由 WordPress 社区提交的块模式。

要使用其中一个块模式,只需点击查看模式,然后点击 “复制模式” 按钮。

复制块模式

接下来,返回你的 WordPress 博客,编辑要插入此块模式的文章或页面。

在编辑界面,只需右键单击并选择浏览器菜单中的 “粘贴”,或按 Ctrl+V(Mac 上为 Command+V)。

在块编辑器中粘贴模式

如何创建并分享你的块模式

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

WordPress 让你轻松创建块模式,并在你自己的网站上使用,或与全球所有 WordPress 用户分享。

只需访问 WordPress Pattern Directory 网站,点击 “新模式” 链接。

在 WordPress.org 模式目录中创建新模式

注意:你需要登录或创建一个免费的 WordPress.org 账户才能保存你的模式。

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

块模式创建器

只需添加块来创建你的模式布局。

你可以使用布局块,如组、封面、图库等来组织布局。

编辑块模式布局

媒体块中还有免版税图片可供使用。WordPress 媒体库允许你轻松查找并使用这些图片。

对块模式满意后,你可以将其保存为草稿或提交到模式目录。

保存/提交模式

在提交你的块模式到模式目录之前,请确保你已经阅读了块模式目录指南。

你可以通过点击 “我的模式” 链接管理所有块模式。它将显示你分享的所有块模式、草稿模式以及你收藏的模式。

在 WordPress.org 目录中管理模式

如果你只想为自己创建块模式,可以将它们保存为草稿。然后从“我的模式”页面复制并粘贴到你的 WordPress 网站中。

手动创建 WordPress 块模式

注意:这是一种高级方法,需要向网站文件添加代码。如果你不熟悉编辑 PHP,我们推荐使用前面提到的插件方法。

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

首先在 WordPress 中创建一篇新文章或页面。在内容区域,使用块创建你想要保存为模式的自定义布局或块集合。

切换到代码编辑器

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

从代码编辑器中复制所有内容。

复制原始块代码

接下来,打开一个纯文本编辑器(如记事本),粘贴代码。你将在下一步中使用它。

现在,你准备好将块注册为模式了。

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

更多细节,请参阅我们的完整指南:如何在 WordPress 中添加自定义代码。

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( '两栏杂志布局', 'my-theme'),
            'description' => _x( '一个简单的杂志风格两栏布局,带有大图片和样式化文字', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' 你的块内容代码放在这里'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

现在,将之前复制的原始块数据粘贴为 content 参数的值。

换句话说,你需要将文本“你的块内容代码放在这里”替换为你的块代码。确保保留单引号。

重要提示: 代码使用单引号。如果你的内容包含撇号(例如“It’s”),你必须在其前面添加反斜杠(例如“It’s”),以避免破坏代码语法。

最后,别忘了将标题和描述改为你自己的,然后保存更改。

你现在可以访问你的网站并编辑文章或页面。你新注册的块模式将出现在块插入器中。

将自定义块模式添加到文章

如何删除 WordPress 中的块模式

你可以轻松删除或取消注册 WordPress 中的任何块模式。假设你想删除上面示例中创建的块模式。

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

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 文件或 WPCode 中:

remove_theme_support( 'core-block-patterns' );

可复用块怎么了?

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

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

要获得与可复用块相同的功能,你现在可以使用 同步模式。当你或其他用户编辑模式时,这些更改将在下次使用该模式时保存。

你可以通过工具栏中的紫色图标识别同步模式。这与以前 WordPress 用于可复用块的视觉提示相同。

配置自定义模式设置

关于 WordPress 块模式的常见问题

以下是我们读者经常问到的关于块模式的一些问题。

基本块模式有什么用?

基本块模式用于立即向文章或页面添加预设计布局。它是创建常见部分(如行动号召按钮、价格表或多列文字区域)的快捷方式,无需从头构建。

小工具和块有什么区别?

主要区别在于,块用于创建文章和页面内的内容,而小工具传统上用于侧边栏和页脚。然而,现代 WordPress 正在向全站编辑方法过渡,小工具正在被块取代。

为什么我应该使用块模式?

你应该使用块模式来节省时间并在整个网站保持专业设计。它们允许你一键插入复杂布局,消除了每次创建新文章时都需要编码技能或手动格式化的需求。

在哪里可以找到更多块模式?

除了 WordPress 默认的模式外,你还可以在线探索 WordPress 模式目录,社区创建了更多选项。

块模式会降低网站速度吗?

不会,块模式本身不会影响网站速度。它们是一种结构化内容的方式,但请确保使用优化的图片和块以获得最佳性能。

有关提示,请参阅我们的终极 WordPress 速度与性能指南。

WordPress 设计额外资源

如果你想自定义 WordPress 网站设计,以下资源会很有用:

  • 如何轻松创建自定义 WordPress 主题(无需任何代码)
  • 如何重新设计 WordPress 网站(新手指南)
  • 常见的 WordPress 块编辑器问题及解决方法
  • 如何样式化 WordPress 评论表单(终极指南)
  • 如何自定义 WordPress 块编辑器的背景颜色

希望本指南能帮助你学习如何在 WordPress 网站上使用块模式。你可能还想查看我们的掌握 WordPress 块编辑器指南,或看看这些方便的 WordPress 快捷键以提高工作效率。

如果你喜欢这篇文章,请订阅我们的 YouTube 频道观看 WordPress 视频教程。你也可以在 Twitter 和 Facebook 上找到我们。

文章标签:#WordPress#内容创作#块模式#布局设计#网站搭建

版权声明:本文为「猫哥建站」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

本文链接:https://maogeo.top/blog/新手教程:如何使用wordpress-block-patterns