代码实现WordPress归档页面模板[WP原生函数篇]

　　本日在建造一个主题时，溘然就想实验下用 WordPress 原生函数来实现归档页面的内容挪用。

　　颠末测试，我利用了 WordPress 推荐的 WP_Query() 函数来挪用所有文章，除了每月的文章数量无法直接挪用到外，其它数据都可以实现，固然可以借助别的的 WP 原生函数实现每月文章数量，可是较量繁琐。所以我别的想了个步伐：我博客的存档页是用了 jQuery 来实现每月文章列表的伸缩结果，于是“每月文章数量显示”我就用 jQuery 来实现了。

　　下面是进程和要领，有乐趣的伴侣可以试试。

折腾成果：代码实现WordPress归档页面模板［WP原生函数篇］

原创作者：zwwooooo

特点：

1. 凭据年份、月份显示文章列表

2. 显示每月的文章数量（需要共同及Query）

3. 显示每篇文章的评论数

4. 利用 WordPress 原生函数实现数据挪用

5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存，只在颁发/修改文章时才更新，淘汰数据库查询。

6. 纵然不利用第5点的数据库缓存成果也比以前的直接 SQL 语句省资源。

在线演示结果：见博客存档页

结果图：

步调：

1. 把下面的函数扔到所用主题的 functions.php 文件内里：（留意：因为有中文，所以要把 functions.php 文件转换为 UTF8 无 BOM 名目，否则中文会乱码）

/* Archives list by zwwooooo | */
function zww_archives_list() {
if( !$output = get_option('zww_archives_list') ){
$output = '<div id=http://down.chinaz.com/try/201203/"archives"><p>[<a id=http://down.chinaz.com/try/201203/"al_expand_collapse" href=http://down.chinaz.com/try/201203/"#">全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>';
$the_query = new WP_Query( 'posts_per_page=-1' );
$year=0; $mon=0; $i=0; $j=0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$year_tmp = get_the_time('Y');
$mon_tmp = get_the_time('m');
$y=$year; $m=$mon;
if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';
if ($year != $year_tmp && $year > 0) $output .= '</ul>';
if ($year != $year_tmp) {
$year = $year_tmp;
$output .= '<h3 class=http://down.chinaz.com/try/201203/"al_year">'. $year .' 年</h3><ul class=http://down.chinaz.com/try/201203/"al_mon_list">'; //输出年份
}
if ($mon != $mon_tmp) {
$mon = $mon_tmp;
$output .= '<li><span class=http://down.chinaz.com/try/201203/"al_mon">'. $mon .' 月</span><ul class=http://down.chinaz.com/try/201203/"al_post_list">'; //输出月份
}
$output .= '<li>'. get_the_time('d日: ') .'<a href=http://down.chinaz.com/try/201203/"'. get_permalink() .'">'. get_the_title() .'</a> <em>('. get_comments_number('0', '1', '%') .')</em></li>'; //输出文章日期和标题
endwhile;
wp_reset_postdata();
$output .= '</ul></li></ul></div>';
update_option('zww_archives_list', $output);
}
echo $output;
}
function clear_zal_cache() {
update_option('zww_archives_list', ''); // 清空 zww_archives_list
}
add_action('save_post', 'clear_zal_cache'); // 新颁发文章/修改文章时

2. 复制一份主题的 page.php 改名为 archives.php，然后在最顶端插手：

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

然后找到雷同 ，在其下面插手如下代码

<?php zww_archives_list(); ?>

进wp靠山添加一新页面，在右侧栏模板选择 archives

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

wp_enqueue_script('jquery');

4. jQuery 结果代码

jQuery(document).ready(function($){
//===================================存档页面 jQ伸缩
(function(){
$('#al_expand_collapse,#archives span.al_mon').css({cursor:"s-resize"});
$('#archives span.al_mon').each(function(){
var num=$(this).next().children('li').size();
var text=$(this).text();
$(this).html(text+'<em> ( '+num+' 篇文章 )</em>');
});
var $al_post_list=$('#archives ul.al_post_list'),
$al_post_list_f=$('#archives ul.al_post_list:first');
$al_post_list.hide(1,function(){
$al_post_list_f.show();
});
$('#archives span.al_mon').click(function(){
$(this).next().slideToggle(400);
return false;
});
$('#al_expand_collapse').toggle(function(){
$al_post_list.show();
},function(){
$al_post_list.hide();
});
})();
});