模板概览

欢迎来到本课,了解模板的用途、结构和加载方式。

通过本课,你将能够:

  • 描述模板的用途和结构,
  • 列出 WordPress 加载模板的顺序,以及
  • 在准备好主题起始文件的情况下,从头创建一个模板。

模板的用途和结构是什么?

创建模板是为了给页面提供一些结构。它们决定了布局,并且可以引入不同的部分,比如页眉、主体和页脚。如果我检查这段代码,我可以看到浏览器如何通过引入页眉、主体部分和页脚的代码,在前端渲染代码。

这里我们正在查看默认主题 Twenty Twenty-Four 中的 404 模板。

你可以看到,对于这个区块主题,区块标记被用来引入页眉、主体部分和页脚。你还可以看到,模式被用来从 patterns 文件夹中的模式文件引入代码。

现在请记住,对于区块主题,你不能直接使用纯 HTML。那段 Hello World 代码会导致错误,当我进入站点编辑器并转到 404 模板时,你会在这里看到这个错误。

在移除 Hello World 代码后,我想指出的另一件事是,在站点编辑器中,当我们进入代码编辑器时,模式的代码实际上被引入到这里。看到这里完全没有提到模式了吗?在构建模板时请记住这一点。

WordPress 加载模板的顺序是什么?

有一个模板加载顺序,最底层是主题的模板。接下来,如果存在一个启用的子主题,这些模板会优先加载。最后,在最顶层,我们会发现保存在数据库中的用户自定义内容具有最高优先级。

在准备好主题起始文件的情况下,让我们从头创建一个模板。如果你不熟悉主题起始文件,我建议你看看面向初学者的 WordPress 开发者主题开发模块。

从头创建一个模板

让我们构建自己的 404 模板,但首先让我们看看 404 模板是如何在 Twenty Twenty-Four 主题中创建的。

在主体部分,我们看到这里调用了一个模式,它的名称是 hidden 404。让我们进入 patterns 文件夹。我们会找到 hidden 404 文件,注意它是 PHP 而不是 HTML。如果我们查看那个文件,我们会看到这里又调用了另一个模式,名为 hidden search。所以是一个模式嵌套在另一个模式中。

借助 Twenty Twenty-Four 的 404 模板,我们将节省一些时间,并用它在我们的主题中创建自己的 404 模板,同时准备好主题起始文件。我已经创建了 PHP 文件。我确保将 slug 替换为文件夹的名称,也就是主题的根目录。

仔细检查并将 twentytwentyfour 替换为你根目录的名称。我的根目录是 gettingstarted

一旦你放置好两个模式,就可以创建你的 404 模板了。这是 Twenty Twenty-Four 中的模板,这是我创建的那个。我将在未来的课程中为这个模板添加页眉和页脚。

下一步

如果你想了解更多关于模板的信息,可以参考 WordPress.org 上的主题手册。

在接下来的几课中,我们将学习模板层次结构和模板部分。