先看看效果，這個是我網站的歸檔頁面：http://www.shenjieblog.com/archives
其實WordPress自帶了一個歸檔的功能，但是只能顯示在網頁中的某一個部分，但是我想單獨制作一個歸檔頁面，因為看見很多網站都有這個，制作一個單 獨的歸檔頁面可以讓訪問者清晰的看到我的網站內容，可以讓訪問者輕松地找到自己想要的內容，我最開始在陽光盒子的網站看見了他網站的歸檔頁面，感覺效果很 不錯，于是想制作一個和他一樣的效果，百度了一下，加上自己的修改和美化，弄了一下午終于做成了上圖的效果，不多說，方法如下：
原創作者：zwwooooo
特點：
1. 按照年份、月份顯示文章列表
2. 顯示每月的文章數量（需要配合及Query）
3. 顯示每篇文章的評論數
4. 使用 WordPress 原生函數實現數據調用
5. 這個存檔函數會在數據庫生成一個表 zww_archives_list 來做緩存，只在發表/修改文章時才更新，減少數據庫查詢。
6. 即使不使用第5點的數據庫緩存功能也比以前的直接 SQL 語句省資源。
這兩天稍微空閑點，看到博客草已人高，所以就找找以前有沒有沒解決的來訪朋友評論提到的問題。然后想起我 2012 年寫的《代碼實現WordPress歸檔頁面模板[WP原生函數篇]》，按照這篇文檔折騰的朋友大部分都成功了，但是總是有部分朋友說出現文章排列不對或 者文章不全什么的，因為覺得大部分朋友都能成功，所以就一直沒去分析。
今天分析了一下，應該是有些月份如果 0 篇文章就會出現問題，這是判斷代碼沒寫好的原因，于是自己想了一下，就重寫了一個。
簡單說下步驟，
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 | /* Archives list v2014 by zwwooooo | http://zww.me */function zww_archives_list() {????if( !$output = get_option('zww_db_cache_archives_list') ){????????$output = '<div id="archives"><p><a id="al_expand_collapse" href="#">全部展開/收縮</a> <em>(注: 點擊月份可以展開)</em></p>';????????$args = array(????????????'post_type' => 'post', //如果你有多個 post type，可以這樣 array('post', 'product', 'news')? ????????????'posts_per_page' => -1, //全部 posts????????????'ignore_sticky_posts' => 1 //忽略 sticky posts????????);????????$the_query = new WP_Query( $args );????????$posts_rebuild = array();????????$year = $mon = 0;????????while ( $the_query->have_posts() ) : $the_query->the_post();????????????$post_year = get_the_time('Y');????????????$post_mon = get_the_time('m');????????????$post_day = get_the_time('d');????????????if ($year != $post_year) $year = $post_year;????????????if ($mon != $post_mon) $mon = $post_mon;????????????$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>';????????endwhile;????????wp_reset_postdata();????????foreach ($posts_rebuild as $key_y => $y) {????????????$output .= '<h3 class="al_year">'. $key_y .' 年</h3><ul class="al_mon_list">'; //輸出年份 |
PS: 因為查詢度有點大，所以有加數據庫緩存，只在文章發表/修改時才會更新緩存數據，所以測試時，可以特意去后臺點“快速編輯”文章然后點更新就可以更新緩存數據。
2. 復制一份主題的 page.php 更名為 archives.php，然后在最頂端加入：
| 1 2 3 4 5 | <?php/*Template Name: Archives*/?> |
在 archives.php 找到類似 ，在其下面加入如下代碼
| 1 | <?php zww_archives_list(); ?> |
然后新建頁面（如叫：歸檔），選擇模版為 Archives
3. 給主題加載 jQuery 庫，沒有加載的，把下面這句扔到 functions.php 里面就行了。
| 1 | wp_enqueue_script('jquery'); |
4. jQuery 代碼：
這次玩了逐個下拉/收縮效果，想著很好，但我博客感覺效果一般，因為文章太多了…如果文章不多，可以把代碼里面 2 個 (s-10<1)?0:s-10 改為 s ，效果會好看點。
| 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 33 34 35 36 37 | (function ($, window) {????$(function() {????????var $a = $('#archives'),????????????$m = $('.al_mon', $a),????????????$l = $('.al_post_list', $a),????????????$l_f = $('.al_post_list:first', $a);????????$l.hide();????????$l_f.show();????????$m.css('cursor', 's-resize').on('click', function(){????????????$(this).next().slideToggle(400);????????});????????var animate = function(index, status, s) {????????????if (index > $l.length) {????????????????return;????????????}????????????if (status == 'up') {????????????????$l.eq(index).slideUp(s, function() {????????????????????animate(index+1, status, (s-10<1)?0:s-10);????????????????});????????????} else {????????????????$l.eq(index).slideDown(s, function() {????????????????????animate(index+1, status, (s-10<1)?0:s-10);????????????????});????????????}????????};????????$('#al_expand_collapse').on('click', function(e){????????????e.preventDefault();????????????if ( $(this).data('s') ) {????????????????$(this).data('s', '');????????????????animate(0, 'up', 100);????????????} else {????????????????$(this).data('s', 1);????????????????animate(0, 'down', 100);????????????}????????});????});})(jQuery, window); |
PS：不知道怎么寫 js 文件然后調用的朋友就直接打開 header.php 并找到 ，在其下面加上
| 1 | <script type="text/javascript">上面那段 jQuery 代碼</script> |
因為是放在主題的 the_content() 下面，所以會默認使用主題寫好的 h3 ul li 格式，如果要更加有特色，那么就要自己去修改 css 了
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> |
上面是原文，現在我來說說我的總結補充和修改：
1.首先說說上面有些不詳細的步驟：
（1）：第二步：原文說的復制page.php更名為 archives.php意 思就是先進入cpanel面板里面把page.php這個頁面先下載下來（路徑一般是public_html/wp-content/themes/【你 主題的名字】這個目錄中），然后重命名為archives.php，然后不要修改直接上傳到cpanel面板和page.php頁面相同的目錄中，（之所 以說不要修改直接上傳到cpanel面板中再修改是因為涉及到UTF-8的編碼問題，為了避免出錯就上傳后再修改），然后按照原文所說的修改。
（2）：第二步：原文說的新建頁面（如叫：歸檔），選擇模版為 Archives意 思就是在你上傳了archives.php并修改好之后，在WordPress后臺中去新建一個頁面，然后在新建的時候在右邊選項中選擇模板為 Archives，然后內容不需要填寫，可以修改一下固定鏈接讓其好看一點，比如我的固定鏈接是http://www.shenjieblog.com /archives，如圖：
（3）：第四步：原文作者其實沒有給出作者自己的CSS效果代碼，但是我谷歌到了一篇文章中給出了原文作者的那種CSS效果，然后之后我直接把那些CSS 代碼復制到了我的style.css文件最下面，但是出現了兩個問題：一是歸檔頁面最上面的“全部展開/收縮”按鈕看不見了，想了好久，沒想出原因，后來 打開審查元素，發現其實那個其實還在，只是因為和我的主題有一些沖突，其實說白了就是位置錯位了，
于是我刪除了兩行代碼就解決了；還有一個問題就是可能也是因為我主題的自帶的ul標簽效果和我現在設置的有沖突，導致我ul前面的小方塊沒有去掉，于是我 有手動添加了一行代碼解決了。然后后來我發現字體太小了，顏色也不好看，我后來又在陽光盒子中看見他的歸檔頁面就是我想要的效果，就是本文最上面的圖片那 種效果，而且我和他使用的主題也都是一樣的，所以我就想說看看他的CSS是什么樣的，最開始的時候我不知道怎么查看他的那個CSS，我不可能通過審查元素 看，所以后來我想到了一個方法，直接把他的style.css文件下載下來，怎么下載呢？直接查看源代碼，他的源代碼很亂，
沒關系。我把他的代碼全部復制然后粘貼到Editplus中，你也可以用記事本，然后快捷鍵是ctrl+F，查找，輸入css然后查找，直到找到下面這 種字樣就代表這個是他使用的css樣式（一般都在最上面，很好找的），注意有時候不止一個，然后知道這個的大體位置之后就在源代碼中去查找，找到之后右 鍵，然后復制下載鏈接，復制到迅雷中去下載就可以把他的CSS文件下載下來，如果你像我一樣使用Editplus的話可以直接在Editplus中右鍵， 然后復制下載鏈接，
這個就是我下載下來的文件，
可以用記事本打開然后根據我上面寫的那個HTML結構查找相應的代碼，快捷鍵是ctrl+F，也就是輸入archives然后查找，
找到之后復制那些代碼到自己后臺的style.css文件的最后就可以了，然后可以根據自己的想法修改。
然后我現在我貼出我修改的代碼，修改的部分會有注釋，然后你們如果要用的話也可以自己修改一下
| 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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | #archives {????position: relative;????/*top: -60px;????left: 150px;*//*原文這兩行代碼就是影響我最上面“全部展開/收縮”效果的，我刪除了這個*/}#archives h3 {????margin-bottom: 0;????padding: 0 15px;????border-bottom: 1px solid #ddd;????font-size: 20px;/*這個字體大小和下面的我都做了一些修改*/????font-weight: 400;????text-align: center;????letter-spacing: 5px}#archives ul {????list-style: none;????margin: 0 30px;????padding: 10px 0 20px 10px;????border-left: 1px solid #ddd;????font-size: 18px}#archives li {????list-style: none;/*這一行代碼是我自己添加的，不加這個就會出現ul標簽前面的黑色小方塊，很難看*/????position: relative;????line-height: 30px}#archives ul ul {????margin: -15px 0 0 0;????padding: 15px 0 10px 0}#archives ul ul li {????padding: 0 0 0 15px}#archives ul ul li:before {????content: "";????position: absolute;????left: 0;????top: 10px;????border-top: 5px dashed transparent;????border-bottom: 5px dashed transparent;????border-left: 10px solid #ddd}#al_expand_collapse {????display: inline-block;????line-height: 24px;????padding: 0 10px;????color: #fff;????font-size: 12px;????text-decoration: none;????background: linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent;/*這個顏色和下面的我都做了一些修改*/????background: -webkit-linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent}#al_expand_collapse:hover {????background: linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent;????background: -webkit-linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent}#archives em {????padding-left: 5px;????font-size: 12px;????color: #777}#archives .al_mon {????padding-left: 5px;????font-size: 14px;????font-weight: 700}#archives .al_mon:after {????content: "";????position: absolute;????left: -10px;????top: 15px;????width: 10px;????height: 1px;????background: #ddd}#archives .al_mon em {????font-size: 12px;????font-weight: 400} |
把上面這些代碼復制到自己WordPress外觀——菜單——編輯——style.css文件的最底部即可。然后刷新一下就可以了。
PS:注意如果刷新之后沒有效果的話可能是因為瀏覽器的緩存，關閉瀏覽器之后清除一下緩存再試就可以了，因為我遇到了這個問題，所以提醒一下大家。
原文網址：http://zww.me/wordpress-archive-page-template-wp-primary-function-2014-edition.z-turn
CSS代碼參考網址：http://www.erro.cn/archives/3856.html
?
--v$session_longops)
--v$db_object_cache)
