本教程我們來用實例代碼講講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.     }//開源軟件:Vevb.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 了.