不多说了，本站目前使用的效果，可以到我的存档页一览，该方法来自zww，感谢原作者，在这之前，建议你：
1、你的博客存档页面地址后面的应该为/articles,而不是常见的/archives 。在英文中，article表示“文章”，而archive意为“档案”，使用archive貌似不那么规范；2、你的博客存档页面应该禁止搜索引擎访问，因为这会造成内容重复（在你启用站点地图插件的情况下）。
折腾功能：代码实现WordPress归档页面模板[WP原生函数篇]
原创作者：zwwooooo
特点：
1. 按照年份、月份显示文章列表
2. 显示每月的文章数量（需要配合及Query）
3. 显示每篇文章的评论数
4. 使用 WordPress 原生函数实现数据调用
5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存，只在发表/修改文章时才更新，减少数据库查询。
6. 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。
步骤：
1. 把下面的函数扔到所用主题的 functions.php 文件里面：（注意：因为有中文，所以要把 functions.php 文件转换为 UTF8 无 BOM 格式，不然中文会乱码）。
/* Archives list by zwwooooo | http://zww.me */
function zww_archives_list() {
if( !$output = get_option('zww_archives_list') ){
$output = '[全部展开/收缩] (注: 点击月份可以展开)
';
$the_query = new WP_Query( 'posts_per_page=-1&ignore_sticky_posts=1' ); //update: 加上忽略置顶文章
$year=0; $mon=0; $i=0; $j=0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$year_tmp = get_the_time('Y');
$mon_tmp = get_the_time('m');
$y=$year; $m=$mon;
if ($mon != $mon_tmp && $mon > 0) $output .= '';
if ($year != $year_tmp && $year > 0) $output .= '';
if ($year != $year_tmp) {
$year = $year_tmp;
$output .= ''. $year .' 年
'; //输出年份
}
if ($mon != $mon_tmp) {
$mon = $mon_tmp;
$output .= '- '. $mon .' 月
'; //输出月份
}
$output .= '- '. get_the_time('d日: ') .''. get_the_title() .' ('. get_comments_number('0', '1', '%') .')
'; //输出文章日期和标题
endwhile;
wp_reset_postdata();
$output .= '
';
update_option('zww_archives_list', $output);
}
echo $output;
}
function clear_zal_cache() {
update_option('zww_archives_list', ''); // 清空 zww_archives_list
}
add_action('save_post', 'clear_zal_cache'); // 新发表文章/修改文章时
2. 复制一份主题的 page.php 更名为 archives.php，然后在最顶端加入：
然后找到类似 ，在其下面加入如下代码
进wp后台添加一新页面，在右侧栏模板选择 archives
3. 给主题加载 jQuery 库。
4. jQuery 效果代码
jQuery(document).ready(function($){
//===================================存档页面 jQ伸缩
(function(){
$('#al_expand_collapse,#archives span.al_mon').css({cursor:"s-resize"});
$('#archives span.al_mon').each(function(){
var num=$(this).next().children('li').size();
var text=$(this).text();
$(this).html(text+' ( '+num+' 篇文章 )');
});
var $al_post_list=$('#archives ul.al_post_list'),
$al_post_list_f=$('#archives ul.al_post_list:first');
$al_post_list.hide(1,function(){
$al_post_list_f.show();
});
$('#archives span.al_mon').click(function(){
$(this).next().slideToggle(400);
return false;
});
$('#al_expand_collapse').toggle(function(){
$al_post_list.show();
},function(){
$al_post_list.hide();
});
})();
});
PS：不知道怎么写js文件调用的就直接打开 header.php 并找到 ，在其下面加上
4. css根据需要写，不写也可以的。HTML结构：
折腾完，收工！