{{ unreadCount }}
全部已读
刷新
系统消息 {{ categoryUnread.system }}
账号、系统通知
关注信息 {{ categoryUnread.follow }}
粉丝、关注动态
评论回复 {{ categoryUnread.comment }}
评论、回复通知
文章消息 {{ categoryUnread.article }}
审核、推荐通知

欢迎来到消息中心

选择左侧分类查看消息,或使用搜索功能查找特定消息

共有 {{ totalMessages }} 条消息,{{ unreadCount }} 条未读
{{ selectedMsg.articleTitle }}
原评论:
{{ selectedMsg.commentContent }}
表情
{{emoji}}
图片 本地上传 我的附件
×
{{ replyError }}
加载中...
取消 确定 ({{ replySelectedImages.length }})

欢迎回来

登录账号,开启温暖的一天

{{ loginErrors.username }}
{{ loginErrors.password }}
我已阅读并同意 《隐私协议》 《用户协议》
{{ loginErrors.agreement }}
登 录
其他登录方式

注册新账号

创建账户,开启温暖之旅

{{ registerErrors.nickname }}
{{ registerErrors.username }}
{{ registerErrors.email }}
{{ registerCaptchaCountdown > 0 ? registerCaptchaCountdown + 's' : '获取验证码' }}
{{ registerErrors.password }}
我已阅读并同意 《隐私协议》 《用户协议》
{{ registerErrors.agreement }}
注 册

重置密码

通过手机号或邮箱验证身份

{{ resetErrors.email }}
{{ resetCaptchaCountdown > 0 ? resetCaptchaCountdown + 's' : '获取验证码' }}
{{ resetErrors.phone }}
{{ resetCaptchaCountdown > 0 ? resetCaptchaCountdown + 's' : '获取验证码' }}
{{ resetErrors.newPassword }}
确 认 重 置
当前位置:首页>WP教程>教你制作一个简单的页面模板

教你制作一个简单的页面模板

{{PdfTitle}} 预览PDF

先跟你讲个数据:根据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`本身可能已经包含了`

`和`

喜欢作者

如本文"对您有用",欢迎随意打赏,让我们坚持创作!~

v阿杰打赏

文章标题:教你制作一个简单的页面模板

{{ rewardDesc }}
{{ amount }}元
自定义
{{ forbiddenWordMessage }}
选择支付方式
微信
支付宝
余额支付
当前余额:¥{{ userBalance }} 余额不足?去充值
目录
({{ interactions.likes_count }})
({{ interactions.favorites_count }})
({{ interactions.comments_count }})
反馈
文章目录 {{ tocItems.length }}项

暂无目录

点赞 取消点赞

已点赞的用户 ({{ interactions.likes_count }})

暂无用户点赞
收藏 取消收藏

已收藏的用户 ({{ interactions.favorites_count }})

暂无用户收藏
最多4张,支持JPG/PNG/WEBP(≤2MB)
上传
请确保反馈内容真实,虚假反馈可能会导致账号封停。
上一篇

如何创建自定义文章类型案例

下一篇

如何利用子主题修改父主题

相关文章

如何创建自定义文章类型案例
如何创建自定义文章类型案例
v阿杰 v阿杰
34 0 0
教你在functions.php里添加动作钩子
教你在functions.php里添加动作钩子
v阿杰 v阿杰
32 0 0
怎样用过滤器修改文章标题
怎样用过滤器修改文章标题
v阿杰 v阿杰
36 0 0
如何搭建主题文件结构
如何搭建主题文件结构
v阿杰 v阿杰
36 0 0
{{ Math.max(0, remainingChars) }}
表情
{{emoji}}
图片 本地上传 我的附件
提交评论
×
0条评论
{{ order === 'desc' ? '最新评论' : '最早评论' }} 最新评论 最早评论 {{ filter === 'all' ? '全部评论' : '只看作者' }} 全部评论 只看作者
{{ group.root.author }} 作者
{{ group.root.date }} 回复
反馈
回复 @{{ replyingToUser }}
{{ Math.max(0, replyRemainingChars) }}
表情
{{emoji}}
图片 本地上传 我的附件
取消 提交回复
×
{{ comment.author }} @{{ comment.parentAuthorName }} 作者
{{ comment.date }} 回复
反馈
回复 @{{ replyingToUser }}
{{ Math.max(0, replyRemainingChars) }}
表情
{{emoji}}
图片 本地上传 我的附件
取消 提交回复
×
加载中...
取消 确定 ({{ selectedImages.length }})
@{{ reportTargetComment.author }} {{ reportTargetComment.content | stripHtml }}
最多4张,支持JPG/PNG/WEBP(≤2MB)
上传
请确保反馈内容真实,虚假反馈可能会导致账号封停。
优惠
QQ客服
QQ客服
微信客服
微信客服
客服
公告
顶部
优惠券领取中心
当前数据为演示数据,暂不可领取
¥ {{ coupon.value }}
{{ coupon.type }}
{{ coupon.name }}
{{ coupon.condition }}