用WordPress原生函数实现文章归档页面

  • 按照年份、月份显示文章列表
  • 显示每月的文章数量(需要配合及Query)
  • 显示每篇文章的评论数
  • 使用 wordpress 原生函数实现数据调用
  • 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存,只在发表/修改文章时才更新,减少数据库查询。
  • 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。

本站使用的也是这代码,演示效果请看:http://img.zlsin.com/archives(已失效)

利用wordpress原生函数实现文章归档页面步骤:

1. 把下面的函数扔到所用主题的 functions.php 文件里面。即最后面的 ?> 前面。

注意:因为有中文,所以最好直接在wordpress后台修改。 如果用其它编辑器的话,要把 functions.php 文件转换为 UTF8 无 BOM 格式,不然中文会乱码。

/* Archives list by zwwooooo */
function zww_archives_list() {
if( !$output = get_option(‘zww_archives_list’) ){
$output = ‘<div id=”archives”><p>[<a id="al_expand_collapse" href="#" rel="external nofollow" rel="external nofollow" >全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>’;
$the_query = new WP_Query( ‘posts_per_page=-1&ignore_sticky_posts=1′ ); //update: 加上忽略置顶文章
$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=”al_year”>’. $year .’ 年</h3><ul class=”al_mon_list”>’; //输出年份
}
if ($mon != $mon_tmp) {
$mon = $mon_tmp;
$output .= ‘<li><span class=”al_mon”>’. $mon .’ 月</span><ul class=”al_post_list”>’; //输出月份
}
$output .= ‘<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();
$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 content(); ?>,在其下面加入如下代码

<?php zww_archives_list(); ?>

进wp后台添加一新页面,在右侧栏模板选择 archives

3.给主题加载 jQuery 库。在archives.php找到 <?php wp_head(); ?>,在其下面添加以下代码

<script type=”text/javascript”>
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();
});
})();
});
</script>

4. css根据需要写,不写也可以的。HTML结构:

<div id=”archives”>
<p>[<a id="al_expand_collapse" href="#" rel="external nofollow" rel="external nofollow" >全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>
<h3 class=”al_year”>’年份</h3>
<ul class=”al_mon_list”>
<li><span class=”al_mon”>月份<em> (本月文章数量)</em></span>
<ul class=”al_post_list”>
<li>号数: <a href=”文章链接”>文章标题</a> <em>(评论数量)</em></li>
</ul>
</li>
</ul>
</div>

原作者发布最新带缓存版,传送门点我




分享

6 条评论 - 我要发评论

  1. 月婵

    很好啊.谢谢博主啊

    回复
  2. 月婵

    不错,顶的人不多啊,快点继续

    回复
      1. 随意博客

        @微而 我是用几行代码实现的,看效果http://chendong.duapp.com/archives :???: ,弄好以后才发现可以参考D4、D5的模版代码 :cool:

        回复

发表评论