区块主题或页面构建器:实际有何变化
页面构建器会在 WordPress 中添加第二个编辑器,并以其专属格式保存布局,只有该插件能够读取。区块主题使用 WordPress 自带的编辑器,页面以标准区块标记保存。两者的差异体现在更换工具时。离开页面构建器通常意味着要逐页重新搭建,而核心区块在任何区块主题下都能继续正常渲染。速度取决于每个页面加载的内容。
第 1 部分:构建 WordPress 页面的两种方式
抛开营销宣传,您面前其实只有两种设计。
一款页面构建插件
页面构建器会为 WordPress 添加自己的编辑器、布局引擎和组件库。您在构建器的画布中进行设计,构建器则以其专有格式将结果保存在文章内。其样式表和脚本在前端运行,将该格式还原为页面。主题大多不会介入其中。
基于 WordPress 自带编辑器的区块主题
区块编辑器本身就是 WordPress 的一部分。区块以带有结构化注释的 HTML 形式保存,模板即区块模板,颜色和排版则来自一个 theme.json 文件,编辑器和前端都会读取该文件。像 Canvas 这样的区块主题,会在同一个编辑器中添加区块、模板和设置。它旁边并不另设其他系统。
两种方式今天下午都能做出一个网站。差异会在三年后显现,那时您的需求、主机或开发者可能已经改变。
第 2 部分:您的内容的保存方式
这是人们往往在最糟糕的时机才发现的部分,因此请从这里开始。
页面构建器的格式
页面构建器会以自有结构保存布局:短代码、序列化的设置数据,或文章元数据中的 JSON 数据块。插件启用时,页面显示效果很好。一旦停用,同一页面要么显示原始短代码,要么什么都不显示,因为世上没有其他程序能读取这种格式。迁移出去通常意味着逐页手动重建。
核心格式
区块标记是带注释的纯 HTML。在代码编辑器中打开一篇文章即可阅读。切换到其他区块主题后,核心区块依然能正常渲染,因为渲染器是 WordPress。这并非营销说辞,而是存储格式本身的特性。
Canvas 在自身层面同样注重这一点。每个 Canvas 区块都是已注册的区块类型,拥有真正的设置面板,而不是短代码,其属性也是普通的区块属性,因此图案、REST API 或命令行同样可以设置它们。区块位于 Canvas 插件中,因此更换主题不会把您的页面还原为纯文本。
坦白说,这种限制确实存在:您安装的任何区块库都是您现在所依赖的代码。两者的区别在于移除后留下的缺口大小。移除区块库后,使用其区块的部分将无法渲染。移除构建器后,整个页面都将无法渲染。
无论最终如何决定,都请先在暂存副本上测试。复制站点,停用布局工具,然后查看三个页面。你看到的内容即是迁出的真实成本,尽早了解更好。
第 3 部分:页面实际加载的内容
这个领域里关于速度的说法大多各执一词。其机制本身并不复杂,完全可以推理分析。
页面构建器是第二套布局引擎。它自带独立的 CSS 网格系统、动画库和 JavaScript,且往往在每个页面上加载,因为插件无法始终预先知道某个页面会用到哪些组件。这意味着在 WordPress 和您的主题之上,又多出一笔固定开销。
区块编辑器本身没有运行时。核心区块主要由 HTML 和 CSS 构成,而构建良好的区块主题在此基础上几乎不增加额外负担。Canvas 只加载页面实际包含的区块所需的 CSS 和 JavaScript,并提供 35 项可自由开关的优化,其中五项专门针对 WooCommerce 在不销售商品的页面上加载的脚本。
坦诚的看法
精心搭建的页面在优秀的构建工具中,可能胜过随意搭建的区块主题页面。布局工具只是多个因素之一,此外还有您的主机、图片、字体,以及您安装的其他十一个插件。选择机制更少的理由与基准测试截图无关。在您把注意力转向其他地方的那一天,机制越少,出问题的环节就越少。
第 4 部分:日常编辑的实际体验
这正是页面构建器赢得声誉的地方,也是两者差距缩小最多的地方。
编辑时查看真实页面效果
以往对区块编辑器的一项抱怨是,页面会以一个空白方框的形式打开,周围没有任何设计元素。Canvas 让编辑器渲染完整模板,因此页眉、滑块、页面标题区、内容和页脚都会出现在编辑画布中,并由绘制前台的同一套代码呈现。宽度和间距也与前台一致,因此全宽区块在编辑器中同样呈现为全宽。
设置位于您预期的位置
选中一个区块后,其面板会显示该区块支持的文本、链接、图片、图标、颜色、尺寸和行为设置。Canvas 会为站点上注册的每种区块类型(包括核心区块)添加同一个高级面板:进入和退出动画、仅作用于该区块的自定义 CSS、用于分析或测试的自定义属性,以及按角色或设备设置的显示条件。
避免重复劳动
有两套系统可以减少重复操作。“保存为默认值”会存储按个人习惯设置好的区块,之后插入的区块将从该设置开始。“全局区块样式”将一组设置命名为预设,可应用于整个站点,修改一次即可全局生效。模板和模板部件保存在 WordPress 的站点编辑器中,Canvas 共提供 173 个区块模板、5 个模板部件和 4 个样式变体。

第 5 部分:页面构建器目前仍更擅长的方面
如果一场对比在另一方找不到任何优点,那它就是广告。下面列出当下页面构建器确实领先的方面。
- 自由定位。在成熟的构建器中,将元素拖到任意位置或以一像素为单位微调,依然更加顺滑。区块编辑器更倾向于结构化而非绝对定位,这对团队协作更有利,但对一次性的首屏主视觉区域则不太合适。
- 生态深度。主流页面构建器多年来积累了大量第三方附加组件、市场和集成。如果您的工作流依赖某个特定附加组件,迁移前请先确认是否有对等的区块。
- 团队对此很熟悉。如果您的团队、客户,或您每周五雇用的自由职业者,五年来一直使用同一款构建器,那么这种熟练度就是实实在在的价值。重新培训需要付出代价,而这笔代价最终会落在您的下一个项目上。
- 各种设备均可单独设置。 一些构建器几乎对每个属性都提供手机和平板的设定值。Core 的选择更为精简,有时您需要借助自定义 CSS 字段来实现构建器中的某项控制。
- 一款产品满足所有需求。同时提供弹窗、表单和主题构建器的构建器,意味着只需对接一家供应商和一个支持团队。Canvas 的做法是自行提供同样的组件,但这一观点相对于纯区块主题而言是成立的。
- 界面的稳定性。区块编辑器会随每次 WordPress 发布而变化,页面构建器则取决于其供应商何时做出改变。如果界面的频繁变动影响了客户,这一点就很重要。
这些都不是避开区块主题的理由。它们的作用是让您睁大眼睛做出决定,并对任何把某一栏涂得更绿的对比表保持警惕。
第 6 部分:切换的真实成本
如果您现有的网站是使用页面构建器搭建的,坦白地说,迁移意味着重新构建,而不是转换。请为此合理预留预算。
- 内容可以迁移,布局无法迁移。文字和图片属于您,可以随意带走。排版属于页面构建器,需要重新搭建。
- 逐页进行。先从能带来收益的页面开始:首页、主要落地页和联系页面。把旧文章的归档页留到最后,因为它们通常只是普通内容。
- 从演示站点开始,而不是从空白页面开始。导入完整的演示网站会提供一套可编辑的成品设计,如果您改变主意,整个导入过程可以回滚。
- 在完成之前,请保持构建器处于安装状态。 只有在没有任何线上页面依赖它时才停用,之后请使用链接检查工具检查站点。
- 除非必要,否则不要做任何重定向。 保持原有 URL 不变,即可保留随之而来的搜索排名。
前两个页面可能会比较慢,因为您需要先熟悉区块、图案和模板层,之后便会逐渐形成节奏。日后节省的大部分时间,来自无需在每个项目中重复搭建页眉和页脚。
第 7 部分:如何决策
回答以下五个问题,诚实作答,通常就能自然做出决定。
- 两年后谁来编辑这个网站?如果答案是客户、实习生,或者不固定的某人,那么 WordPress 自带的编辑器,就是他们最有可能熟悉的工具。
- 您需要维护多少个网站?一个个人网站可以承载任意数量的额外组件。二十个客户网站则不然,每增加一层,都可能变成一张等待提交的支持工单。
- 您的设计是非常规还是常规? 常规页面结构正是区块、模式和模板最擅长的。而多层级、需要艺术指导的一次性设计,在页面构建器中可能仍然更快。
- 你的退出计划是什么?如果答案是“没有退出计划”,请选择 WordPress 本身可以读取的格式。
- 究竟在为什么付费? 请比较总成本:主题、构建器、表单插件、弹窗插件、滑块插件,以及每一项的续费费用,并与一款涵盖这些功能的产品进行对比。
如果候选名单中已有某个构建器,我们的两篇对比文章会针对具体产品提出这些问题:Canvas 作为 Elementor 替代方案,逐套餐进行比较;以及Canvas 与 Divi 的对比,涵盖编辑体验、锁定问题,以及许可证到期后的情况。两篇文章均列出了数据来源及数据读取日期。
Canvas 是这份清单的区块主题解决方案:您已在使用的插入器中有 209 个区块,另有 183 个模式、173 个模板、页眉和页脚构建器、表单,以及 88 个可直接开始使用的完整演示站点。如果您更想直观了解两者的区别,而不只是阅读介绍,不妨打开一个演示站点,点进任意页面看看。
来源
凡本指南涉及 Canvas 本身之外的内容,以下为相关的官方文档页面。
- 区块的标记表示developer.wordpress.org · 区块以 HTML 形式存储,并通过注释标记每个区块的开始和结束位置
- theme.json 简介developer.wordpress.org · theme.json 中的设置和样式同时作用于前台和编辑器
- 什么是主题?developer.wordpress.org · 区块主题由区块模板构建,保存在插件中的功能在更换主题后依然保留
- 模板入门developer.wordpress.org · 站点编辑器会将模板和模板部件以区块标记形式保存到数据库中
接下来可以做什么
两份指南介绍如何运用区块方法,以及其背后的区块库。
基于区块的主题是否比页面构建器更快?
不是。持相反观点的人,无非是在推销什么。速度取决于页面输出多少 CSS、JavaScript 和标记代码,而不取决于工具所属的类别。区块主题能让您更快得到轻量页面:没有第二套布局引擎,而在 Canvas 中,页面只加载其所含区块所需的资源,另加 35 个开关控制其余部分。请在改动前后分别测量您自己的页面。在亲自测量之前,两种说法都不要轻信。
如果我停止使用 Canvas,我的页面会失效吗?
核心区块在任何主题下都能正常渲染,因为您的内容以标准区块标记保存,而这正是 WordPress 本身所读取的格式。Canvas 区块来自 Canvas 插件,因此更换主题后,这些区块仍会保留在您的文章和页面中。如果同时删除该插件,这些特定板块将无法渲染,这适用于任何区块库。
我可以在 Canvas 上运行页面构建器吗?
页面构建器本身是一个插件,您当然可以安装一个。但我们不建议这样做:您将在同一个网站上同时维护两套布局系统、两套样式系统和两个更新周期,而您为 Canvas 付费获得的模板、页眉与页脚等界面框架以及区块则会闲置在一旁。
不使用页面构建器,我需要懂代码吗?
否,不使用页面构建器也能搭建 Canvas 站点,无需编写代码。Canvas 页面的每个部分都是带设置面板的区块,包括页眉、页脚和页面标题。高级面板可为站点上的所有区块类型添加动画、自定义 CSS、自定义属性和显示条件。自定义 CSS 字段仅在需要时使用,并非产品本身的必需功能。
使用 Canvas 构建您的下一个网站
无论是新手、自由职业者还是代理机构,获得的区块与演示站点都完全相同。可以从一个网站开始,并在同一许可证下按需搭建任意数量的网站。
