面向开发者的 Canvas

面向开发者的 WordPress 区块主题,基于 theme.json 构建

Canvas 是一款 WordPress 主题,外加一个配套插件,而且从头到尾都是区块主题。模板是区块模板,样式来自 theme.json,编辑器保存到数据库中的内容,与其他任何区块主题读取的区块标记完全相同。这里的一切都不依赖页面构建器。

更新于

架构

区块主题,在 WordPress 原生的编辑位置中修改

主题提供模板、模板部件和样式变体;插件则提供区块库、构建器、表单、SEO 与性能相关功能以及演示导入器。模板和全局样式都保留在站点编辑器中,因此网站的任何内容都不会藏在我们的设置面板里。

  • 173 个区块模板和 5 个模板部件,均可在站点编辑器中编辑
  • 4 种样式变体,包括深色和午夜色,可在站点编辑器中切换
  • 颜色与排版通过 theme.json 统一应用,因此编辑器中显示的字体与前端一致
  • 183 个区块模式,以一次性副本的形式插入标记代码
  • 打开页面时,整个模板会围绕您正在编辑的内容完整呈现。

在编辑器与站点编辑器中

显示 Canvas 模板和样式变体的 WordPress 站点编辑器
模板、模板部件和全局样式仍保留在站点编辑器中,也就是 WordPress 原本的存放位置。
内容

最终存入数据库的是区块标记

选择区块主题的理由并不在于功能列表,而在于五年之后你手里留下的是什么。

没有专有格式

Canvas 编辑标准的 WordPress 区块,没有自有格式,因此即使主题日后更换,文章和页面的内容也能保留。无需记忆短代码,也无需打开代码视图。

设置而非代码片段

访客看到的所有内容都可以通过区块设置面板进行调整。当演示站点需要某项区块无法直接表达的功能时,该区块会新增相应设置,而页面从不会直接加入原始 HTML。

每个区块上的高级面板

编辑器中的每个区块(包括核心区块和第三方区块)都可添加动画、显示条件、自定义类、自定义属性以及区块级自定义 CSS。

资源跟随页面

页面只会加载其所含区块的 CSS 和 JavaScript,因此定价页面永远不会加载滑块脚本。另外有 35 项优化只是开关,无需安装任何插件。

从其他主题迁移过来?Elementor 和 Divi 使用各自的编辑器构建页面,因此构建器一旦移除,布局也会随之消失:请参阅Elementor 站点迁移后保留哪些内容,以及Divi Builder 的对比情况。Kadence 和 GeneratePress 同样基于区块编辑器构建,其区块包含在免费插件中(Canvas 与 Kadence 对比、Canvas 与 GeneratePress 对比),而Blocksy 将其页眉构建器保留在定制器中。

区块主题与页面构建器对比

站点框架

页眉和页脚构建器以模板部件的形式呈现

页眉、页脚、顶部栏、超级菜单、侧边面板和页面标题都是由区块构建的记录,它们通过主题自身的模板部件呈现在前端。页眉部件会渲染页面所分配的页眉,页脚部件会渲染所分配的页脚记录。这样站点编辑器便能识别它们,并使区块设置与其他位置保持一致。

  • 页眉构建器背后有 22 个页眉区块和 94 个页眉选项
  • 可全局指定页眉,也可在单个页面上单独覆盖,页脚、顶栏、超级菜单、侧边面板和页面标题同样支持。
  • Hero 和滑块同样属于记录,由模板中的插槽区块放置。
  • 两个插槽区块都会在编辑画布中渲染,因此页面打开时即可呈现访客实际看到的版块

页眉构建器的工作原理

在 WordPress 区块编辑器中由页眉区块组装而成的页眉记录
页眉是由区块组成的记录,通过 Header 模板部件渲染。
WooCommerce

24 个商店区块与 18 个商店模板

WooCommerce 为可选项,安装后由区块和模板提供支持,无需维护需要同步的模板覆盖文件。

24

商店区块

用于商品页、商店网格、购物车和结账页面的区块,另有颜色色板,并支持无需刷新页面即可加入购物车。

18

商店模板

用于商店、产品、购物车、结账和账户页面的模板,可与其他模板一样在站点编辑器中编辑。

21

演示商店

在 88 个演示站点中,有 21 个可完整导入为商店,商品、分类、属性和结账流程均已就绪。

购物者所见的服装店演示站点首页,包含全屏幻灯片和页眉中的购物车
家具演示站点的首页,这是一个提供家具销售和租赁服务的 WooCommerce 商店

21 个商店演示站点中的两个,基于商店区块和模板运行。

WooCommerce 区块

扩展功能

如您需要,设置向导可生成子主题

只有在计划直接编辑 Canvas 模板文件时才需要创建子主题,因为这样可以确保这些编辑在更新时保持安全。设置向导会在演示导入之前的独立步骤中提供此选项,将其写入您的主题文件夹并启用,之后您的站点外观保持不变。大多数站点并不需要它,因为常见的原因现在都可以通过设置来解决。

  • 全站自定义 CSS,以及用于头部和页脚的自定义 JavaScript,位于主题选项的 Misc 部分
  • 区块级自定义 CSS,以属性与值的组合书写,不含选择器
  • 按区块设置的自定义属性,每行一项,以键和值的形式填写,支持 data 和 aria 属性
  • 为您指定的任意选择器设置自定义排版规则,位于“排版”部分。
  • 通过内置的 4 个图标包所使用的同一界面,注册您自己的图标包
  • 将整套主题选项配置导出为文件,并导入到下一个站点

主题选项的每个部分

WordPress 编辑器中打开高级选项的 Canvas 区块设置面板
高级面板适用于每个区块,包括核心区块和其他插件提供的区块。
运行环境

Canvas 需要什么,以及它在接入过程中会做哪些事

这些最低要求是实打实的,并非建议。Canvas 会自行对照您的主机进行检查,因此您不会在导入失败后才得知问题。

WordPress 7.1 或更高版本 PHP 7.4 或更高版本 已测试兼容至 WordPress 7.1 WordPress 自带的区块编辑器和站点编辑器 WooCommerce 可选
  • Canvas Core 无需单独下载:许可证激活后,它会直接从 WordPress 内部安装,因此无需管理版本配对
  • 更新通过 WordPress 更新屏幕提供,并包含维护模式、临时备份,以及可直接在 WordPress 中回滚。
  • 自动更新仅涵盖补丁版本,默认开启且可通过开关关闭;若某个版本修改了您自定义过的模板,发布说明中会注明该模板
  • “健康检查”界面会根据您的实际主机检测服务器要求,并报告需要关注的事项,相同的检查项也会显示在 WordPress 站点健康中
  • 所有字符串均可翻译,主题和插件的翻译模板会随每次发布重新生成,插件中还包含 WPML 配置文件
  • 技术 SEO、XML 站点地图以及 16 种结构化数据类型均在渲染时从您的内容中自动生成

388 篇文档文章,根据已发布的代码生成

常见问题

技术问题解答

开发者在正式启动项目前会检查的五件事,其中也包括 Canvas 不做的那一件。

Canvas 是区块主题还是页面构建器主题?

Canvas 是一款完全由区块构建的 WordPress 主题,WordPress 将其称为区块主题。模板为 WordPress 区块模板,模板部件则为 WordPress 模板部件。颜色和排版通过 theme.json 统一管理,所有内容都在 WordPress 随附的区块编辑器和站点编辑器中编辑。无需安装独立的页面构建器,无需学习第二套编辑器,也无需续订页面构建器订阅。

如果以后更换主题,标记代码会怎样?

它保持标准的 WordPress 区块标记,因为这正是 Canvas 保存的内容。其他主题无法识别的 Canvas 区块会停止渲染其设计,但标题、段落、图片和列表都是核心区块,在任何地方都能正常读取。内容不会以简码或专有布局格式存储。

页眉和页脚究竟在哪里渲染?

这些功能通过 Canvas 注册的模板部件实现,共有 5 个:页眉、页脚、页面标题、侧边栏和备用侧边栏。页眉部件会渲染页面所分配的页眉记录,页脚部件会渲染所分配的页脚记录,页面标题部件会渲染页面标题设置所解析出的内容。这些部件只是底层机制,真正的设计来自您用 22 个页眉区块构建的记录。

我需要子主题吗?

仅当您打算直接编辑 Canvas 模板文件时才需要。子主题正是用来保护这些文件不被更新覆盖的。设置向导会在可选的“子主题”步骤中为您创建一个子主题,并将站点切换到该子主题;您也可以自行将 Canvas 内附的子主题文件夹复制到主题目录中。大多数站点都用不到它:主题选项负责全站设置,每个区块的自定义 CSS 和自定义属性负责区块级别的调整,全站的自定义 CSS 与 JavaScript 字段则位于主题选项的“杂项”部分中。

Canvas 是否为从右到左书写方向的主题?

是的,每个 Canvas 样式表都有对应的从右到左镜像版本,当网站以阿拉伯语、希伯来语、波斯语或其他从右到左的语言运行时,WordPress 会自动加载它。在全部 88 个演示站点中,有 88 个在发布前经过了从右到左检查,因此菜单、网格和表单都位于正确的一侧。翻译同样完整:两部分产品都附带翻译模板,插件中也包含 WPML 配置文件。

一款可以交给任何人使用的区块主题

Canvas 基于 WordPress 自带的编辑器构建,保存标准的区块标记,并将模板保存在站点编辑器中。为客户建站?请阅读 代理机构 和 自由职业者 页面。