今天在製作一個網站模板時，突然就想嘗試下用 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>

折騰完，收工！