首页 > 主题开发 > 模板层次 > WordPress模板层次11:定制页面模板
2018
02-26

WordPress模板层次11:定制页面模板

默认情况下,我们使用page.php文件来输出页面的内容。这小节,我们学习如何定制特定的页面模板。

默认的通用页面模板page.php

打开page.php文件,并添加一个TEST测试代码:

<?php get_header(); ?>

    <div class="container" role="main">

	    <div class="row">
	    	<div class="col-md-8">
TEST/***这是添加的测试代码***/
				<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

刷新Home页面,可以看到添加的测试代码,这就说明了这里使用的都是通用的 page.php 模板。

自定义页面模板 WordPress xuhss.com01 - WordPress模板层次11:定制页面模板

通过页面id,定制页面模板

例如,来到WordPress后台,编辑About页面,可以看到它的post值是115:

自定义页面模板 WordPress xuhss.com02 - WordPress模板层次11:定制页面模板

所以,打开page.php模板,先删除TEST代码,然后,将 page.php 另存为 page-115.php。

自定义页面模板 WordPress xuhss.com03 - WordPress模板层次11:定制页面模板

然后,在page-115.php中添加 TEST ABOUT 来测试它是否正常工作:

自定义页面模板 WordPress xuhss.com05 - WordPress模板层次11:定制页面模板

来到网站前台,查看About页面,可以看到测试代码就出现在About页面上。

自定义页面模板 WordPress xuhss.com06 - WordPress模板层次11:定制页面模板

但是,如果去到Home页面,就没有这个测试代码。因为Home页面的ID不是115.

那么这表明:可以通过使用页面ID号来定制特殊页面的输出。

通过页面名称,定制页面模板

实际上,这只是定制特殊页面的一种方式,我们还可以通过页面名称来定制。

About页面的名称是About。所以我们把page-115重新命名为page-about.php,然后添加新的测试代码NEW ABOUT:

自定义页面模板 WordPress xuhss.com07 - WordPress模板层次11:定制页面模板

来到网站前台,查看About页面,可以看到测试代码就出现在About页面上。

同样地,也可以验证,它并没有被应用于其他页面。

 自定义模板custom.php

其实,还有另一种方式,那就是创建一个所谓的自定义模板custom.php:

自定义页面模板 WordPress xuhss.com08 - WordPress模板层次11:定制页面模板

在主题中,我已经准备好了一个自定义页面模板:page-full-width.php。

可以看到它看起来与其他的页面完全一样,不同的是:它没有使用get_sidebar(),并且它的样式是12列而不是8列:

自定义页面模板 WordPress xuhss.com09 - WordPress模板层次11:定制页面模板

在模板的最上方,可以看到,这里有一个PHP注释TemplateName,然后是模板的名称Full Width:

<?php 

/*
	Template Name: Full Width
*/

?>

这里需要特别提醒大家的一点是:如果我们以后创建任何模板文件,大部分时候,我们会把注释添加PHP文件的顶部。有了注释之后,当我们编辑一个页面时,就可以看到在默认模板中,这个注释对应的选项就可用。

自定义页面模板 WordPress xuhss.com10 - WordPress模板层次11:定制页面模板

所以,我们试着把About页面的模板设置为:Full width,那么,About页面就使用的是自定义的page-full-width.php页面模板。

这时,再查看页面,将会看到这个全宽模板正在显示。

自定义页面模板 WordPress xuhss.com11 - WordPress模板层次11:定制页面模板

请注意,它也自动覆盖了page-about.php模板,因为我们已经手动告诉WordPress:我们不想使用默认模板,而是使用自定义的全宽模板page-full-width.php。

也可以模板结构图中看到,这里的优先级是从custom.php,到page-$slug.php,再到page-$id.php。

自定义页面模板 WordPress xuhss.com08 - WordPress模板层次11:定制页面模板

所以,学会了这些,就可以定制任何想要定制的页面了。

最后编辑:
作者:MrBang
WordPress迷

留下一个回复