WordPress page.php 页面模板与自定义模板使用方法

很多人用WordPress 建站,总觉得自带的页面模板又丑又死板,想改布局又不知道从哪下手。其实核心就是搞懂page.php这个文件,再学会自定义模板,就能彻底摆脱主题自带布局的限制。今天就用我自己踩过坑的经验,把这些讲透,不用记复杂的概念,跟着做就行。

在WordPress 里,不同的文件管着不同的页面渲染。我们平时做的 "关于我们""联系我们" 这类静态页面,都是由page.php控制的;日常发布的文章,走的是single.php;首页默认用index.php,如果其他模板缺失,系统也会自动用它兜底;分类、标签这类存档页,就由archive.php负责。很多新手删了page.php之后,页面全变成了首页的样子,就是因为系统自动用了index.php顶替,所以这个文件是主题里不能乱删的核心文件。

不同主题的page.php代码细节不一样,但核心逻辑都是头部、主体内容、底部三段式。拿官方主题的源码来看,结构很清晰:

<?php

get_header(); ?>

<div class="wrap">

<div id="primary" class="content-area">

<main id="main" class="site-main">

<?php

while ( have_posts() ) : the_post();

get_template_part( 'template-parts/page/content', 'page' );

if ( comments_open() || get_comments_number() ) :

comments_template();

endif;

endwhile;

?>

</main>

</div>

</div>

<?php get_footer(); ?>

不用死记每一行,只要搞懂几个关键部分就行。get_header()和get_footer()是用来调用网站的头部和底部文件,把通用的导航、版权这些内容抽出来,不用每个页面都重复写。中间的主循环是 WordPress 的核心,用来调取当前页面的内容,没有这个循环,页面就显示不了正文。那些带 class 的 div 是布局容器,控制页面的宽度、边距这些样式,具体的效果由主题的 CSS 文件决定。

如果想给特定页面做专属布局,比如全屏落地页、无侧边栏的联系页,就要用到自定义模板。它最大的好处是一次做好,多个页面都能用,而且只会作用于指定页面,不会影响网站其他部分。一定要把自定义模板放在子主题里,不然主题一更新,所有修改都会被覆盖,这是很多新手踩过的坑。

想让WordPress 识别自定义模板,只要遵守几个简单的规则就行:文件要放在子主题根目录,后缀是.php,文件开头加一段特定的注释,告诉系统这是个自定义模板,而且模板名称要唯一,不能和现有的重名。

拿大家常用的全屏无侧边栏模板来举例,步骤很简单:先把子主题里的page.php复制一份,重命名成方便识别的名字,比如page-fullwidth.php。打开这个文件,在开头加上模板注释,保留原来的代码结构,再调整布局,删掉侧边栏相关的代码,修改容器的 class,实现全屏效果。修改后的代码可以参考这个:

<?php

/*

* Template Name: 全屏无侧边栏模板

*/

get_header(); ?>

<div class="fullwidth-wrap">

<div id="primary" class="content-area fullwidth">

<main id="main" class="site-main">

<?php

while ( have_posts() ) : the_post();

get_template_part( 'template-parts/page/content', 'page' );

if ( comments_open() || get_comments_number() ) :

comments_template();

endif;

endwhile;

?>

</main>

</div>

</div>

<?php get_footer(); ?>

接着在子主题的CSS 文件里加上全屏的样式,让页面撑满宽度:

.fullwidth {

width: 100%;

max-width: 1200px;

margin: 0 auto;

}

全部弄好之后,把文件上传到子主题根目录,回到WordPress 后台,编辑需要修改的页面,在右侧的页面属性里找到模板下拉菜单,选中刚创建的模板,更新页面就生效了。如果用的是新版的块主题,不用写代码,直接在外观编辑器里新建模板,拖拽区块搭好布局保存,就能在页面里直接选择使用。

等基础的自定义模板玩熟了,还可以搭配插件让模板更灵活。比如用ACF 自定义字段插件,在后台给模板添加联系电话、轮播图地址这类内容,不用每次都改代码,直接在后台填写就行。在模板里加上一段代码,就能把后台填写的内容调出来:

<?php

$phone = get_post_meta( get_the_ID(), 'contact_phone', true );

if ( $phone ) : ?>

<div class="contact-phone">联系电话:<?php echo $phone; ?></div>

<?php endif; ?>

还有一种进阶用法,就是让系统自动给指定页面匹配模板,不用每次都在后台手动选择。比如有自定义文章类型的项目,可以在子主题的functions.php里加一段钩子代码,根据条件自动调用对应的模板,这个适合有一定基础的用户,新手可以先不用急着尝试。

最后说几个我自己踩过的坑,大家别再走弯路。自定义模板在后台看不到,大概率是开头的注释写错了,或者文件没放到子主题根目录,也别忘了检查文件名是不是.php后缀。改完模板之后样式错乱,多半是删了主题里的容器 class,或者改了宽度没同步调整 CSS,一定要结构和样式一起改。主题更新之后模板失效,肯定是没用到子主题,一定要把所有自定义文件都放在子主题里,别碰主主题的文件。页面空白显示不了内容,要检查代码里有没有主循环,少了循环就调取不到页面内容了。

其实WordPress 的模板没那么复杂,先搞懂page.php的基础逻辑,再学会自定义模板,就能搞定大部分页面的定制需求,不用被主题自带的布局限制。如果大家在做模板的时候遇到问题,也可以一起交流。

相关推荐
liangshanbo12154 分钟前
面试题:线上 JavaScript 报错如何快速定位到源码?
开发语言·javascript·ecmascript
星夜夏空998 分钟前
网络编程(5)—— Reactor实现(v3)
服务器·网络·php
weixin_4407305026 分钟前
迭代器Iterator(列表生成器、可迭代的如何生成迭代器)
开发语言·python
朝朝辞暮i33 分钟前
C++ 第 31C 课:Subscriber 到底是什么
开发语言·c++·算法
事圆则缓42 分钟前
Android 多渠道打包实战:Product Flavors、签名、AAB 与发包校验
android
weixin_440730501 小时前
内置函数、json文本、pickle二进制
开发语言·python·json
殷色玫瑰1 小时前
C++ string类详解:常用接口、字符串操作与模拟实现
java·linux·c语言·开发语言·数据结构·c++
李游Leo1 小时前
HarmonyOS 7 + Spatial Recon Kit-C++:3DGS 高斯参数的非有限值隔离与可渲染性门禁【鸿蒙心迹】
开发语言·c++·3d·harmonyos
时间的拾荒人2 小时前
Qt 文件操作详解:从基础类到读写实战
开发语言·qt·面试
Wang's Blog2 小时前
Java 项目实战: 外卖平台优化-YApi接口管理平台与文档导入导出
java·开发语言·yapi