区块主题是一种使用块状结构的WordPress主题。你可以在网站编辑器中编辑一个区块主题的所有部分。
WordPress从5.9版本开始支持区块主题,在5.8版本中通过Gutenberg插件提供有限的支持。与样式界面一起,区块主题是全站编辑的一部分。它们有时被称为全站编辑主题。了解全站编辑的背景。
你可能还有兴趣阅读关于区块主题的支持文章。
在手册的这一部分,你将了解到:
- 经典主题和区块主题之间的区别
- 区块主题设置
- 模板和模板片段
- theme.json 配置文件
- 将经典主题转换为区块主题
本章的先决条件:主题基础知识
区块主题的好处
为什么要创建区块主题?虽然WordPress继续支持经典主题,但区块主题的建立是为了提高可扩展性和性能。
- 区块主题通过只为页面上已呈现的区块加载样式来提高加载性能
- 区块主题不需要为前端和编辑人员手动引入样式表
- Theme.json处理add_theme_support()的所有方面
- 无障碍功能,如跳到内容、键盘导航和地标等,都是自动生成的,无需添加额外代码
- 通过一个区块主题,用户可以在没有代码的情况下编辑他们网站的所有部分
- 通过使用样式界面,用户可以为网站和区块定制颜色和排版
经典主题和区块主题的异同点
许多概念和功能对于经典主题和区块主题都是相同的,在某些情况下,手册会提到关于经典主题的章节。
对于习惯于创建经典主题的主题开发者,有一个比较表:
经典主题: | 区块主题: |
使用PHP文件来显示内容和各部分 | 使用HTML文件来显示区块。 如果WordPress找不到HTML文件,则使用PHP文件作为后备方案。 single.html相当于使用single.php |
使用模板层次结构 | 使用模板层次结构 |
使用PHP函数如模板标签来显示内容 | 全部使用区块 文章内容区块相当于使用 the_content() . |
使用PHP函数使文本可翻译 | HTML文件中的文本是不能翻译的。 区块模式可以使用PHP函数来使文本可翻译。 |
使用PHP函数进行if/else 条件判断 | 使用区块设置来实现不同的结果 |
使用循环来显示不同的文章和文章类型 | 使用查询块和文章模板块 |
可以使用侧边栏和小工具 | 使用区块而不是小工具。WordPress中的小工具已经被转换为区块。 |
可以使用定制器 | 使用网站编辑器,可以选择性地启用定制器菜单 |
必须注册导航菜单来自定义菜单 | 使用导航区块 |
可以注册自定义页眉 | 使用区块来完全定制网站的页眉,包括图片 |
可以注册自定义logo | 使用网站logo区块 |
可以引入CSS和javascript | 可以引入CSS和javascript,但更多地依赖于区块和theme.json配置文件 |
可以使用theme.json,但主题作者需要为前台引入样式 | 可以使用theme.json,并且样式会自动引入到编辑器和前台 |
可以将模板文件放在根目录中 | 将模板文件放在templates文件夹 |
可以将模板片段放在任意目录 | 将模板片段放在parts文件夹 |
不能在网站编辑器中创建和编辑404和存档页等网站模板 | 可以在网站编辑器中创建和编辑如404和存档页等网站模板 |
可以在主题有支持的模板编辑器中创建和编辑区块模板 | 可以在模板编辑器中创建和编辑区块模板 |