WordPress中日志归档页的制作

本文实现的效果：http://d-prototype.com/posts

你需要对Wordpress的当前正在使用的主题做出如下的变更。
一、修改functions.php
添加如下代码。

/* 自定义文章归档页面 */
//加载jQuery
wp_enqueue_script('jquery');
//归档函数本体
 function adamhuan_archives_list() {
     if( !$output = get_option('adamhuan_archives_list') ){
         $output = '<div id="archives"><p>[<a id="al_expand_collapse" href="#">全部展开/收缩</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('adamhuan_archives_list', $output);
     }
     echo $output;
 }
 function clear_adam_cache() {
     update_option(adamhuan_archives_list, ''); 
 }
 add_action('save_post', 'clear_adam_cache'); // 新发表文章/修改文章时

/* 自定义文章归档页面 */

//加载jQuery

wp_enqueue_script('jquery');

//归档函数本体

function adamhuan_archives_list() {

if( !$output = get_option('adamhuan_archives_list') ){

$output = '<div id="archives"><p>[<a id="al_expand_collapse" href="#">全部展开/收缩</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('adamhuan_archives_list', $output);

}

echo $output;

}

function clear_adam_cache() {

update_option(adamhuan_archives_list, '');

}

add_action('save_post', 'clear_adam_cache'); // 新发表文章/修改文章时

二、修改header.php
在

<?php
 	cryout_header_hook();
	wp_head(); ?>

<?php

cryout_header_hook();

wp_head(); ?>

与

</head>

</head>

之间添加：

<script type="text/javascript">
jQuery(document).ready(function($){
     //ArchivedByDate，存档页的伸缩效果
     (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>

jQuery(document).ready(function($){

//ArchivedByDate，存档页的伸缩效果

(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>

三、创建模板文件：archived_by_date_adamhuan.php

<?php
/*
Template Name: ArchivedByDate
*/
get_header(); ?>

<section id="container">
<div id="content" role="main">
			
<?php cryout_before_content_hook(); ?>
			
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div class="box" id="post-<?php the_ID(); ?>">

<div id="page-cnt" class="tags">
<?php adamhuan_archives_list();?>
</div>

</div>

<?php endwhile; // end of the loop. ?>
<?php cryout_after_content_hook(); ?>

</div><!-- #content -->

</section><!-- #container -->

<?php get_footer(); ?>