本教程我们来用实例代码讲讲WordPress用WP原生态函数归档页面模板,归档函数放在你所在的主题目录的functions.php里面.

1.归档函数

下面代码放到主题文件 functions.php 里面,另外注意代码里面有中文,所以要把 functions.php 文件编码改为 UTF8 无 BOM 格式.

1. /* Archives list v2014 by zwwooooo | http://zww.me */ 
2. function zww_archives_list() { 
3.     if( !$output = get_option('zww_db_cache_archives_list') ){ 
4.         $output = '<div id="archives"><p><a id="al_expand_collapse" href="#">全部展开/收缩</a> <em>(注: 点击月份可以展开)</em></p>'; 
5.         $args = array( 
6.             'post_type' => 'post', //如果你有多个 post type，可以这样 array('post', 'product', 'news')   
7.             'posts_per_page' => -1, //全部 posts 
8.             'ignore_sticky_posts' => 1 //忽略 sticky posts 
9.  
10.         ); 
11.         $the_query = new WP_Query( $args ); 
12.         $posts_rebuild = array(); 
13.         $year = $mon = 0; 
14.         while ( $the_query->have_posts() ) : $the_query->the_post(); 
15.             $post_year = get_the_time('Y'); 
16.             $post_mon = get_the_time('m'); 
17.             $post_day = get_the_time('d'); 
18.             if ($year != $post_year) $year = $post_year; 
19.             if ($mon != $post_mon) $mon = $post_mon; 
20.             $posts_rebuild[$year][$mon][] = '<li>'. get_the_time('d日: ') .'<a href="'. get_permalink() .'">'. get_the_title() .'</a> <em>('. get_comments_number('0', '1', '%') .')</em></li>'; 
21.         endwhile; 
22.         wp_reset_postdata(); 
23.  
24.         foreach ($posts_rebuild as $key_y => $y) { 
25.             $output .= '<h3 class="al_year">'. $key_y .' 年</h3><ul class="al_mon_list">'; //输出年份 
26.             foreach ($y as $key_m => $m) { 
27.                 $posts = ''; $i = 0; 
28.                 foreach ($m as $p) { 
29.                     ++$i; 
30.                     $posts .= $p; 
31.                 } 
32.                 $output .= '<li><span class="al_mon">'. $key_m .' 月 <em> ( '. $i .' 篇文章 )</em></span><ul class="al_post_list">'; //输出月份 
33.                 $output .= $posts; //输出 posts 
34.                 $output .= '</ul></li>'; 
35.             } 
36.             $output .= '</ul>'; 
37.         } 
38.  
39.         $output .= '</div>'; 
40.         update_option('zww_db_cache_archives_list', $output); 
41.     }//开源软件:phpfensi.com 
42.     echo $output; 
43. } 
44. function clear_db_cache_archives_list() { 
45.     update_option('zww_db_cache_archives_list', ''); // 清空 zww_archives_list 
46. } 
47. add_action('save_post', 'clear_db_cache_archives_list'); // 新发表文章/修改文章时 

PS:因为查询度有点大,所以有加数据库缓存,只在文章发表/修改时才会更新缓存数据,所以测试时,可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据.

2.复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:

1. <?php 
2. /* 
3. Template Name: Archives 
4. */ 
5. ?> 

在 archives.php 找到类似 <?php content(); ?>,在其下面加入如下代码"

<?php zww_archives_list(); ?>

然后新建页面,如叫:归档,选择模版为 Archives

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

wp_enqueue_script('jquery');

4.jQuery 代码:

这次玩了逐个下拉/收缩效果,想着很好,但我博客感觉效果一般,因为文章太多了...如果文章不多,可以把代码里面 2 个 (s-10<1)?0:s-10 改为 s,效果会好看点.

1. (function ($, window) { 
2.     $(function() { 
3.         var $a = $('#archives'), 
4.             $m = $('.al_mon', $a), 
5.             $l = $('.al_post_list', $a), 
6.             $l_f = $('.al_post_list:first', $a); 
7.         $l.hide(); 
8.         $l_f.show(); 
9.         $m.css('cursor', 's-resize').on('click', function(){ 
10.             $(this).next().slideToggle(400); 
11.         }); 
12.         var animate = function(index, status, s) { 
13.             if (index > $l.length) { 
14.                 return; 
15.             } 
16.             if (status == 'up') { 
17.                 $l.eq(index).slideUp(s, function() { 
18.                     animate(index+1, status, (s-10<1)?0:s-10); 
19.                 }); 
20.             } else { 
21.                 $l.eq(index).slideDown(s, function() { 
22.                     animate(index+1, status, (s-10<1)?0:s-10); 
23.                 }); 
24.             } 
25.         }; 
26.         $('#al_expand_collapse').on('click', function(e){ 
27.             e.preventDefault(); 
28.             if ( $(this).data('s') ) { 
29.                 $(this).data('s', ''); 
30.                 animate(0, 'up', 100); 
31.             } else { 
32.                 $(this).data('s', 1); 
33.                 animate(0, 'down', 100); 
34.             } 
35.         }); 
36.     }); 
37. })(jQuery, window); 

PS:不知道怎么写 js 文件然后调用的朋友就直接打开 header.php 并找到 <?php wp_head(); ?>,在其下面加上:

<script type="text/javascript">上面那段 jQuery 代码</script>

因为是放在主题的 the_content() 下面,所以会默认使用主题写好的 h3 ul li 格式，如果要更加有特色,那么就要自己去修改 css 了.

Tags: WP原生函数 WordPress归档页面

分享到：