1、创建归档函数到 functions.php 里
其实你可以单独新建一个archives.php文件，把以下的代码复制进去，然后在 functions.php 引入文件
/**
* 引入归档函数
*/
require get_template_directory() . 'archives.php';
或者直接复制以下代码到functions.php 里,代码太长，
<?php
get_header(); ?>
<div class="container">
<div class="archives">
<?php
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;
$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
foreach($myposts as $post) :
setup_postdata($post);
$year = mysql2date('Y', $post->post_date);
$month = mysql2date(‘n’, $post->post_date);
$day = mysql2date('j', $post->post_date);
if($year != $previous_year || $month != $previous_month) :
if($ul_open == true) :
echo '</ul>';
endif;
echo '<h4 class="m-title">'; echo the_time('Y-m'); echo '</h4>';
echo '<ul class="archives-monthlisting">';
$ul_open = true;
endif;
$previous_year = $year; $previous_month = $month;
?>
<li>
<a href="<?php the_permalink(); ?>"><span><?php the_time('Y-m-j'); ?></span>
<div class="atitle"><?php the_title(); ?></div></a>
</li>
<?php endforeach; ?>
</ul>
</div></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>style.css:
/*
* 文章归档页面样式
*/
.archive-title{border-bottom:1px #eee solid;position:relative;padding-bottom:4px;margin-bottom:10px}
.archives li{list-style-type:none}
.archives li a{padding:8px 0;display:block}
.archives li a:hover .atitle:after{background:#ff5c43}
.archives li a span{display: inline-block;width:100px;font-size:12px;text-indent:20px}
.archives li a .atitle{display: inline-block;padding:0 15px;position:relative}
.archives li a .atitle:after{position:absolute;left:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""}
.archives li a .atitle:before{position:absolute;left:-8px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}
.archives{position:relative;padding:10px 0}
.archives:before{height:100%;width:4px;background:#eee;position:absolute;left:130px;content:"";top:0}
.m-title{position:relative;margin:10px 0;cursor:pointer}
.m-title:hover:after{background:#ff5c43}
.m-title:before{position:absolute;left:127px; background:#fff; height:18px;width:18px;border-radius:6px;top:3px;content:""}
.m-title:after{position:absolute;left:127px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}
2、创建page-archives.php页面模板
页面内容可以简单以下，主要是在这个页面里要调用函数自定义的归档函数zww_archives_list();
<?php
get_header(); ?>
<div><?php zww_archives_list(); ?> </div>
<?php get_footer(); ?>
登陆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;}其实你可以完全复制，稍加修改。
