使用单个 JSON 文件设计基于块的 WordPress 子主题

已发表: 2021-10-26

从我在 2008 年开设第一家主题店的那一刻起,一直到现在,我只是一个修修补补的人,我的计划一直是在 CSS Zen Garden 的模型中构建一个单一的主题。 这是 Dave Shea 在 2000 年代初发起的一个项目,旨在展示设计师如何仅通过 CSS 来操作网站。 HTML 将保持不变,但设计可以​​是任何东西。

我已经通过几个项目多次实现了这个目标。 从技术上讲,我所需要的只是 WordPress 主题中的架构声音标记和子主题中的自定义 CSS。

这个概念很简单,但随着时间的推移,我的愿景发生了变化。 我想创造一些东西,让设计这些类型的儿童主题变得更加容易。 因此,我构建了自定义系统来解决 WordPress 在主题设计领域缺乏工具的问题。 不要吹嘘太多,但我觉得我创造了一些方便的方法。 他们允许儿童主题设计师将值插入配置文件,例如字体系列名称和颜色代码。 其中大部分也可以由最终用户通过定制器覆盖。

到 2018 年,我已经在努力研究我的巨著,这是我构建过的最好的 WordPress 主题。 我还计划将它作为我的最后一次。 一段时间以来,我一直在考虑退出游戏。 但是,这是一个我必须看透的项目。

然后,新的块编辑器炸毁了一切。 在它发布之前我已经使用它几个月了,但我知道主题开发永远不会一样。 Gutenberg 项目将继续成熟并重塑 WordPress 的未来。

我最终启动了我的主题。 它是最早支持新区块系统的商业产品之一。 然而,我也泄气了。

这些是早期的块编辑器时代。 没有人真正知道我们会在三年或更长时间内看到什么,但如果你稍微关注一下,你就会发现主题化会演变成与当时大不相同的东西。 我花了一年多的时间构建了一个主题系统,该系统很快就会变得无关紧要——当然,我认为我们会更早到达这个目的地。

WordPress 5.9 将发布完整站点编辑的最终子组件。 这将包括对引擎盖下的块主题的支持。 安装它们的用户可以通过站点编辑器和全局样式界面自定义它们。

最让我兴奋的还是13年前每天早上把我吵醒的东西:儿童主题。

阻止子主题在 Gutenberg 插件中已经部分工作了几个月。 然而,我最期待的功能直到一周前才准备好。 新补丁允许子主题覆盖其父主题的单个值theme.json文件。 本质上,这两个文件被合并,子文件优先。

为什么我对这个功能如此兴奋? 因为它与我在过去几年建立的系统相同——但更好。

在 Gutenberg 的开发版本中看到这片土地后,我做的第一件事就是加载一个我一直在涉足的自定义主题。 这是我一直在构建的一个项目,目的是为了乐趣和对我自己的启发。

在白色背景上展示黑色文本的单个演示帖子。
父主题的单一帖子视图。

然后,我在代码编辑器中创建了一个新项目。 我添加了所需的style.css文件并插入了相应的标题字段。 除此之外,我不需要它。 我的孩子主题的设计将完全依赖于另一个功能。

我在子主题的根级别添加了一个theme.json ,并开始获得比我在很长一段时间内获得的更多乐趣。

我挑选了几个秋天的颜色和一个有趣的标题字体。 几分钟之内,我的测试装置上溅了一层新油漆。 设计不是革命性的或类似的东西。 我只是惊讶于通过插入一些值来改变我的设计是多么容易。

显示单个帖子的棕色和橙色的秋季风格儿童主题。
子主题的单个帖子视图。

这是我一直渴望的儿童主题类型。 我希望能够在不同的季节和假期切换我的主题的设计元素。 我希望能够与他人分享这些儿童主题。

正如我所说,我之前已经构建过这样的子主题化方法(我使用 PHP 而不是 JSON)。 但是,这要强大得多,因为它依赖于标准块系统,而不是只有少数人会使用的自定义。

你们中的一些人可能会问为什么我没有通过站点编辑器进行这些更改,而是创建一个子主题。 Rich Tabor 今天早些时候在 Twitter 上提出了同样的问题。 “如果一个主题包含可以通过全局样式修改的 JSON 和块模板,那么子主题有什么用?”

假设我安装了一个块主题并进行了一些颜色调整。 现在,假装我想在圣诞节来临之际把它混合起来——加入几种颜色并找到一种节日字体。 当我进行这些更改时,当赛季结束时,我的旧设计将不再存在,因为用户自定义是基于活动主题存储的。 当然,我可以记下我所有的旧设置,然后再将它们全部改回来。 但是,通过子主题进行操作意味着我只能随时切换主题。 我的旧设置将保持不变。

也许这在很大程度上是一个边缘案例。 这些天谁在对他们的设计进行季节性更改,对吧?

令人兴奋的部分是我可以与其他人共享使用单个 JSON 文件构建的子主题。

自从该功能登陆 WordPress 以来,儿童主题一直是我的热情所在。 在某些方面,它并没有太大变化。 Themers 仍然可以覆盖父级的模板。 如果他们愿意,他们可以继续添加自定义 CSS。 但现在,他们可以从单个标准化文件配置设计的任何部分。 这是值得让我的开发人员重新考虑并构建另一个主题的事情。

我还看到了一个没有儿童主题的未来,它仍然具有共享设计元素的相同好处。

块模式目录已经提供了可以与任何构建良好的 WordPress 主题一起使用的布局。 但是,我们将来可能会拆分其他设计组件。

我想象未来 WordPress 可以像 Color Lovers 提供的那样拥有可安装的调色板。 只需浏览目录、安装和更改配色方案,无需找到新主题。 类似于最近的 Adrian 插件的东西可以为字体提供相同的目的。 这些是社区可能想要考虑的事情。 在这一点上,不应该有任何想法。

现在,我很高兴拥有儿童主题的全部功能。 这一变化应该在本周的 Gutenberg 11.8 和今年晚些时候的 WordPress 5.9 中实现。