制作WordPress归档页面的步骤方法

/* Archives list v2014 by zwwooooo | http://zww.me */
function zww_archives_list() {
if( !$output = get_option('zww_db_cache_archives_list') ){
$output = '<div id="archives"><p><a id="al_expand_collapse" href="#">全部展开/收缩</a> <em>(注: 点击月份可以展开)</em></p>';
$args = array(
'post_type' => 'post', //如果你有多个 post type，可以这样 array('post', 'product', 'news')
'posts_per_page' => -1, //全部 posts
'ignore_sticky_posts' => 1 //忽略 sticky posts
);
$the_query = new WP_Query( $args );
$posts_rebuild = array();
$year = $mon = 0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$post_year = get_the_time('Y');
$post_mon = get_the_time('m');
$post_day = get_the_time('d');
if ($year != $post_year) $year = $post_year;
if ($mon != $post_mon) $mon = $post_mon;
$posts_rebuild[$year][$mon][] = '<li>'. get_the_time('d日: ') .'<a href="'. get_permalink() .'">'. get_the_title() .'</a> <em>('. get_comments_number('0', '1', '%') .')</em></li>';
endwhile;
wp_reset_postdata();
foreach ($posts_rebuild as $key_y => $y) {
$output .= '<h3 class="al_year">'. $key_y .' 年</h3><ul class="al_mon_list">'; //输出年份

<?php
/*
Template Name: Archives
*/
?>

<?php zww_archives_list(); ?>

wp_enqueue_script('jquery');

(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 type="text/javascript">上面那段 jQuery 代码</script>

<div id="archives">
<p>[<a id="al_expand_collapse" href="#">全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>
<h3 class="al_year">'年份</h3>
<ul class="al_mon_list">
<li><span class="al_mon">月份<em> (本月文章数量)</em></span>
<ul class="al_post_list">
<li>号数: <a href="文章链接">文章标题</a> <em>(评论数量)</em></li>
</ul>
</li>
</ul>
</div>

#archives {
position: relative;
/*top: -60px;
left: 150px;*//*原文这两行代码就是影响我最上面“全部展开/收缩”效果的，我删除了这个*/
}
#archives h3 {
margin-bottom: 0;
padding: 0 15px;
border-bottom: 1px solid #ddd;
font-size: 20px;/*这个字体大小和下面的我都做了一些修改*/
font-weight: 400;
text-align: center;
letter-spacing: 5px
}
#archives ul {
list-style: none;
margin: 0 30px;
padding: 10px 0 20px 10px;
border-left: 1px solid #ddd;
font-size: 18px
}
#archives li {
list-style: none;/*这一行代码是我自己添加的，不加这个就会出现ul标签前面的黑色小方块，很难看*/
position: relative;
line-height: 30px
}
#archives ul ul {
margin: -15px 0 0 0;
padding: 15px 0 10px 0
}
#archives ul ul li {
padding: 0 0 0 15px
}
#archives ul ul li:before {
content: "";
position: absolute;
left: 0;
top: 10px;
border-top: 5px dashed transparent;
border-bottom: 5px dashed transparent;
border-left: 10px solid #ddd
}
#al_expand_collapse {
display: inline-block;
line-height: 24px;
padding: 0 10px;
color: #fff;
font-size: 12px;
text-decoration: none;
background: linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent;/*这个颜色和下面的我都做了一些修改*/
background: -webkit-linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent
}
#al_expand_collapse:hover {
background: linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent
}
#archives em {
padding-left: 5px;
font-size: 12px;
color: #777
}
#archives .al_mon {
padding-left: 5px;
font-size: 14px;
font-weight: 700
}
#archives .al_mon:after {
content: "";
position: absolute;
left: -10px;
top: 15px;
width: 10px;
height: 1px;
background: #ddd
}
#archives .al_mon em {
font-size: 12px;
font-weight: 400
}