今天在製作一個網站模板時，突然就想嘗試下用 WordPress 原生函式來實現歸檔頁面的內容呼叫。

經過測試，我使用了 WordPress 推薦的 WP_Query()
函式來呼叫所有文章，除了每月的文章數量無法直接呼叫到外，其它資料都可以實現，雖然可以藉助另外的 WP 原生函式實現每月文章數量，但是比較繁瑣。所以我
另外想了個辦法：我部落格的存檔頁是用了 jQuery 來實現每月文章列表的伸縮效果，於是 「每月文章數量顯示」 我就用 jQuery 來實現了。

下面是過程和方法，有興趣的朋友可以試試。

折騰功能：程式碼實現 WordPress 歸檔頁面模板 ［WP 原生函式篇］

原創作者：zwwooooo

特點：

1. 按照年份、月份顯示文章列表

2. 顯示每月的文章數量 （需要配合及 Query）

3. 顯示每篇文章的評論數

4. 使用 WordPress 原生函式實現資料呼叫

5. 這個存檔函式會在資料庫生成一個表 zww_archives_list 來做快取，只在發表/修改文章時才更新，減少資料庫查詢。

6. 即使不使用第 5 點的資料庫快取功能也比以前的直接 SQL 語句省資源。

線上演示效果：見我部落格的存檔頁

效果圖：

程式碼實現WordPress歸檔頁面模板[WP原生函式篇]

步驟：

1. 把下面的函式扔到所用主題的 functions.php 檔案裡面：（注意：因為有中文，所以要把 functions.php 檔案轉換為 UTF8 無 BOM 格式，不然中文會亂碼）

/* Archives list by zwwooooo | http://zww.me */
 function zww_archives_list() {
     if( !$output = get_option('zww_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' );
         $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 >'. $year .' 年</h3><ul >'; //輸出年份
             }
             if ($mon != $mon_tmp) {
                 $mon = $mon_tmp;
                
$output .= '<li><span >'. $mon .'
月</span><ul >'; //輸出月份
             }
            
$output .= '<li>'. get_the_time('d 日: ') .'<a href="http://'.br%20/get_permalink()%20.'">'. 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 zww_archives_list(); ?>

進 wp 後臺新增一新頁面，在右側欄模板選擇 archives

3. 給主題載入 jQuery 庫，沒有載入的，把下面這句扔到 functions.php 裡面就行了。

wp_enqueue_script('jquery');

4. jQuery 效果程式碼

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();
         });
     })();
 });

PS：不知道怎麼寫 js 檔案呼叫的就直接開啟 header.php 並找到 <?php wp_head(); ?>，在其下面加上
<script type="text/javascript"> 上面那段 jQuery 程式碼</script>

4. css 根據需要寫，不寫也可以的。 HTML 結構：

<div id="archives">
     <p>[<a id="al_expand_collapse" href="#"> 全部展開/收縮</a>] <em>(注: 點選月份可以展開)</em></p>
     <h3 >'年份</h3>
     <ul >
         <li><span > 月份<em> (本月文章數量)</em></span>
             <ul >
                 <li> 號數: <a href="文章連結"> 文章標題</a> <em>(評論數量)</em></li>
             </ul>
         </li>
     </ul>
 </div>

折騰完，收工！