WordPress添加文章歸檔頁面

本文要講的文章歸檔，其實就是將所有文章按照年月日歸檔，說白瞭就是一個簡單的網站文章地圖。方法來自 zwwooooo 大師的《代碼實現WordPress歸檔頁面模板[WP原生函數篇] 》。WordPress大學目前已經用上，效果如下：

wpdaxue.com-201211114

想看實際演示的，請訪問 文章存檔

折騰功能：代碼實現WordPress歸檔頁面模板[WP原生函數篇]

原創作者：zwwooooo

特點：

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

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

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

4. 使用 WordPress 原生函數實現數據調用

5. 這個存檔函數會在數據庫生成一個表 zww_archives_list 來做緩存，隻在發表/修改文章時才更新，減少數據庫查詢。

6. 即使不使用第5點的數據庫緩存功能也比以前的直接 SQL 語句省資源。

制作步驟：

1. 把下面的函數扔到所用主題的 functions.php 文件最後一個 ?> 的前面：（註意：因為有中文，所以要把 functions.php 文件轉換為 UTF8 無 BOM 格式，不然中文會亂碼）

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

/* 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&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('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'); // 新發表文章/修改文章時

/* 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&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(‘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，然後在最頂端加入：

1
2
3
4
5

<?php
/*
Template Name: archives
*/
?>

<?php
/*
Template Name: archives
*/
?>

然後找到類似 <?php content(); ?>，在其下面加入如下代碼

1

<?php zww_archives_list(); ?>

<?php zww_archives_list(); ?>

進wp後臺添加一新頁面，在右側欄【頁面屬性】模板選擇 archives

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

1

wp_enqueue_script('jquery');

wp_enqueue_script(‘jquery’);

或者在header.php中添加下面的代碼：

1

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script>

4. jQuery 效果代碼

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

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

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結構：

1
2
3
4
5
6
7
8
9
10
11

<div id="archives">
     <p>[<a id="al_expand_collapse" href="#">全部展開/收縮</a>] <em>(註: 點擊月份可以展開)</em></p>
     <h3 class="al_year">'年份</h3>
     <ul class="al_mon_list">
         <li><span class="al_mon">月份<em> (本月文章數量)</em></span>
             <ul class="al_post_list">
                 <li>號數: <a href="文章鏈接">文章標題</a> <em>(評論數量)</em></li>
             </ul>
         </li>
     </ul>
 </div>

<div id="archives">
<p>[<a id="al_expand_collapse" href="#">全部展開/收縮</a>] <em>(註: 點擊月份可以展開)</em></p>
<h3 class="al_year">’年份</h3>
<ul class="al_mon_list">
<li><span class="al_mon">月份<em> (本月文章數量)</em></span>
<ul class="al_post_list">
<li>號數: <a href="文章鏈接">文章標題</a> <em>(評論數量)</em></li>
</ul>
</li>
</ul>
</div>

到這裡就OK瞭。感謝 zwwooooo大師！

Related posts:

  1. 讓 WordPress 文章/頁面自動到期 Post Expirator
  2. WordPress不同分類使用不同的文章模板
  3. WordPress分類存檔頁面輸出分類標題、描述和RSS訂閱
  4. 隱藏/禁用 WordPress 3.6+ 的文章形式UI
  5. WordPress定時發佈文章/解決定時發佈失效
  6. WordPress 隨機刷新舊文章為新文章 Old Post Promoter
  7. WordPress為頁面（page）添加相關頁面
  8. 讓 WordPress 隻搜索文章的標題

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *