WordPress WP原生函数实现归档页面模板实例

1. 归档函数

下面代码放到主题文件 functions.php 里面，另外注意代码里面有中文，所以要把 functions.php 文件编码改为 UTF8 无 BOM 格式

/* Archives list v2014 by zwwooooo | http://zww.me */
function zww_archives_list() {
    if( !$output = get_option('zww_db_cache_archives_list') ){
        $output = '

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

/*
Template Name: Archives
*/
?>

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



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

3. 给主题加载 jQuery 库，没有加载的，把下面这句扔到 functions.php 里面就行了。

wp_enqueue_script('jquery');

4. 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 并找到 ，在其下面加上



因为是放在主题的 the_content() 下面，所以会默认使用主题写好的 h3 ul li 格式，如果要更加有特色，那么就要自己去修改 css 了