WordPress建立文章归档页面

当文章越写越多的时候，为文档单独建立一个页面是个不错的选择。
1. 归档函数
下面代码放到主题文件 functions.php 里面，另外注意代码里面有中文，所以要把 functions.php 文件编码改为 UTF8 无 BOM 格式。

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' => array('archives', 'post', 'zsay'),
                '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) {
                $y_i = 0; $y_output = '';
                foreach ($y as $key_m => $m) {
                    $posts = ''; $i = 0;
                    foreach ($m as $p) {
                        ++$i; ++$y_i;
                        $posts .= $p;
                    }
                    $y_output .= '<li><span class="al_mon">'. $key_m .' 月 <em>( '. $i .' 篇文章 )</em></span><ul class="al_post_list">'; //输出月份
                    $y_output .= $posts; //输出 posts
                    $y_output .= '</ul></li>';
                }
                $output .= '<h3 class="al_year">'. $key_y .' 年 <em>( '. $y_i .' 篇文章 )</em></h3><ul class="al_mon_list">'; //输出年份
                $output .= $y_output;
                $output .= '</ul>';
            }
  
            $output .= '</div>';
            update_option('zww_db_cache_archives_list', $output);
        }
        echo $output;
    }
    function clear_db_cache_archives_list() {
        update_option('zww_db_cache_archives_list', ''); // 清空 zww_archives_list
    }
    add_action('save_post', 'clear_db_cache_archives_list'); // 新发表文章/修改文章时

PS: 因为查询度有点大，所以有加数据库缓存，只在文章发表/修改时才会更新缓存数据，所以测试时，可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据。

2. 复制一份主题的 page.php 更名为 archives.php，然后在最顶端加入

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

在 archives.php 找到类似 ，在其下面加入如下代码

<?php zww_archives_list(); ?>

然后新建页面（如叫：归档），选择模版为 Archives

3. jQuery 代码：

这次玩了逐个下拉/收缩效果，想着很好，但我博客感觉效果一般，因为文章太多了…如果文章不多，可以把代码里面 2 个

(s-10<1)?0:s-10 

改为 s，效果会好看点。

(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);

PS：不知道怎么写 js 文件然后调用的朋友就直接打开 header.php 并找到

<?php wp_head(); ?>

，在其下面加上

<script type="text/javascript">上面那段 jQuery 代码</script>

补充:

如果需要删除原来的显示评论个数的代码,需要这样做:

1.在archives.php中的

<?php zww_archives_list(); ?>

前面加上

<?php clear_db_cache_archives_list()?>

这样是为了显示结果前,先清空原来的缓存
2.去掉functions.php中的获取评论函数,最后变成:

$posts_rebuild[$year][$mon][] = '<li>'. get_the_time('d日: ') .'<a href="'. get_permalink() .'">'. get_the_title() .'</a> </li>'

3.重新打开一次归档页面,评论数消失

4.将第一步中添加的

<?php zww_archives_list(); ?>

删掉,否则以后文章多了查询会变慢.
具体效果可参考本站归档页面。