1、创建归档函数到 functions.php 里
其实你可以单独新建一个archives.php文件，把以下的代码复制进去，然后在 functions.php 引入文件
/**
* 引入归档函数
*/
require get_template_directory() . 'archives.php';
或者直接复制以下代码到functions.php 里,代码太长，点击这里下载 原代码
2、创建page-archives.php页面模板
页面内容可以简单以下，主要是在这个页面里要调用函数自定义的归档函数zww_archives_list();
/**
* Template Name:Archives
*/
get_header(); ?>
登陆wordpress后台-页面-新建页面-然后新建页面（如叫：归档），选择模版为 Archives
3、给主题加载 jQuery 库，没有加载的，把下面这句扔到 functions.php 里面就行了。
WordPress引入css/js两种方法
wp_enqueue_script('jquery');
4、jQuery 代码：
如果你的主题引入了 jQuery 库，那么下面这段代码你完全可以放到page-archives.php里
<script type="text/javascript">
(function ($, window) {
$(function() {
var $a = $('#archives'),
$m = $('.al_mon', $a),
$l = $('.al_post_list', $a),
$l_f = $('.al_post_list:first', $a);
$l.hide();
$l_f.show();
$m.css('cursor', 's-resize').on('click', function(){
$(this).next().slideToggle(400);
});
var animate = function(index, status, s) {
if (index > $l.length) {
return;
}
if (status == 'up') {
$l.eq(index).slideUp(s, function() {
animate(index+1, status, (s-10<1)?0:s-10);
});
} else {
$l.eq(index).slideDown(s, function() {
animate(index+1, status, (s-10<1)?0:s-10);
});
}
};
$('#al_expand_collapse').on('click', function(e){
e.preventDefault();
if ( $(this).data('s') ) {
$(this).data('s', '');
animate(0, 'up', 100);
} else {
$(this).data('s', 1);
animate(0, 'down', 100);
}
});
});
})(jQuery, window);
</script>
也可以直接打开 header.php 并找到 ，在其下面加上
<script type="text/javascript">上面那段 jQuery 代码</script>
4、Css参考
这样即使成功的话也非常不好看，剩下的就是根据自己的布局加入CSS了，你要好好的研究zww_archives_list() 里面的Html结构，然后编写自己喜欢的CSS,这里分享一下我的css.
/*
* ---------------文章归档页面样式--------------------
*/
#main-archivest{;margin:20px 0;}
.m-title{text-align:center;border-bottom:solid 1px #ccc;}
.al_mon{font-weight:bold;}
#archives ul li {list-style-type:none;}
#archives ul >li{padding:0 0 8px 5px;border-left:solid 1px #ccc;background-image:url(li.png); padding-left:20px; background-repeat:no-repeat;}
#archives ul>li>ul{margin:0;padding:0;}
#archives ul>li>ul>li{list-style-type:none;background-image:url(li.gif); padding-left:20px;background-repeat:no-repeat; border-left:dashed 1px #ccc;}
其实你可以完全复制，稍加修改。
