社区新闻

以模式优先的思维创建主题

查看官方原文 ↗ 发布于

在WordPress的大部分历史中,经典主题开发是一种模板优先的方式。模板包含了最终将出现在任何前端页面上的文档结构。然而,区块范式允许我们重新思考开发者如何创建主题。

越来越容易看出,模式几乎可以完全取代模板过去扮演的角色。归根结底,前端代码通常是一堆相同或相似代码的重复组合(即模式)。在Web和WordPress的大部分历史中,解决前端问题的一半战斗都围绕着寻找减少重复代码的新颖独特方法。这就是所谓的DRY(Don’t Repeat Yourself)原则。

模式非常符合这一模式,但大多数WordPress区块主题都未能充分利用模式。这是可以理解的。区块主题时代仍处于早期阶段,创作者尚未完善他们如何使用现有工具进行构建。

关于模式的大多数使用都集中在它们的注册上,以便用户可以通过简单的点击插入器构建自定义页面。然而,需要进一步讨论主题作者本身如何以及应该如何在相同的基础上构建他们的主题。

可以将其视为主题创建过程中的一种模式优先思维。

Twenty Twenty-Two主题的页眉和页脚模板部件中,已经有一些这种方法的迹象:

WordPress模板编辑器,画布中有一个页眉模板。左侧显示了一列页眉模式。

然而,它在展示模式的潜力方面做得还不够。它是WordPress推出的第一个官方默认区块主题,我们现在拥有了后见之明的神奇能力。

当我几个月前首次浏览Twenty Twenty-Two的底层模板代码时,我注意到/templates文件夹中有很多重复的代码。盯着index.htmlhome.htmlsearch.html模板,我找不到查询文章输出之间的任何差异。因此,我通过代码差异检查器运行了它们。正如所料,每个实例都匹配。WordPress的旗舰主题正在违反DRY原则。每个文件中有33行代码本可以减少为对区块模式的一行调用。

33行代码本可以看起来像这样(假设注册了模式twentytwentytwo/query-example):

<!-- wp:pattern {"slug":"twentytwentytwo/query-example"} /-->

整个/templates/index.html文件可以简单到:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:pattern {"slug":"twentytwentytwo/query-example"} /-->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

这实际上就是三行代码。

眼尖的读者可能已经注意到我没有提到archive.html。它的查询文章输出在表面上看起来与其他三个模板相同。从技术上讲,它有一些代码差异,但我不知道为什么。也许这是一个错误,是早期版本的遗留物。也许这是一个疏忽,是一段从未检查过是否与其他模板匹配的区块代码。我猜,如果这些模板是以模式优先的思维来处理的,那么archive.html就不会有任何差异。

自WordPress 3.0以来,主题作者一直使用模板部件来减少重复代码。使用基于区块的模板部件仍然是一种有效的方法。然而,模式提供了更大的灵活性,甚至可以与它们结合使用。

模式的亮点在于,它们将更多权力交到最终用户手中,同时不会剥夺主题作者的权力。用户可以获取通过其主题提供的任何模式,并将其用于自己的模板中,甚至可以直接将其放入自定义页面的中间。

是否有可能在Twenty Twenty-Two中减少更多模板代码,用模式替换?有可能,但这是最大的收获,也是唾手可得的成果。此外,这只是一个例子。我选择它是因为它是一个核心WordPress主题,但我在目录中的其他主题中也看到了类似的领域。

大多数模板输出之间几乎没有太大差异。大多数主题可以分解为几个主要区域:

  • 页眉
  • 内容 – 归档视图
  • 内容 – 单篇文章视图
  • 侧边栏
  • 页脚

这个公式存在一些变体,但主题模板中的几乎所有内容都至少重复一次。有了区块模式系统,一些主题可能除了<!-- wp:pattern --/> 调用之外,什么都不需要。

这并不是什么一成不变的规则。相反,这是一种跳出框框的思考。或者,至少是思考扩展者如何在区块系统的背景下重新思考一些老问题。