WordPress 教程:自定义页面(Page)的模板样式

WordPress 中存在两种信息发布形式:文章(Post)和页面(Page),在写如何自己定义某个页面的特殊样式之前,有必要为一些新手简单介绍一下它们之间的区别,已经了解的朋友请跳过本节。

WordPress 中文章(Post)和页面(Page)的区别

WordPress 既然作为一个小型的 CMS 系统,文章肯定是最核心的内容。WordPress 中的文章是正文主体内容,一般可以随时修改、变动,文章之间有比较明确的时间、分类、标签等等相关关系。

而一个 CMS 中,肯定不能只包含正文文章,一般在底部都包含了诸如“关于我们”、“联系我们”等页面,WordPress 中的页面就是比较静态比较固定内容的页面,一般是独立的,与其他内容不太相关。如果有相关的内容,一般是父子关系,即父页面下面的子页面。而且页面可以很方便的定义“别名”(slug),也就是方便的自定义页面的链接。

自定义 WordPress 中的页面(Page)模板

页面结构、样式,在 WordPress 的主题目录中的 page.php 中定义,所有的页面都是一种结构和样式下,只是替换了一些内容而已。这势必无法满足我们的一些个性需求。

举个例子,一般来说页面的模板就跟文章的模板差不多,一个标题加上正文内容和下面评论。如果我博客的某个页面,想要展示的是我的作品集,而我的作品集想用一些并排的方块样式展示而不是以传统文章的形式展示。那么,就需要来自定义这个页面模板了。强大的 WordPress 系统已经考虑到我们这种合理的不合理需求,并提供了两种强大的自定页面的方法:

  1. 在后台选项指定当前页面要调用的模板文件
  2. 使用主题文件优先级规则来覆盖默认页面模板

在通过这两种方法自定义页面样式之前,请先确保你已经做出了一个可以使用的页面模板文件,不然的话本文是没有什么意义的。为了简便,本人用几个字来做演示。

在后台指定当前页面要调用的模板文件

当我们新建或者编辑一个页面的时候,在右侧的“页面属性”一栏里面会有一个“模板”选项,里面提供了可以选择的模板,我们只需要选中某个模板,就可以对当前的页面使用这个模板来显示。

WordPress 教程:自定义页面(Page)的模板样式

你可能会问,为什么我的页面编辑页面没有这个选项?只有你的主题至少包含一个页面模板,这个地方才会检测出来并显示出来,然后提供选择。如果你没有自定义的页面模板,有什么必要出现这个选项?

我们现在就来创建自己的模板文件,方法很简单:

随便新建一个文件,然后自己写好 HTML 结构和对应的 CSS 样式以及 WordPress 的内容调用函数等,然后在最顶部加上如下的注释:


<?php
/*
Template Name: 潜行者m 的 page 模板测试
*/
?>

加上之后,你就制作了一个名字为“潜行者m 的 page 模板测试”的页面模板了。这个文件可以随便命名,而且可以随便放在一个新建的文件夹中。一般比较推荐的方法是,新建一个名为“page-template”或者相关名字的文件夹,专门用来放置页面模板。只要某个文件带有这个注释并且放置在当前主题的目录中,就会被 WordPress 发现,然后就会出现在后台的选项中。

再说一下,这个页面模板可以是任意的内容,不一定复制原有的结构,可以自由发挥。如果没有调用什么 WordPress 内容什么的,就会显示静态文件。下面来看看简单的效果测试:

下图是原有的页面内容和样式

WordPress 教程:自定义页面(Page)的模板样式

下图是编辑这个页面并选择了某页面模板

WordPress 教程:自定义页面(Page)的模板样式

很明显就可以看出,这个页面模板的全部内容如下:


<?php
/*
Template Name: 潜行者m 的 page 模板测试
*/
?>
这就是一个自定义 Page 页面模板的效果测试,来自 潜行者m@我爱水煮鱼

使用模板文件命名规则来覆盖默认模板样式

上面是使用了注释让 WordPress 直接识别页面模板文件,然后勾选。下面的这种方法使用的 WordPress 的主题文件命名优先级来覆盖原有页面模板样式。通过 WordPress 的主题文件优先级层次图可以得知:

  • page-{id}.php
  • page-{slug}.php

这两种类型命名的文件,会覆盖对应页面的默认页面模板。每个页面都会像文章一样有一个唯一的 id 。例如上图中的 id 1689,如果我们想要使用一个页面模板来覆盖默认页面模板的话,那么我们新建模板的名称应该是 page-1689.php ,然后把它放在主题的根目录下面,注意,是根目录下面,经测试放在子目录下面无法生效。

为了跟上文的有区别,我增加了一些文字,放置在根目录下面之后,刷新当前页面,结果发现没有变化。因为之前我们在后台已经指定了当前页面的模板,明确指定的模板要比这种方式的模板优先级要高,所以我们要到后台取消后台定义的模板。再来刷新一下,成功输出新增加的内容,说明方法生效:

WordPress 教程:自定义页面(Page)的模板样式

如果你对当前页面应用了“别名”(slug),也可以使用 page-{slug}.php 的文件名来覆盖,slug 的覆盖方法要比 id 的方法优先级高,意思就是说如果一个 id 为 1689 的页面,别名为 bieming ,你分别用了这两种方式来覆盖默认页面模板,后者生效。

扩展思维与实际应用

两种覆盖默认页面模板的方法以及介绍完成了,下面来谈谈应用。就上面最初的那个例子,我想我博客上的某个放着作品集的页面,使用排列的方块布局,然后包含图片、下面有作品标题和链接,没有边栏。那我应该怎么办?很简单,你甚至不需要懂 WordPress 函数,直接做一个静态的 HTML 页面都可以,使用上述两种方法的一种(特别推荐第一种方法),就让你的作品集页面与其他页面不同,按照你自己的需求来显示。

当然,前提是你得有自定义的页面模板。