WordPress中日志归档页的制作
本文实现的效果:http://d-prototype.com/posts
你需要对Wordpress的当前正在使用的主题做出如下的变更。
一、修改functions.php
添加如下代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/* 自定义文章归档页面 */ //加载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
在
1 2 3 |
<?php cryout_header_hook(); wp_head(); ?> |
与
1 |
</head> |
之间添加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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> |
三、创建模板文件:archived_by_date_adamhuan.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?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(); ?> |