折腾功能：代码实现WordPress归档页面模板[WP原生函数篇]
原创作者：zwwooooo
特点：
1. 按照年份、月份显示文章列表
2. 显示每月的文章数量（需要配合及jQuery）
3. 显示每篇文章的评论数
4. 使用 WordPress 原生函数实现数据调用
5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存，只在发表/修改文章时才更新，减少数据库查询。
6. 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。
简单说下步骤，也可以参考前面提及 2012 年的文章。
1. 归档函数
下面代码放到主题文件 functions.php 里面，另外注意代码里面有中文，所以要把 functions.php 文件编码改为 UTF8 无 BOM 格式
/* Archives list v2014 by zwwooooo */
function zww_archives_list() {
if( !$output = get_option('zww_db_cache_archives_list') ){
$output = '
全部展开/收缩 (注: 点击月份可以展开
';
$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][] = '
'. get_the_time('d日: ') .''. get_the_title() .' ('. get_comments_number('0', '1', '%') .')
';
endwhile;
wp_reset_postdata();
foreach ($posts_rebuild as $key_y => $y) {
$output .= '<h3 class="al_year">'. $key_y .' 年
'; //输出年份
foreach ($y as $key_m => $m) {
$posts = ''; $i = 0;
foreach ($m as $p) {
++$i;
$posts .= $p;
}
$output .= '<li><span class="al_mon">'. $key_m .' 月 ( '. $i .' 篇文章 )
'; //输出月份
$output .= $posts; //输出 posts
$output .= '
';
}
$output .= '
';
}
$output .= '
';
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，然后在最顶端加入：
在 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 格式，顺便放出套用zww的css：
/* page:archives */
#archives {
position: relative;
}
#archives p {
position: absolute;
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: 12px;
}
#archives li {
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, #8c9fcc 20%, #49629e 80%) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(to bottom, #8c9fcc 20%, #49629e 80%) repeat scroll 0 0 transparent;
}
#al_expand_collapse:hover {
background: linear-gradient(to bottom, #49629e 20%, #8c9fcc 80%) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(to bottom, #49629e 20%, #8c9fcc 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;
}