WordPress 归档页面模板[WP原生函数实现2014版]

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 = '<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">'; // 输出年份
			foreach ($y as $key_m => $m) {
				$posts = ''; $i = 0;
				foreach ($m as $p) {
					++$i;
					$posts .= $p;
				}
				$output .= '<li><span class="al_mon">'. $key_m .'月 <em> ('. $i .'篇文章)</em></span><ul class="al_post_list">'; // 输出月份
				$output .= $posts; // 输出 posts
				$output .= '</ul></li>';
			}
			$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 库，没有加载的，把下面这句扔到 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 并找到，在其下面加上

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

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