WordPress 主题模板：从零开始理解模板系统

发布于 作者:

WordPress 的主题模板系统，可以理解为一套搭积木的规则。你不需要懂复杂的编程，只要搞明白“模板”和“模板部件”这两个核心概念，就能看明白一个网站页面是怎么拼出来的。本文会拆解这套系统的运作方式，让你明白那些放在 templates 和 parts 文件夹里的 HTML 文件到底是干什么的，以及 WordPress 是怎么根据你访问的页面，选出一套合适的模板来展示内容的。

如果你刚开始接触 WordPress 主题开发，这篇文章可以作为你的一份导航地图。

模板是什么

模板，就是你网站页面的“骨架”。每个模板文件都定义了一类页面的结构，比如你的“关于我们”页面和博客文章详情页，它们的样子和布局通常是不同的，这就需要不同的模板来控制。

在传统的 WordPress 主题里，模板是用 PHP 文件写的。但在现在主流的块主题（Block Theme） 里，模板变成了一个个 .html 文件，里面装的是“块”的标记代码。你可以把“块”理解成乐高积木，比如一个“网站标志”块、一个“导航菜单”块，或者一个“文章内容”块。模板就是用这些积木搭好的成品。

https://developer.wordpress.org/files/2024/04/site-editor-single.png

上图是 WordPress 默认主题的“单篇文章模板”在编辑器里的样子。可以看到它是由多个“块”组合而成的。

模板系统的工作流程

当有人访问你网站的某个页面时，WordPress 内部会启动一个“决策”过程，来决定用哪个模板文件去展示这个页面。

这个决策逻辑就是模板层级（Template Hierarchy）。它是一套规则，决定了 WordPress 按照什么顺序去查找模板文件。

它的核心逻辑是：找具体的那个。比如，要显示一篇普通的博客文章，WordPress 会按这个顺序去找模板文件：

  1. single-{post-type}.html (例如 single-post.html)
  2. single.html
  3. singular.html
  4. index.html (终的后备模板)

如果 single.html 不存在，系统就会自动使用 singular.html；如果 singular.html 也没有，就终会使用 index.html。每个主题都必须有一个 index.html 作为后的保障。

模板文件在哪里

在块主题的文件结构里，所有模板文件都整齐地放在一个名为 /templates 的文件夹下。一个典型的主题，它的模板文件列表可能长这样：

  • index.html：后备模板，所有页面的终保底选择，必须存在。
  • 404.html：当用户访问的页面不存在时展示。
  • archive.html：用于展示文章归档页面，比如按分类、按日期、按作者归档。
  • author.html：专门展示特定作者所有文章的归档页面。
  • category.html：专门展示特定分类下的文章。
  • page.html：用于展示独立的“页面”，如“联系我们”。
  • search.html：用于展示搜索结果。
  • single.html：用于展示单篇博客文章。
  • tag.html：专门展示特定标签下的文章。

注意：archive.html 是一个较通用的归档模板。如果 category.html 和 tag.html 不存在，系统就会回退到 archive.html。这体现了模板层级系统“由具体到通用”的设计思路。

模板部件

模板部件（Template Parts），顾名思义，就是模板的一部分。

它的作用是帮你遵循“不要重复你自己（DRY）”这个重要的编程原则。网站上那些每个页面都一样的区域，比如网站头部（Header）和底部（Footer），如果做成模板部件，就不需要在每个模板文件里都重复搭建一遍。

在主题文件里，模板部件存放在 /parts 文件夹中。常见的两个部件就是：

  • parts/header.html：通常包含网站标志、导航菜单。
  • parts/footer.html：通常包含版权信息、底部链接。

你可以通过在模板文件里插入一个简短的标记来调用它们，比如 <!-- wp:template-part {"slug":"header"} /-->，系统就会在页面渲染时，把 header.html 的内容“包含”进来。

直观理解模板“骨架”

如果用一句话来总结上面所有概念，可以把网站页面想象成一栋房子：

  • 模板 是房子的设计图纸，分为“客厅设计图”、“卧室设计图”等，对应 page.html、single.html 这些文件。
  • 模板部件 是统一规格的预制件，比如“标准门”或“标准窗”，对应 header.html、footer.html，可以在不同图纸间复用。
  • 块 是组成页面的乐高积木，比如一段文字、一张图片，就是 <!-- wp:paragraph --> 或 <!-- wp:image --> 这样的代码块。

当 WordPress 需要展示一个页面时，它会根据“模板层级”的规则，找到合适的设计图纸，然后用图纸上指定的预制件和积木，把房子搭起来给你看。

总结

搞懂 WordPress 模板系统，就抓住了主题开发的核心脉络。这套机制的核心是模板层级决定的“由具体到通用”的查找逻辑，以及通过模板部件实现代码复用的设计哲学。对于初学者来说，掌握了 templates 文件夹、parts 文件夹和 index.html 这三个关键点，就能读懂大部分块主题的结构，不再迷失在文件堆里。