如果您目前正在运营WordPress 网站或正在考虑搭建一个 WordPress 网站,那么您可能听说过区块编辑器。这个强大的工具内置于 WordPress 核心功能中,使网站所有者和开发者能够从零开始构建整个网站,而无需编写代码。
但是关于区块编辑器,还有很多值得探索的地方!让我们一起来看看它是什么,它的优缺点是什么,以及如何使用它。
什么是WordPress区块编辑器?
区块编辑器是一款革命性的网站编辑器,作为 WordPress 5.0 版本的一部分发布,取代了经典编辑器。它使初学者和高级用户都能通过拖放元素来构建页面、模板和整个网站——无需编写任何代码!

每个元素都称为一个区块,可以是段落、图片、列、价格表、社交媒体信息流等等。要设计页面、文章或其他网站版块,用户只需将区块拖放到位,然后使用简洁易用的设置面板为每个区块设置样式即可。
它不仅仅是一个标准的页面编辑器。网站所有者和开发者可以使用模块来自定义页眉、页脚、侧边栏、存档页面、结账和购物车页面等等。它真正让每个人都能轻松进行网站设计。
在深入探讨之前,让我们先定义几个术语:
- 模块。可以添加到内容中的单个元素。例如,图像、段落、标题、视频、列等等。
- 模块模式。一组预选模块,可用于构建完整的内容版块。例如:横幅、文章设计、列布局等等。
- 模板。本质上,模板是定义特定类型内容的设计和布局的框架。文章、产品和分类页面都是拥有各自模板的内容示例。
- 模板组件。网站中出现在大部分或所有页面上的部分。例如,页眉、页脚和注释。
- 网站编辑器。该工具可将区块功能扩展到网站的其他区域,包括模板和模板组件。您必须安装WordPress 区块主题才能使用网站编辑器。
区块编辑器的优缺点
就像所有事物一样,区块编辑器也有其优点和缺点。让我们一起来看看。
区块编辑器的优点
1. 它能帮助你更快、更高效地完成工作。
区块编辑器功能极其强大,内置了许多旨在提升工作效率的功能。以下是区块编辑器的一些功能,可显著加快设计、发布和编辑速度:
- 可重复使用的模块。您可以保存一个模块,并在网站上反复使用。编辑该模块后,所有实例都会自动更新。例如,您可以创建一个行动号召按钮,并在构建所有着陆页时将其插入。如果需要更改按钮链接,所有页面上的链接都会自动更新。
- 区块样式。区块样式是 WordPress 默认提供的预定义区块组,也可以通过第三方插件获得。它们允许您一次性快速插入页面的整个部分,例如页眉和多列布局。您只需将它们添加到页面中,自定义颜色,即可完成设置!
- 键盘快捷键。使用快捷键,您可以在添加和编辑网站内容时始终将双手放在键盘上。您可以浏览不同的模块、保存更改、插入模块、设置文本样式等等。
- 轻松创建博客文章。您可以直接将内容拖放到区块编辑器中,它会自动将其转换为相应的区块。这可以为您节省大量时间!例如,如果您在 Google 文档中撰写了一篇文章,您可以将其完整粘贴到 WordPress 中,它将保留标题、图片、链接等内容。无需单独添加图片和其他元素!
- 全局设置样式。设置颜色、字体、间距和其他设计规范,这些规范将应用于您网站中的所有模块(如果您使用的是模块主题)。这样可以避免您单独编辑每个页面,也方便团队成员或客户向您的网站添加内容。
2. 它使初学者无需编写代码即可创建复杂、美观的网站。
区块编辑器的模块化界面使其易于上手,即使是完全的新手也能轻松使用。当然,任何事物都需要一定的学习时间,但您可以利用WordPress 官方文档和教程来快速掌握。
然后,您可以使用区块编辑器将元素拖放到位,并通过简单的设置面板进行颜色和间距等设计选择。无需编辑代码,甚至无需使用可能很快变得复杂的短代码。
你还可以更进一步,将同样的理念应用到页眉、页脚、侧边栏和页面模板中。这意味着即使是新手也能完全自定义网站的各个方面——结账页面、搜索页面、存档页面等等。
模块模式是另一个非常适合初学者的功能。这些模块是预先设置好的分组,您可以快速添加这些分组来构建页面的各个部分,例如价格表、首页横幅和图片库。

3. 它支持真正的全站定制
与其他许多解决方案不同,WordPress 区块编辑器真正允许您使用其功能自定义网站的各个方面。超越页面和文章设计!以下是您可以使用区块构建的一些网站元素:
- 标题
- 页脚
- 搜索结果页面
- 存档(例如帖子和产品分类)
- 404页
- 博客文章模板
- 产品模板
- 评论区
这是一个绝佳的机会,让您打造一个真正脱颖而出、设计精美且功能齐全的网站,满足您的特定需求。例如,您可以修改产品模板,添加产品演示视频、尺码表或过敏原提示,使其显示在您商店的所有商品上。或者,您还可以添加一个行动号召,自动添加到所有博客文章的底部。可能性无穷无尽!
4. 它能提升网站性能
使用区块编辑器还可以提升网站的速度和性能。它不仅能让你省去繁重的页面构建器,还能减少实现特定功能所需的插件数量。例如,你无需安装图片库插件,只需在页面中插入一个图库区块,并根据需要进行样式设置即可。
此外,区块编辑器生成的代码比页面构建器插件生成的代码更轻量、更简洁。这意味着,如果使用区块编辑器而不是页面构建器来创建相同的页面设计,页面默认加载速度会更快。
5. 它与许多第三方插件进行了集成。
由于 WordPress 默认包含区块编辑器,因此它可以与流行的主题和插件兼容。这也意味着第三方开发者通常会调整他们的解决方案以使其与区块编辑器兼容。
有很多优秀的插件可以向你的库中添加模块和模块样式。例如,Jetpack 就包含了表单、支付、社交媒体信息流、邮件订阅等模块。

WooCommerce 添加了用于显示产品、评论、筛选器以及创建高效电子商务商店所需的几乎所有功能的模块。
6. 它在不断改进
最好的还在后头!有一支由开发人员和志愿者组成的团队,他们不断努力发布新功能和改进,同时确保 WordPress 的安全性和可访问性。
区块编辑器的缺点
当然,区块编辑器可能并不适合所有网站。以下是它的一些缺点:
1. 您可能需要更换主题或重建现有网站的部分内容。
许多页面构建器和主题都支持区块编辑器,让您可以轻松切换到区块编辑器。但是,并非所有页面构建器和主题都如此。您可能需要重建网站的部分内容才能完全迁移到基于区块的系统。
如果您想使用网站编辑器,还需要使用区块主题。这意味着,如果您当前未使用区块主题,则需要切换到新主题。根据您的具体情况,这可能需要花费一些时间。但是,在大多数情况下,这是非常值得的!
2. 可能存在学习曲线
任何新技术都需要一定的学习时间,无论你的经验水平如何。因此,如果你打算使用区块编辑器搭建新网站,或者将现有网站转换为区块式,那么你需要安排时间来学习这套系统。
值得庆幸的是,有很多优秀的资源可以提供帮助,包括:
- 学习 WordPress:这里有海量的教程和课程,带你了解区块编辑器的所有细节。
- 区块编辑器文档:包含说明和图片的帮助指南
- WordPress Playground:一个免费的空白网站,您可以在这里体验区块编辑器,并在对正式网站进行重大更改之前熟悉其功能。

如何访问和使用块编辑器
现在你对区块编辑器有了一些了解,是时候开始学习如何使用它了。
区块编辑器界面
我们先来介绍一下区块编辑器的组成部分。当你创建页面、文章或其他网站元素时,就会看到这些组件。下图展示了一些主要组件,我们稍后会详细介绍:

以下是这些要素的详细说明:
- 模块插入器:您可以在这里选择和添加模块。您可以查看按模块类型分类的可用模块和图案列表,并直接从该面板拖动它们。使用左上角的按钮打开和关闭模块插入器。
- 模块:此选项卡显示所有可用的模块。
- 图案:此选项卡显示所有可用的图案。
- 模块搜索栏:使用此功能搜索特定模块或图案。
- 工具:此按钮提供不同的交互方式,用于选择、导航和编辑模块。
- 撤销/重做:撤销在块编辑器中执行的操作,或重做相同的操作。
- 详细信息:这提供有关页面或帖子的信息,例如字数和字符数、阅读时间以及段落数、标题数和块数。
- 列表视图:一种帮助您浏览模块和内容的工具。您可以查看页面上的所有模块,移动它们,并快速轻松地来回切换。
- 设置面板:访问页面/文章或每个单独模块的设置。您可以在这里更改间距、颜色等设计元素。
- 其他选项:更改视图类型、切换到代码编辑器以编辑 HTML 以及自定义块编辑器体验的其他方面。
- 添加新模块:点击此图标,根据图标在页面上的位置添加新模块。
使用模块
现在您已经对区块编辑器中的重要元素有了一定的了解,接下来我们将向您展示如何添加和编辑区块。在本教程中,我们将创建一个博客文章。无论您是在编辑文章、页面还是网站的其他元素,这些概念都大同小异。
在这种情况下,您需要前往WordPress 控制面板中的“文章”→“添加新文章”。这将自动打开新文章的区块编辑器。首先在文章顶部添加标题。
然后,点击左上角的蓝色“ +”图标打开模块插入器。在这里,您会看到可用模块的列表。这些模块按类型分类,您也可以使用搜索栏查找特定模块。将鼠标悬停在某个模块上,即可查看更多信息并预览该模块的实际效果。
我们先来添加一个段落块。您可以在“块插入器”中找到它,然后将其拖到右侧的主内容区域,或者直接在“输入 / 选择块”处开始输入。

将光标置于文本内时,文本上方会出现一个包含样式选项的新菜单。从左到右依次为:
- 段落:点击此按钮可将段落块转换为其他块类型。例如,您可以将其转换为标题。
- 拖动:将模块移动到页面上其他模块的任意位置。
- 上移/下移:将方块在页面上向上或向下移动一个空格。
- 对齐方式:文本左对齐、居中对齐或右对齐。
- 加粗:将段落中选定的文本加粗。
- 斜体:将段落中选定的文本设置为斜体。
- 链接:将您选择的任何文本转换为链接。
- 更多:查看更多选项,例如突出显示或添加删除线文本、将数字转换为下标等等。
- 选项:访问其他功能,例如使代码块可重用、复制代码块、锁定代码块等等。

您可以对段落内的文本进行任何所需的调整。然后,选中段落内的任意位置,点击右上角的图标。这将打开“设置”面板。

您会在此面板顶部看到“文章”和“区块”两个选项卡。现在,我们先来看看“区块”选项卡。此面板显示您所选区块(在本例中为“段落”区块)的特定选项。
在“颜色”部分,您可以为该段落的文本、背景和链接设置颜色。您甚至可以创建自定义渐变效果。例如,您可以使用深绿色背景和白色文本,使某个段落在文章中脱颖而出。

在“字体排印”部分,您可以设置字体选项。虽然默认显示字体大小,但您可以点击三个垂直点来解锁更多选项,例如字体系列和字间距。在本例中,我们决定将文本更改为衬线字体,并增加文本行之间的间距(称为行高)。

在“尺寸”下,您可以调整文本周围的内边距和外边距,根据需要增加或减少空间。

在“高级”选项下,您可以添加 HTML 锚点,以便链接到文章中其他位置的该部分,或者设置 CSS 类以进行样式设置。
现在段落块已经按照我们想要的方式排列好了,接下来我们给文章添加两列——一列放图片,另一列放第二个段落。在页面中添加一个“列”模块,然后选择你想要的列布局。这次我们选择 33/66,也就是三分之一和三分之二的比例。

你会发现可以单独选择每一列来设置样式和添加模块。

在左侧栏中,点击“+”图标,然后选择“图像”模块。

在这里,您可以从设备上传图片,从媒体库中选择现有图片,或者插入URL链接的图片。我们决定从媒体库中添加一张黑森林蛋糕的图片。点击“图片”模块后,您会看到一个新的设置栏出现,就像“段落”模块一样,但选项略有不同。例如,您可以选择裁剪图片、在图片上添加文字、应用滤镜等等。

点击右上角的图标,即可看到图像模块的设置面板。在这里,您可以添加替代文字、创建圆角、更改图像大小、添加边框等等。这里,我们将图像的圆角半径设置为 22 像素。

然后我们在右侧三分之二列添加了另一个段落块。请注意,您可以选择单独编辑每一列,也可以选择编辑整个两列段落块。如果两列都被选中,它们将以蓝色边框显示。
这样,您就可以使用出现的工具栏同时对两列进行设置。这里,我们将垂直对齐方式设置为“居中对齐”,以便文本和图像对齐。

就是这样!您可以根据自己的喜好继续完善帖子,从各种各样的模块中进行选择。每个模块都有自己的设置和选项——您可以随意尝试,直到找到您想要的效果。
发布文章之前,您可能需要预览一下,看看它在网站前端的显示效果。点击右上角的“预览”按钮,然后选择“在新标签页中预览”。这样可以更准确地了解文章发布后的实际效果。

准备就绪后,现在就可以点击“发布”按钮,让帖子生效了!
使用块状图案
提醒一下,模板是预先构建好的页面片段,可以让你快速轻松地创建文章或页面。让我们回到上一节创建的文章,看看如何添加模板。
您需要再次点击左上角的蓝色“ +”图标来打开模块插入器。但这次,请点击“图案”选项卡。默认情况下,这将打开一个精选图案列表。

您可以使用当前设置为“精选”的下拉菜单,选择其他图案类别,例如“按钮”、“列”和“WooCommerce”。或者,您可以使用顶部的搜索栏查找特定图案。
在这种情况下,我们选择“图库” ,然后将名为“带描述的偏移图像”的图案拖到文章中。这将为内容添加一个简洁的图像功能。

你会看到这个图案由几个模块组成:两个图像模块、两个段落模块和一个间隔模块。就像我们之前做的那样,你可以单独编辑每个模块,也可以整体编辑整个图案。你可以编辑图案的所有细节,使其完全符合你的需求,也可以只替换图像和文本,换成你自己的内容。
首先选择一张图片,然后点击“替换”。在这里,您可以选择上传图片或从媒体库中选择。添加图片后,对另一个占位符执行相同的操作。

然后,点击其中一个段落模块,将文本替换成您自己的内容。您可以根据需要进行修改,就像之前编辑段落模块一样。

就这样!你现在就拥有了一个漂亮的页面版块,而创建它只花了你几分钟的时间。
使用模板和模板部件
模板是定义内容类型(例如文章、产品页面和存档页面)布局和设计的框架。模板组件是可重用的全局元素,例如页眉和页脚。您可以使用站点编辑器编辑这些元素。
要使用站点编辑器,您的网站必须启用一个区块主题。在 WordPress 控制面板中,依次点击“外观”→“编辑器”。这将打开站点编辑器。在左侧,您会看到一个侧边栏,其中包含“模板”和“模板组件”选项。点击“模板”。在这里,您将看到网站上所有模板的列表,具体模板会根据您使用的主题而有所不同。

在这个示例中,我们选择了“单篇”模板,它是用于单篇博客文章的模板。您会看到此页面上已经存在一些模块,包括:
- 特色图片
- 帖子标题
- 发布内容
- 帖子元数据
- 评论

您可以根据需要对这些现有模块进行任何更改。我们为文章标题添加了浅绿色背景,将标题设置为全宽,更改了文章内容的字体,并移除了特色图片和标题之间的边距。您可以查看更改后的文章效果:

您还可以向模板添加新的模块。由于我们使用的是“单篇”模板,让我们添加一个行动号召,它将自动显示在所有博客文章的底部。这样可以节省大量时间,因为您无需为每篇文章单独添加行动号召。
让我们在模板中添加“简单行动号召”模块模式。

现在,我们将自定义 CTA 文本,使其符合我们的需求。我们还会更新按钮的设计,您可以通过点击“按钮”模块,然后点击右上角的齿轮图标来完成此操作。在这里,您可以编辑颜色、字体、边距等设置。您还可以通过直接点击按钮文本并使用出现的工具栏来更改按钮文本和链接。
请查看我们所做的更改:

点击右上角的“保存”按钮更新模板。现在,您会看到行动号召按钮位于每篇博文的底部。

现在,我们回到网站编辑器,看看如何编辑模板部件。转到“外观”→“编辑器”,然后选择“模板部件”。

在这里,您可以看到可以编辑的模板部件列表。请记住,这些是全局元素,您所做的任何更改都会反映在整个网站上。我们点击“页眉”来编辑该模板部件。
您会看到页眉以及其中的现有模块。在本例中,有“网站标题”模块和“导航”模块。

您可以像本文前面提到的那样,对现有区块进行修改。只需点击区块即可进行编辑,您可以使用区块上方的菜单或右侧的“设置”面板。
让我们在主菜单中添加搜索栏。点击“导航”模块,您会看到与本文中相同的工具栏。此外,在最后一个菜单项的右侧还会出现一个黑色的“ +”图标。点击该图标即可向菜单中添加新的链接或模块。我们添加了搜索模块,但您也可以添加自定义按钮、新链接、社交媒体图标等等,一切根据您的需要而定。

然后,使用您已经熟悉的设置面板,根据您的喜好设置样式。我们添加了占位符文本并更改了按钮颜色。

您还可以选择整个页眉并进行样式设置,使用右侧的“设置”面板可以更改背景颜色、字体、内边距等等。想象一下,您可以将这些技巧应用到网站的各个方面!
充分利用块编辑器的 10 个高级技巧
现在你已经了解了基本知识,让我们来看看如何充分利用区块编辑器的一些技巧。
1. 善用键盘快捷键
键盘快捷键是加快编辑和页面构建过程的便捷方式,因为您无需将手指从键盘上移开。稍加练习,您就能变得非常快!
有很多很棒的快捷键可以探索,但我们在下面只列出了一些。请注意,这些快捷键会因您使用的设备而异。以下示例列出的是 Windows 电脑的快捷键:
- 显示或隐藏“设置”面板:Ctrl + Shift + ,
- 导航至编辑器的下一部分:Ctrl + `
- 保存更改:Ctrl + S
- 撤销更改:Ctrl + Z
- 复制选定块:Ctrl + Shift + D
- 在选定块之前插入新块:Ctrl + Alt + T
- 向上移动选中的方块:Ctrl + Shift + Alt + T
请参阅WordPress 文档,查看完整的键盘快捷键列表,包括不同操作系统的快捷键。
2. 为您的网站和模块设置样式
如果你的网站有多位用户,或者你是一位将网站交付给客户的开发者,全局样式将非常强大。你可以使用全局样式设置预定义的调色板和样式块,供用户使用。这有助于确保网站始终保持品牌一致性,无论谁在维护它。
要访问和设置样式变体,请转到“外观”→“编辑器”,然后单击右上角的 “样式”图标。

请注意,在此处所做的任何更改都将应用于整个网站,因此请谨慎编辑!点击“浏览样式”即可查看预设选项列表。您可以切换这些选项,并在左侧立即预览网站的显示效果。

或者,返回“样式”面板,您可以设置字体、颜色和布局选项。例如,单击“字体”,您将看到文本、链接、标题和按钮的选项。我们选择了“标题”,并更改了字体、字重和大小写。

返回“样式”面板,您还会找到“模块”选项。打开此选项,即可查看网站上的所有模块列表。在本例中,我们将打开“按钮”模块。根据您选择的模块,可用选项会略有不同,但对于“按钮”模块,您可以编辑字体、颜色和布局。点击“颜色”,即可设置网站上所有按钮的默认颜色。

或者,您可以点击“调色板”来定义用户在页面和文章中添加按钮时看到的颜色选项。我们选择为按钮模块添加自定义颜色。

现在,当有人向你的网站添加按钮时,他们可以从你设置的自定义颜色中进行选择。

3. 创建同步模式(以前称为可重用块)
同步模式(可重用模块)非常棒,因为您可以保存它们,然后在网站的任何位置使用。当您对其中一个模块进行设计更改时,所有模块都会自动更新。这对于您可能经常使用的行动号召或类似情况非常适用。在本例中,我们将创建一个“热门产品”模块,以便在网站的任何位置推广热门产品。
我们先把它添加到页面中并设置样式。

完成后,点击该模块,然后选择模块上方工具栏中的三个垂直点。接着,选择“创建图案/可重复使用模块”。

系统会提示您为模块命名,然后将其保存到您的库中。之后,当您编辑其他页面或文章时,您会在模块插入器中看到一个新的“可重用”选项卡。该选项卡会显示所有可重用的模块,并允许您随时将它们添加到内容中。

如果您点击那里写着“管理可重用模块”的链接,您可以查看可重用模块的完整列表,并编辑、添加或重命名它们。

探索喷气背包的优势
了解 Jetpack 如何帮助您保护、加速和发展您的 WordPress 网站。 首年最高可享 50% 折扣。探索计划
4. 使用代码编辑器
如果您是开发人员或具备一定的编程经验,您可能需要能够快速地对单个页面或文章进行精确修改。要访问代码编辑器,您只需打开正在编辑的页面或文章,然后点击右上角的三个垂直点,再选择“代码编辑器”即可。

现在,您将看到页面上的所有内容都以 HTML 格式显示。您可以编辑此代码并根据需要进行更改,并且可以在两个编辑器之间来回切换。

不过请记住,编辑代码可能很危险,甚至可能导致网站崩溃。在进行重大代码更改之前,请务必备份您的 WordPress 网站。
5. 充分利用列表视图
列表视图是一项便捷的功能,可帮助您在工作时快速轻松地在各个模块之间切换。要访问此工具,请点击模块编辑器右上角的三条竖线。在那里,您将看到构成页面或文章的所有模块的列表。

如果某个模块左侧出现箭头,您可以点击并展开该模块,查看其下方嵌套的所有模块。例如,“图库”模块内部包含三个“图像”模块。

这是快速概览页面或文章所有元素的绝佳方式。您还可以在列表视图中拖动模块,无需上下滚动页面即可快速移动它。点击模块后,您将自动跳转到编辑器中的相应模块,这在内容较多时尤其有用。
将鼠标悬停在某个图块上,点击右侧出现的三个垂直点,即可查看更多选项。您可以复制或重复该图块,在选定图块的前后插入新图块,移动、移除或锁定图块,或者将多个图块组合在一起。

6. 向您的库中添加更多积木和图案
虽然 WordPress 默认自带很多优秀的模块和模板,但有时您可能需要一些额外的选项。您可以通过以下几种方式实现:
第一种方法是通过你的主题。许多模块主题都包含自己的模板、模块样式和模块,安装后即可使用。例如,Wabi主题包含订阅表单、项目和标题的样式。而Bricksy 则 拥有数十种现成的样式,可以快速轻松地构建布局。
某些插件还可以向您的库添加模块和样式。例如,WooCommerce 引入了用于显示产品和筛选器、显示购物车、添加评论等的模块。Jetpack 引入了大量模块,涵盖了从日历和表单到社交媒体动态和支付选项等各种功能。Sensei LMS 则添加了用于测验题和图像热点等功能的模块。
还有一些专门用于向库中添加模块的插件。以下是一些示例:
- Ultimate Blocks:内容筛选、评论、倒计时、滑块等等
- Otter Blocks:手风琴式折叠面板、标签页、地图、价格部分等等
- CoBlocks:常见问题解答、活动、媒体卡片、社交分享选项等等
- Kadence Blocks:图标、信息框、目录、高级行选项等等
7. 可以轻松地从 Google 文档或您的计算机添加内容
如果您经常在 Google 文档中撰写内容,或者与经常使用 Google 文档的人合作,那么区块编辑器将为您节省大量时间。您无需逐个复制粘贴段落、图片、链接等,只需将整个 Google 文档粘贴到区块编辑器中即可。WordPress 会自动将文档转换为正确的区块。
即使不使用 Google 文档,您仍然可以轻松地向区块编辑器添加媒体等内容。只需将图片直接从计算机拖放到编辑器中,WordPress 就会将其转换为图片区块。
8. 设置查询循环
查询循环模块是一个特殊工具,它允许您根据定义的一组特定属性显示帖子列表。例如,您可以按价格分组显示产品网格,或者在商业目录中按位置列出公司。其用途可谓无穷无尽。
您只需在代码块插入器中搜索“查询循环”代码块,然后将其添加到您的页面或文章中。之后您会看到两个选项:“选择”和“从空白开始”。

当然,您可以从头开始创建自己的查询循环,但在这个示例中,我们将选择“选择”。我们选择了一个简单的列表样式数据源,然后点击右上角的齿轮图标打开查询循环模块设置。
切换“从模板继承查询”选项,即可显示更多自定义选项。在这里,您可以选择要显示的文章类型(文章、产品等),设置排序方式,并决定是否包含置顶文章。点击“筛选器”旁边的“+”号,您可以添加用于缩小内容显示范围的选项,例如分类、作者和关键词。这样,您就可以创建真正自定义的列表。

阅读我们关于查询循环块的完整指南。
9. 使用theme.json文件
theme.json文件将我们之前讨论过的全局样式概念进一步扩展。如果您是开发者,这将使您能够对模块和用户偏好设置进行更精细的控制。您可以在主题目录中找到此文件,该目录需要通过文件传输协议 (FTP) 或主机控制面板 (cPanel) 访问。
以下是使用theme.json文件的几种方法:
- 创建默认调色板
- 配置自定义字体大小
- 移除区块编辑器中的自定义颜色选项
- 启用或禁用用户可用于块的控件和选项。
如您所见,您可以使用此文件帮助用户或客户更轻松地在品牌或风格的框架内使用他们的网站。他们不会被过多的选项所困扰,而只会看到他们需要的控件。
了解更多关于theme.json文件的信息,并查看代码示例。
10. 锁块,用于固定和保护
如果你的网站有多个用户,你可能需要锁定某些你不希望被编辑或移动的区块。或者,这也可以防止你不小心自己做了更改!无论如何,这都是区块编辑器中一个实用且易用的功能。
您只需选中该区块,然后选择出现的工具栏右侧的三个垂直点。在新出现的下拉菜单中,选择“锁定”。

此时会弹出一个新菜单,您可以在其中禁用移动、阻止移除或同时禁用两者。配置这些设置后,点击“应用”。

保存页面后,此模块将被锁定!
核心模块列表
我们已经简单讨论过如何向库中添加代码块。但是,默认情况下有哪些代码块可用呢?让我们一起来看看。
文本块:
- 段落:添加标准文本段落
- 列表:创建项目符号列表或编号列表
- 标题:用标题分隔内容
- 表格:添加一个包含多列和多行的表格
- 引用:突出显示文本段落并添加出处
- 经典模式:以块形式使用经典编辑器
- 代码:请在您的网站上包含格式化的代码。
- 预格式化:添加文本,文本将按您输入的方式直接显示。
- 摘录:以比引用块更美观的方式强调文本。
- 诗歌:在你的网站上创作和排版诗歌
媒体块:
- 图片:在内容中添加图片
- 图库:创建精美的图片库
- 音频:将音频文件嵌入到您的内容中
- 封面:在视觉背景上添加内容块
- 文件:可下载文件的链接
- 媒体与文本:将媒体放置在文本块旁边。
- 视频:将视频嵌入到您的内容中
设计模块:
- 按钮:在按钮表单中添加一个或多个操作号召。
- 列:创建可视化列,并在每个列中插入块。
- 分组:将模块组合在一起,并根据需要进行自定义。
- 行:将积木并排排列
- 堆叠:将积木一个接一个地叠放在一起
- 更多:在存档页面上显示“阅读更多”链接
- 分页符:为页面或文章添加分页功能
- 分隔符:在两个色块之间添加一条线,以达到视觉分隔的效果。
- 间隔符:在各块之间留出空白。
小部件块:
- 存档:显示您帖子的按日期排序的存档。
- 日历:以日历格式显示您的帖子
- 分类:按分类列出文章
- 自定义 HTML:将 HTML 代码插入到您的页面或文章中
- 最新评论:显示读者的最新评论
- 最新文章:显示您最新的博客文章
- 页面列表:列出所有已发布的页面
- RSS:自行显示任何网站 RSS 源的内容
- 搜索:在网站的任何位置添加搜索功能
- 短代码:将 WordPress 短代码添加到您的内容中
- 社交图标:链接到您的社交媒体个人资料
- 标签云:向您的网站添加标签云
主题模块:
- 导航:编辑您网站的导航菜单
- 网站徽标:将您的徽标添加到您的网站
- 网站标题:显示您的网站名称
- 网站标语:显示您的网站标语
- 查询循环:根据特定参数显示帖子
- 文章列表:使用集成模式显示文章
- 头像:添加用户头像
- 文章导航链接:显示指向上一篇文章和下一篇文章的链接
- 评论:显示帖子评论
- 发表评论表单:显示评论表单
- 登录/退出:允许用户点击登录或退出。
- 术语描述:在分类法的存档页面上显示其描述
- 归档标题:在其归档页面上显示分类名称
- 搜索结果标题:在搜索结果上方显示标题
- 模板部件:向您的页面和文章添加模板部件
WordPress 区块编辑器还包含数十个嵌入区块,方便您轻松嵌入来自第三方平台的社交媒体动态、视频、播客、音乐等内容。请参阅WordPress 文档,查看完整列表以及所有默认区块的更多详细信息。
常见问题解答
还有疑问吗?下面我们来解答一些常见问题。
WordPress上的区块编辑器是免费的吗?
是的!由于 WordPress 安装默认包含区块编辑器,而 WordPress 本身是免费的,因此区块编辑器也是完全免费的。
WordPress默认自带区块编辑器吗?
是的,所有 WordPress 安装都会自动包含区块编辑器。
WooCommerce产品编辑器是否使用区块编辑器?
目前,WooCommerce 产品编辑器尚不支持区块编辑器。不过,WooCommerce 内置了一系列区块,您可以在文章、页面和其他内容中使用这些区块。您还可以使用站点编辑器自定义 WooCommerce 产品模板、归档页面、搜索结果等。
区块编辑器是否包含HTML编辑器?
是的,区块编辑器确实包含 HTML 编辑器。要访问它,只需打开您正在编辑的页面或文章,然后点击右上角的三个垂直点。接着,选择“代码编辑器”。现在您将看到页面内容以 HTML 代码的形式呈现,并可以进行相应的编辑。

块编辑器与经典的 TinyMCE 编辑器相比如何?
在区块编辑器发布之前,WordPress 使用的是 TinyMCE 编辑器,也称为经典编辑器。但区块编辑器的设计目标是比之前的解决方案更强大、更易用。
它比 TinyMCE 更直观易用,让初学者和开发者都能轻松构建美观复杂的页面和文章。此外,它还允许用户无需编写任何代码即可设计和自定义页眉、页脚和模板等元素。
WordPress区块编辑器与页面构建器相比有何不同?
使用区块编辑器而非 WordPress 页面构建器有很多好处。首先,区块编辑器完全免费,并且默认包含在 WordPress 中。这意味着您无需安装任何额外的插件即可使用它,也无需担心与 WordPress 核心或主要插件的兼容性问题。
有些页面构建器与特定主题绑定,因此如果您决定切换主题,则需要重新构建大部分甚至全部内容。但区块编辑器则不然。只要您使用的主题支持区块编辑器,即使切换主题,您的内容也基本保持不变。
由于区块编辑器是 WordPress 的核心功能之一,因此有很多扩展程序和插件可以扩展其功能。有了这些工具,您就能真正创造出独一无二的内容。
最后,使用区块编辑器创建的页面加载速度应该比使用页面构建器创建的页面更快。它的代码输出更轻量、更简洁,而且不需要任何占用服务器和数据库空间的插件。您可以在本文的“优缺点”部分查看更多信息。
WordPress区块编辑器会降低网站速度吗?
不,区块编辑器通常速度很快,不会拖慢您的网站。它内置于 WordPress 核心,因此经过高度优化。它生成的代码简洁高效。
网站速度慢通常是由其他因素造成的,例如第三方插件代码编写不佳、图片文件过大或网站托管速度慢。为了保持网站快速加载,请使用代码规范的插件,并在上传图片前进行优化。快速的网站对于提升访客体验和搜索引擎排名至关重要。
如果我从经典编辑器切换到区块编辑器,我的内容会丢失吗?
切换到区块编辑器后,您的内容不会丢失。WordPress 会自动将您的旧文章转换为“经典”区块。这意味着您现有的文本和图片在网站前端的显示效果将保持不变。
您可以选择将内容保留在经典区块中,或者将其转换为单独的区块以便更好地控制。建议将最重要的页面转换为单独的区块。这样,您就可以使用现代区块功能来更新设计和布局。
如何解决方块编辑器中常见的问题,例如方块无法加载?
如果区块编辑器无法正常工作,通常是插件冲突导致的。第一步是清除网站和浏览器缓存。
如果问题仍然存在,您应该暂时禁用所有插件。然后,逐个重新启用插件,直到编辑器再次出现故障。这有助于您找到导致冲突的插件。另一个常见原因是 WordPress 版本过旧或主题版本过低。请务必确保您的网站已完全更新,以避免此类问题。
区块编辑器能否很好地替代 Elementor 或 Divi 等页面构建器插件?
区块编辑器是许多页面构建器插件的强大替代品,尤其适合新建网站。它内置于 WordPress 中,这意味着它速度快、安全可靠,并且始终兼容。
页面构建器可能会添加额外的代码,从而降低网站速度,并可能导致“锁定”效应,使以后难以切换主题。对于大多数用户而言,区块编辑器配合优秀的区块主题,就能提供构建专业网站所需的所有工具,而无需页面构建器的额外负担。
我还能在区块编辑器中使用我最喜欢的组件吗?
是的,您仍然可以使用小部件,但它们在现代主题中的工作方式有所不同。使用区块主题和全站编辑功能时,没有传统的小部件区域。取而代之的是,您可以将任何区块放置在页眉、页脚或侧边栏的任何位置。
这包括一个特殊的“旧版组件”模块,允许您插入任何旧版组件。这种方法更加灵活,因为您不再局限于特定的组件可用区域。您可以在网站的任何位置使用模块的强大功能。
什么是 theme.json?它对区块编辑器为何如此重要?
theme.json 文件是区块主题的核心配置文件。它允许主题开发者和高级用户在一个地方控制整个网站的设置。
通过此文件,您可以定义网站的配色方案、字体大小、间距和默认区块样式。这确保了所有页面设计的一致性。普通用户无需直接编辑此文件。然而,它为站点编辑器中显示的全局样式选项提供技术支持,使其成为现代 WordPress 设计中至关重要的组成部分。