# 区块主题或页面构建器：实际有何变化 URL: https://canvaswp.com/zh-hans/guides/block-theme-vs-page-builder/ Updated: 2026-11-03 指南 页面构建器会在 WordPress 中添加第二个编辑器，并以其专属格式保存布局，只有该插件能够读取。区块主题使用 WordPress 自带的编辑器，页面以标准区块标记保存。两者的差异体现在更换工具时。离开页面构建器通常意味着要逐页重新搭建，而核心区块在任何区块主题下都能继续正常渲染。速度取决于每个页面加载的内容。 发布于 2026年9月5日 更新于 2026年11月3日 由 SemiColonWeb 的 Canvas 团队撰写 ## 第 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 在不销售商品的页面上加载的脚本。 ### 坦诚的看法 精心搭建的页面在优秀的构建工具中，可能胜过随意搭建的区块主题页面。布局工具只是多个因素之一，此外还有您的主机、图片、字体，以及您安装的其他十一个插件。选择机制更少的理由与基准测试截图无关。在您把注意力转向其他地方的那一天，机制越少，出问题的环节就越少。 [Canvas 如何衡量性能](https://canvaswp.com/zh-hans/performance/) [面向开发者的 Canvas 区块主题](https://canvaswp.com/zh-hans/solutions/developers/) ## 第 4 部分：日常编辑的实际体验 这正是页面构建器赢得声誉的地方，也是两者差距缩小最多的地方。 ### 编辑时查看真实页面效果 以往对区块编辑器的一项抱怨是，页面会以一个空白方框的形式打开，周围没有任何设计元素。Canvas 让编辑器渲染完整模板，因此页眉、滑块、页面标题区、内容和页脚都会出现在编辑画布中，并由绘制前台的同一套代码呈现。宽度和间距也与前台一致，因此全宽区块在编辑器中同样呈现为全宽。 ### 设置位于您预期的位置 选中一个区块后，其面板会显示该区块支持的文本、链接、图片、图标、颜色、尺寸和行为设置。Canvas 会为站点上注册的每种区块类型（包括核心区块）添加同一个高级面板：进入和退出动画、仅作用于该区块的自定义 CSS、用于分析或测试的自定义属性，以及按角色或设备设置的显示条件。 ### 避免重复劳动 有两套系统可以减少重复操作。“保存为默认值”会存储按个人习惯设置好的区块，之后插入的区块将从该设置开始。“全局区块样式”将一组设置命名为预设，可应用于整个站点，修改一次即可全局生效。模板和模板部件保存在 WordPress 的站点编辑器中，Canvas 共提供 173 个区块模板、5 个模板部件和 4 个样式变体。 **站点编辑器。**模板和模板部件仍保存在 WordPress 原有的位置，而不是我们提供的设置界面中。 ## 第 5 部分：页面构建器目前仍更擅长的方面 如果一场对比在另一方找不到任何优点，那它就是广告。下面列出当下页面构建器确实领先的方面。 - **自由定位。**在成熟的构建器中，将元素拖到任意位置或以一像素为单位微调，依然更加顺滑。区块编辑器更倾向于结构化而非绝对定位，这对团队协作更有利，但对一次性的首屏主视觉区域则不太合适。 - **生态深度。**主流页面构建器多年来积累了大量第三方附加组件、市场和集成。如果您的工作流依赖某个特定附加组件，迁移前请先确认是否有对等的区块。 - **团队对此很熟悉。**如果您的团队、客户，或您每周五雇用的自由职业者，五年来一直使用同一款构建器，那么这种熟练度就是实实在在的价值。重新培训需要付出代价，而这笔代价最终会落在您的下一个项目上。 - **各种设备均可单独设置。** 一些构建器几乎对每个属性都提供手机和平板的设定值。Core 的选择更为精简，有时您需要借助自定义 CSS 字段来实现构建器中的某项控制。 - **一款产品满足所有需求。**同时提供弹窗、表单和主题构建器的构建器，意味着只需对接一家供应商和一个支持团队。Canvas 的做法是自行提供同样的组件，但这一观点相对于纯区块主题而言是成立的。 - **界面的稳定性。**区块编辑器会随每次 WordPress 发布而变化，页面构建器则取决于其供应商何时做出改变。如果界面的频繁变动影响了客户，这一点就很重要。 这些都不是避开区块主题的理由。它们的作用是让您睁大眼睛做出决定，并对任何把某一栏涂得更绿的对比表保持警惕。 ## 第 6 部分：切换的真实成本 如果您现有的网站是使用页面构建器搭建的，坦白地说，迁移意味着重新构建，而不是转换。请为此合理预留预算。 - **内容可以迁移，布局无法迁移。**文字和图片属于您，可以随意带走。排版属于页面构建器，需要重新搭建。 - **逐页进行。**先从能带来收益的页面开始：首页、主要落地页和联系页面。把旧文章的归档页留到最后，因为它们通常只是普通内容。 - **从演示站点开始，而不是从空白页面开始。**导入完整的演示网站会提供一套可编辑的成品设计，如果您改变主意，整个导入过程可以回滚。 - **在完成之前，请保持构建器处于安装状态。** 只有在没有任何线上页面依赖它时才停用，之后请使用链接检查工具检查站点。 - **除非必要，否则不要做任何重定向。** 保持原有 URL 不变，即可保留随之而来的搜索排名。 前两个页面可能会比较慢，因为您需要先熟悉区块、图案和模板层，之后便会逐渐形成节奏。日后节省的大部分时间，来自无需在每个项目中重复搭建页眉和页脚。 ## 第 7 部分：如何决策 回答以下五个问题，诚实作答，通常就能自然做出决定。 - **两年后谁来编辑这个网站？**如果答案是客户、实习生，或者不固定的某人，那么 WordPress 自带的编辑器，就是他们最有可能熟悉的工具。 - **您需要维护多少个网站？**一个个人网站可以承载任意数量的额外组件。二十个客户网站则不然，每增加一层，都可能变成一张等待提交的支持工单。 - **您的设计是非常规还是常规？** 常规页面结构正是区块、模式和模板最擅长的。而多层级、需要艺术指导的一次性设计，在页面构建器中可能仍然更快。 - **你的退出计划是什么？**如果答案是“没有退出计划”，请选择 WordPress 本身可以读取的格式。 - **究竟在为什么付费？** 请比较总成本：主题、构建器、表单插件、弹窗插件、滑块插件，以及每一项的续费费用，并与一款涵盖这些功能的产品进行对比。 如果候选名单中已有某个构建器，我们的两篇对比文章会针对具体产品提出这些问题：[Canvas 作为 Elementor 替代方案](https://canvaswp.com/zh-hans/compare/elementor/)，逐套餐进行比较；以及 [Canvas 与 Divi 的对比](https://canvaswp.com/zh-hans/compare/divi/)，涵盖编辑体验、锁定问题，以及许可证到期后的情况。两篇文章均列出了数据来源及数据读取日期。 Canvas 是这份清单的区块主题解决方案：您已在使用的插入器中有 209 个区块，另有 183 个模式、173 个模板、页眉和页脚构建器、表单，以及 88 个可直接开始使用的完整演示站点。如果您更想直观了解两者的区别，而不只是阅读介绍，不妨打开一个演示站点，点进任意页面看看。 ## 来源 凡本指南涉及 Canvas 本身之外的内容，以下为相关的官方文档页面。 - [区块的标记表示](https://developer.wordpress.org/block-editor/getting-started/fundamentals/markup-representation-block/) developer.wordpress.org · 区块以 HTML 形式存储，并通过注释标记每个区块的开始和结束位置 - [theme.json 简介](https://developer.wordpress.org/themes/global-settings-and-styles/introduction-to-theme-json/) developer.wordpress.org · theme.json 中的设置和样式同时作用于前台和编辑器 - [什么是主题？](https://developer.wordpress.org/themes/getting-started/what-is-a-theme/) developer.wordpress.org · 区块主题由区块模板构建，保存在插件中的功能在更换主题后依然保留 - [模板入门](https://developer.wordpress.org/themes/templates/introduction-to-templates/) developer.wordpress.org · 站点编辑器会将模板和模板部件以区块标记形式保存到数据库中 后续步骤 ## 接下来可以做什么 两份指南介绍如何运用区块方法，以及其背后的区块库。 [指南 **WordPress 主题或网站构建器** 托管平台与搭配主题的 WordPress 对比，以及最终的所有权归属。](https://canvaswp.com/zh-hans/guides/wordpress-theme-vs-website-builder/) [指南 **无需插件构建页眉** 大多数人以为需要页面构建器或页眉插件才能完成的任务。](https://canvaswp.com/zh-hans/guides/build-a-wordpress-header-without-a-plugin/) [产品 **区块库** 314 个区块，分属 10 个系列，每个都可直接在侧边栏中编辑。](https://canvaswp.com/zh-hans/blocks/) 常见问题 ## 常见问题 [完整的常见问题](https://canvaswp.com/zh-hans/faq/)可解答其他疑问，[文档](https://docs.canvaswp.com/)详细介绍了每项设置。 **基于区块的主题是否比页面构建器更快？** 不是。持相反观点的人，无非是在推销什么。速度取决于页面输出多少 CSS、JavaScript 和标记代码，而不取决于工具所属的类别。区块主题能让您更快得到轻量页面：没有第二套布局引擎，而在 Canvas 中，页面只加载其所含区块所需的资源，另加 35 个开关控制其余部分。请在改动前后分别测量您自己的页面。在亲自测量之前，两种说法都不要轻信。 **如果我停止使用 Canvas，我的页面会失效吗？** 核心区块在任何主题下都能正常渲染，因为您的内容以标准区块标记保存，而这正是 WordPress 本身所读取的格式。Canvas 区块来自 Canvas 插件，因此更换主题后，这些区块仍会保留在您的文章和页面中。如果同时删除该插件，这些特定板块将无法渲染，这适用于任何区块库。 **我可以在 Canvas 上运行页面构建器吗？** 页面构建器本身是一个插件，您当然可以安装一个。但我们不建议这样做：您将在同一个网站上同时维护两套布局系统、两套样式系统和两个更新周期，而您为 Canvas 付费获得的模板、页眉与页脚等界面框架以及区块则会闲置在一旁。 **不使用页面构建器，我需要懂代码吗？** 否，不使用页面构建器也能搭建 Canvas 站点，无需编写代码。Canvas 页面的每个部分都是带设置面板的区块，包括页眉、页脚和页面标题。高级面板可为站点上的所有区块类型添加动画、自定义 CSS、自定义属性和显示条件。自定义 CSS 字段仅在需要时使用，并非产品本身的必需功能。