适用人群
- 刚接触WordPress、只会装主题和发文章的新手站长
- 想替换掉主题自带那种“光秃秃只有月份链接”归档页的进阶用户
- 被“为什么我点日期链接只显示首页？”这种问题折磨过的人
- 任何想把网站归档页做成“访客愿意停留、SEO能加分”的实战派
如果你已经会改functions.php但搞不定模板层级，或者会用Elementor但不知道归档页在后台哪设置，这篇文章就是为你写的，别浪费时间搜那些“用插件一键生成”的教程，插件越多站点越慢,今天咱们纯手工三刀流搞定。
手把手教你做出一个让人挑不出毛病的WordPress归档页面（附完整代码+避坑指南）
第一步：搞清楚WordPress归档页到底长什么样
很多人一上来就说“我要一个归档页面”，结果做出来的东西跟网站首页一模一样——因为WordPress默认的archive.php模板会同时覆盖分类、标签、日期归档所有页面，如果你什么都不改，点“2024年3月”进去，看到的就是和首页相同的文章列表,只是URL变了。
正确的姿势：我们要单独为日期归档、分类归档、标签归档分别定制外观，或者至少做出一个漂亮的日期归档页（按年月汇总），WordPress模板层级里，日期归档的优先级是：date.php → archive.php → index.php，所以我们只需要创建一个date.php,就能覆盖所有日期相关的归档。
第二步：完整搭建步骤（纯代码，不依赖任何插件）
1 在主题根目录新建文件
打开主题文件夹（通常是/wp-content/themes/你的主题名/），新建一个文件，命名为date.php，用任何代码编辑器（推荐VS Code或Notepad++）打开。
2 写入基础骨架
<?php
/**
* 日期归档专用模板
* 覆盖所有年/月/日归档页面
*/
get_header(); ?>
<div class="archive-wrap">
<h1 class="archive-title">
<?php
if ( is_day() ) :
printf( __( 'Daily Archives: %s', 'textdomain' ), get_the_date() );
elseif ( is_month() ) :
printf( __( 'Monthly Archives: %s', 'textdomain' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'textdomain' ) ) );
elseif ( is_year() ) :
printf( __( 'Yearly Archives: %s', 'textdomain' ), get_the_date( _x( 'Y', 'yearly archives date format', 'textdomain' ) ) );
else :
_e( 'Archives', 'textdomain' );
endif;
?>
</h1>
<?php if ( have_posts() ) : ?>
<ul class="archive-list">
<?php while ( have_posts() ) : the_post(); ?>
<li>
<span class="archive-date"><?php echo get_the_date( 'Y-m-d' ); ?></span>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<span class="archive-comments">(<?php comments_number( '0', '1', '%' ); ?>)</span>
</li>
<?php endwhile; ?>
</ul>
<div class="pagination">
<?php
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( '← 上一页', 'textdomain' ),
'next_text' => __( '下一页 →', 'textdomain' ),
) );
?>
</div>
<?php else : ?>
<p><?php _e( '当前时间范围内没有文章。', 'textdomain' ); ?></p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
3 加上好看点的样式（扔进style.css）
不想拆开主题？直接放自定义CSS里，打开“外观→自定义→额外CSS”,粘贴以下代码：
.archive-wrap {
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
}
.archive-title {
font-size: 1.8em;
border-bottom: 2px solid #eee;
padding-bottom: 15px;
margin-bottom: 30px;
}
.archive-list {
list-style: none;
padding: 0;
margin: 0;
}
.archive-list li {
padding: 12px 0;
border-bottom: 1px dotted #e0e0e0;
display: flex;
align-items: baseline;
gap: 15px;
}
.archive-date {
color: #999;
font-size: 0.9em;
min-width: 85px;
}
.archive-list a {
color: #333;
text-decoration: none;
flex: 1;
}
.archive-list a:hover {
color: #0073aa;
}
.archive-comments {
color: #aaa;
font-size: 0.85em;
}
.pagination {
margin-top: 30px;
text-align: center;
}
4 保存并测试
保存文件，刷新浏览器，随便点一个月份的链接（例如你的网站.com/2024/03/），你会看到不再是首页的图文列表，而是一个清爽的表格形式，日期、标题、评论数一清二楚。
第三步：配置要点（很多人卡在这里）
1 确保WordPress正确生成日期链接
有些主题或SEO插件会修改固定链接结构，检查设置 → 固定链接，推荐使用“文章名”或“/%year%/%monthnum%/%postname%/”，如果选了“朴素”，日期归档链接根本打不开，这一步不做,后面的全白搭。
2 让归档页显示“文章总数”
想告诉访客“2023年共有32篇文章”？在archive-title下面加一行：
<p class="archive-count">共有 <?php global $wp_query; echo $wp_query->found_posts; ?> 篇文章</p>
样式加一句.archive-count { color: #666; margin-bottom: 20px; }即可。
3 分页不丢失
上面代码里已经用了the_posts_pagination()，但如果你的主题老旧或者启用了某些古老的分页函数（比如paginate_links()），记得统一替换成函数内自带的样式,否则点第二页会404。
4 同时想要“按分类归档”的侧边栏
在date.php的<div class="archive-wrap">内，可以在文章列表上方加一个下拉框，按月份快速跳转，用WordPress自带wp_get_archives()：
<select name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="">选择月份</option>
<?php wp_get_archives( array( 'type' => 'monthly', 'format' => 'option', 'show_post_count' => true ) ); ?>
</select>
注意：需要确保你的主题里没有重复注册jquery，否则这个下拉框无法自动跳转，如果不行,加一行：
<?php wp_enqueue_script( 'jquery' ); ?>
第四步：常见踩坑提醒（血泪教训）
❌ 坑1：归档页跟首页一模一样
原因：主题没有date.php，用了默认的archive.php，而你的archive.php和index.php结构相同。
解决：按上面步骤新建date.php，如果还不行，检查模板层级是否有缓存（清空网页/CDN缓存），再不行，直接在主题函数里禁用默认归档模板：add_filter( 'archive_template', function() { return get_template_directory() . '/date.php'; } ); ——但一般不推荐,这是最后手段。
❌ 坑2：点了“2024年3月”之后，地址栏正确但页面空白
原因：很可能是当前月份没有文章，而你的else分支没写内容，上面代码已经处理了“else : 显示提示语”，如果空白，检查是否在while循环之前用了wp_reset_query()误杀了主循环。千万不要在the_post()之前调用wp_reset_query()。
❌ 坑3：分页链接出现404
原因：使用了paged变量但没注意WordPress的rewrite规则。the_posts_pagination()会自动处理，如果你手动写分页，务必要在query_posts()后传入'paged' => get_query_var( 'paged' )，固定链接结构里如果有%postname%且同时用了/date/2024/03/这种前缀，可能冲突,检查一下设置。
❌ 坑4：样式被主题的CSS覆盖
原因：你的主题的style.css里可能对ul、li、a有全局样式，导致归档列表变形。
解决：在自定义CSS里给.archive-wrap加更高的特异性，比如.archive-wrap .archive-list li，或者在主题额外CSS最后加!important（不优雅但管用）。
❌ 坑5：手机端排版错乱
原因：flex在窄屏下没换行。
解决：在自定义CSS里加上：
@media (max-width: 600px) {
.archive-list li {
flex-wrap: wrap;
}
.archive-date {
min-width: auto;
width: 100%;
}
}
最后一句
归档页面不是摆设，它是你网站内容的“地图”，按上面三步走，最多花你半小时，以后访客想翻老文章、搜索引擎想收录历史内容，都会给你加分，别懒，动手做，遇到问题先检查文件命名和函数名大小写——WordPress对大小写不敏感，但模板层级对文件名敏感，再不行，把你date.php里的代码和报错信息贴到群里,会有人帮你。
关掉教程页面,打开你的主题文件夹。
发表评论