很多人用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的基础逻辑,再学会自定义模板,就能搞定大部分页面的定制需求,不用被主题自带的布局限制。如果大家在做模板的时候遇到问题,也可以一起交流。