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

Supportive, Professional, Client-Focused Service

搭建 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 样式目录,获取更多由社区创建的样式选项。

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

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

常见问题

电话:
+86 185 2047 9422
微信:
Webulid666
邮箱:
service@webulid.com
WordPress 以其用户友好的平台而闻名。如今,市面上有无数的 WordPress 主题和页面构建器插件可供选择,创建网站从未如此简单。然而,打造真正专业、精致的网站外观仍然并非易事,尤其是对于那些不熟悉设计或技术的人来说。
打造一个优秀的网站远不止简单的主题选择——它需要战略规划、专业的设计知识,通常还需要定制代码。而这正是聘请 WordPress 网站设计服务的关键所在。
我们的网页设计团队在构建美观的网站、吸引访客并带来成果方面拥有丰富的经验。与其费力地创建一个最终达不到专业水准的网站,不如交给我们的专家来处理。我们将与您紧密合作,了解您的愿景并将其变为现实,最终为您打造一个值得骄傲的网站。
我们的网站设计服务适合任何想要建立或提升其在线形象的人 - 无论他们的经验水平如何!
它最适合以下人群:
– WordPress 初学者:您有愿景,但需要帮助将其实现。我们将处理所有技术问题,因此您无需任何设计或编码知识。
忙碌的企业主:您知道专业的网站很重要,但您的时间有限。我们将为您设计一个令人惊艳的网站,让您专注于您最擅长的领域——经营您的业务。
现有网站即将焕新:您现有的网站运行良好,但需要进行现代化升级。我们将进行专业的升级改造,以契合您不断发展的品牌形象。
初创企业和新创企业:准备好实现你的伟大创意了吗?我们将为你打造一个全新的网站,打造令人印象深刻、吸引目标受众的精彩内容。
电商创业者:您需要一个不仅外观精美,还能促进销售的在线商店。我们将根据您的产品或服务,量身定制一个高转化率的电商网站。
本质上,如果您需要一个令人惊叹的、功能齐全的网站,无论这是您的第一个网站还是第五个网站,我们都会帮助您实现它。
开发 WordPress 网站的时间表会根据项目范围和所需的具体功能而有所不同。例如,一个基本的博客大约需要 10 个小时才能搭建完成,但对于像电商商店或会员网站这样的复杂网站,搭建时间则可能更长。
我们的专家经验丰富,将以最快的速度让您的网站上线运行,同时保证质量。根据您选择的 WordPress 网站设计套餐,我们预计交付时间为 7-10 天。一旦我们清楚地了解您的愿景和需求,我们就能为您提供更精准的时间表。
wordpress常见的支付接入通道
在WordPress中,集成支付功能通常涉及到选择合适的支付网关插件,这些插件可以让你轻松地在你的网站上接受付款。以下是一些常见且广泛使用的支付接入通道和相应的WordPress插件:
1、PayPal
插件推荐:PayPal for WooCommerce(对于使用WooCommerce的网站)
PayPal官方插件提供了与PayPal服务的无缝集成,支持多种支付方式,如PayPal支付、信用卡支付等。
其他选择:PayPal Express Checkout for WordPress(适用于非WooCommerce网站)
2、Stripe
插件推荐:Stripe for WooCommerce
Stripe也是全球广泛使用的支付解决方案之一,通过其WordPress插件可以方便地集成到你的WooCommerce网站中。
其他选择:Stripe Payment Gateway for Easy Digital Downloads(对于数字产品)
3、Square
插件推荐:Square for WooCommerce
Square提供了与WooCommerce的集成,支持接受信用卡和Square的移动支付解决方案。
4、Authorize.Net
插件推荐:Authorize.Net AIM for WooCommerce
Authorize.Net是一个强大的支付网关,特别适合电子商务网站,该插件支持WooCommerce。
5、Braintree
插件推荐:Braintree Payments for WooCommerce
Braintree是PayPal旗下的一个支付解决方案,适用于需要多种支付选项的网站。
6、2Checkout
插件推荐:2Checkout Payment Gateway for WooCommerce
2Checkout也是一个国际化的支付网关,适合全球市场。
正常来说,网站建设的三大要素主要值得是域名、服务器、代码(包括文本、图片、视频等内容)。
网站首页:主要结构从上到下分别是banner、产品分类、产品、用户评价、新闻等
产品目录页:产品目录页包括店铺级和产品分类级,展示产品对应级产品
产品详情页:展示产品主图、次图、产品详情描述、产品评价
About Us:关于我们的基本介绍
Contact Us :contact us的相关表单及联系方式、地图等
政策条款页面:主要是隐私政策、退换货政策等
品牌故事: 阐释公司或者品牌的页面
质量保证:质保页面/资质证书
在独立站常见的询盘呈现方式有两种:
1、表单询盘
2、社媒询盘
根据搜索结果,询盘(enquiry/inquiry)在国际贸易中主要分为以下两种类型,其分类依据是‌发起方的主体身份‌:
买方询盘
由买方主动向卖方发出,目的是询问商品价格或其他交易条件(如规格、数量、交货期等),以试探对方交易诚意并了解市场行情。
特点‌:多用于大批量商品采购时,需向多个供应商询价以对比条件;
对复杂商品需详细询问规格,避免后续磋商耗时;
虽无法律约束力,但需避免无购买诚意的询盘,以免损害信誉。
卖方询盘
由卖方向潜在买方发出,通常用于市场动荡或供求异常时,旨在探听市场需求、寻找有利交易时机。
特点‌:卖方主动征询购买意向,可能附带产品报价(即“报盘”);
策略性较强,用于开发新客户或测试市场反应。
其他分类补充‌(非主体分类,但常见于实务中):
按目的性‌:可分为目的明确型询盘(具体询问产品细节,意向高)和潜在发展型询盘(了解市场或开发供应商)。
按真实性‌:部分资料提到“真实询盘”与“虚假询盘”(如垃圾询盘),但此类分类非主流,需谨慎辨别。

Newsletter subscribe!

Enter your email to unlock an exclusive 10% discount on professional website development tailored to your business needs.

Have more questions?

Let’s schedule a short call to discuss how we can work together and contribute to the success of your project or idea.