`和`
教你制作一个简单的页面模板
先跟你讲个数据:根据W3Techs的统计,截至2024年底,WordPress占据了全球所有网站的43.2%以上市场份额。这意味着每两个半网站里,就有一个跑在WordPress上。但有意思的是,我经手过的几百个WordPress项目中,至少有六成以上的站长从来没有正眼看过“页面模板”这个功能。他们要么全用默认模板凑合,要么直接在页面编辑器的“自定义CSS”里暴力修改,搞得页面一多,布局全崩。
别笑,这不是段子。上个月我帮一个做独立摄影工作室的客户改站,他那个作品集页面就是用默认模板堆出来的——侧边栏、评论区、文章导航一个不少,底下还冒出来个“相关文章”推荐块。一张纯粹展示摄影作品的全宽页面,硬生生被塞成了电商分类页。他跟我说:“我以为WordPress的页面就是这样,改不了。”
这种想法大错特错。
页面模板存在的意义,就是让你能彻底控制一个页面的骨架。它不光是加几个区块那么简单,而是从根上改变页面输出的HTML结构、CSS类名和PHP逻辑。如果你还在用编辑器里的“全宽模板”或者“无标题模板”这些现成选项,说明你只用了模板的皮毛。今天我就手把手带你走一遍,从零制作一个真正属于你自己的简单页面模板。
—
WordPress的模板层级是一套非常清晰的优先级规则。你打开一个页面,系统会从最具体的文件名开始查找,一直找到最通用的`index.php`。具体到页面(Page)类型的模板,优先级是这样:
1. 自定义页面模板(你在页面编辑器的“模板”下拉菜单里选的那个,比如`template-about.php`)
2. `page-{slug}.php`(比如`page-about.php`,基于页面别名)
3. `page-{id}.php`(比如`page-12.php`,基于页面ID)
4. `page.php`(所有页面的默认回退)
5. `singular.php`(所有单篇文章/页面的回退)
6. `index.php`(最后的兜底)
很多人只停留在第4级,甚至直接让所有页面都走`page.php`,导致所有页面结构一模一样。但凡有一个页面需要特殊布局(比如全宽、无侧边栏、隐藏标题),他们就开始在编辑器里用Div区块强行模拟,结果前端渲染慢,维护还费劲。
我的观点很明确:**但凡你有一个页面的展示逻辑发生系统性变化(比如不是通用博客内容),就应该单独写一个模板文件,而不是靠CSS硬撑。**
—
现在我们来做一个实际案例。假设你的网站需要一页“项目作品展示”,这个页面完全不需要侧边栏、不需要标题、不需要评论区,只需要一个干净的全宽容器来展示一组自定义字段输出的图片和描述。
打开你的主题文件夹(通常位于`/wp-content/themes/你当前使用的主题/`),新建一个PHP文件,随便命名,但建议规范一点,比如`template-projects.php`。文件头部必须添加一段模板标识注释:
while ( have_posts() ) : the_post();
// 这里输出页面内容,但我们可以完全控制
// 用自定义字段取作品数据,而非the_content()
$projects = get_post_meta( get_the_ID(), 'project_list', true );
if ( $projects && is_array( $projects ) ) :
echo '
';
foreach ( $projects as $project ) :
echo '
';
echo '';
echo '
' . esc_html( $project['title'] ) . '
';
echo '
';
endforeach;
echo '
';
else :
echo '
暂无项目数据,请在后台页面编辑中添加。
';
endif;
endwhile;
?>
这段代码干了几件事:它去掉了`the_content()`原本会输出的页面编辑框内容,转而使用自定义字段`project_list`来输出一个网格布局。最关键的是,它没有加载侧边栏,因为CSS类名`content-area-full`默认对应全宽布局。
保存文件后,回到WordPress后台,新建或编辑一个页面,在右侧“页面属性”区块里,你会发现“模板”下拉菜单里多了“作品展示”这个选项。选中它,更新页面,前端就是干干净净的全宽作品墙。
—
这里有个坑你必须知道:很多新手做完上面那步,发现页面还是带了侧边栏。为什么?因为他们的主题在`get_header()`和`get_footer()`之间,默认就把侧边栏写死在了`page.php`里,而你的新模板虽然调用了`get_header`,但`header.php`本身可能已经包含了`
如本文"对您有用",欢迎随意打赏,让我们坚持创作!~
暂无目录
