怎么用代码制作WordPress的归档页面
先看看效果，這個(gè)是我網(wǎng)站的歸檔頁面：http://www.shenjieblog.com/archives
其實(shí)WordPress自帶了一個(gè)歸檔的功能，但是只能顯示在網(wǎng)頁中的某一個(gè)部分，但是我想單獨(dú)制作一個(gè)歸檔頁面，因?yàn)榭匆姾芏嗑W(wǎng)站都有這個(gè)，制作一個(gè)單 獨(dú)的歸檔頁面可以讓訪問者清晰的看到我的網(wǎng)站內(nèi)容，可以讓訪問者輕松地找到自己想要的內(nèi)容，我最開始在陽光盒子的網(wǎng)站看見了他網(wǎng)站的歸檔頁面，感覺效果很 不錯(cuò)，于是想制作一個(gè)和他一樣的效果，百度了一下，加上自己的修改和美化，弄了一下午終于做成了上圖的效果，不多說，方法如下：
原創(chuàng)作者：zwwooooo
特點(diǎn)：
1. 按照年份、月份顯示文章列表
2. 顯示每月的文章數(shù)量（需要配合及Query）
3. 顯示每篇文章的評(píng)論數(shù)
4. 使用 WordPress 原生函數(shù)實(shí)現(xiàn)數(shù)據(jù)調(diào)用
5. 這個(gè)存檔函數(shù)會(huì)在數(shù)據(jù)庫生成一個(gè)表 zww_archives_list 來做緩存，只在發(fā)表/修改文章時(shí)才更新，減少數(shù)據(jù)庫查詢。
6. 即使不使用第5點(diǎn)的數(shù)據(jù)庫緩存功能也比以前的直接 SQL 語句省資源。
這兩天稍微空閑點(diǎn)，看到博客草已人高，所以就找找以前有沒有沒解決的來訪朋友評(píng)論提到的問題。然后想起我 2012 年寫的《代碼實(shí)現(xiàn)WordPress歸檔頁面模板[WP原生函數(shù)篇]》，按照這篇文檔折騰的朋友大部分都成功了，但是總是有部分朋友說出現(xiàn)文章排列不對(duì)或 者文章不全什么的，因?yàn)橛X得大部分朋友都能成功，所以就一直沒去分析。
今天分析了一下，應(yīng)該是有些月份如果 0 篇文章就會(huì)出現(xiàn)問題，這是判斷代碼沒寫好的原因，于是自己想了一下，就重寫了一個(gè)。
簡單說下步驟，
1. 歸檔函數(shù)
下面代碼放到主題文件 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>(注: 點(diǎn)擊月份可以展開)</em></p>'; ????????$args = array( ????????????'post_type' => 'post', //如果你有多個(gè) 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: 因?yàn)椴樵兌扔悬c(diǎn)大，所以有加數(shù)據(jù)庫緩存，只在文章發(fā)表/修改時(shí)才會(huì)更新緩存數(shù)據(jù)，所以測試時(shí)，可以特意去后臺(tái)點(diǎn)“快速編輯”文章然后點(diǎn)更新就可以更新緩存數(shù)據(jù)。
2. 復(fù)制一份主題的 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 代碼：
這次玩了逐個(gè)下拉/收縮效果，想著很好，但我博客感覺效果一般，因?yàn)槲恼绿嗔恕绻恼虏欢?#xff0c;可以把代碼里面 2 個(gè) (s-10<1)?0:s-10 改為 s ，效果會(huì)好看點(diǎn)。
| 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 文件然后調(diào)用的朋友就直接打開 header.php 并找到 ，在其下面加上
| 1 | <script type="text/javascript">上面那段 jQuery 代碼</script> |
因?yàn)槭欠旁谥黝}的 the_content() 下面，所以會(huì)默認(rèn)使用主題寫好的 h3 ul li 格式，如果要更加有特色，那么就要自己去修改 css 了
4. css根據(jù)需要寫，不寫也可以的。HTML結(jié)構(gòu)：
| 1 2 3 4 5 6 7 8 9 10 11 | <div id="archives"> ?????<p>[<a id="al_expand_collapse" href="#">全部展開/收縮</a>] <em>(注: 點(diǎn)擊月份可以展開)</em></p> ?????<h3 class="al_year">'年份</h3> ?????<ul class="al_mon_list"> ?????????<li><span class="al_mon">月份<em> (本月文章數(shù)量)</em></span> ?????????????<ul class="al_post_list"> ?????????????????<li>號(hào)數(shù): <a href="文章鏈接">文章標(biāo)題</a> <em>(評(píng)論數(shù)量)</em></li> ?????????????</ul> ?????????</li> ?????</ul> ?</div> |
上面是原文，現(xiàn)在我來說說我的總結(jié)補(bǔ)充和修改：
1.首先說說上面有些不詳細(xì)的步驟：
（1）：第二步：原文說的復(fù)制page.php更名為 archives.php意 思就是先進(jìn)入cpanel面板里面把page.php這個(gè)頁面先下載下來（路徑一般是public_html/wp-content/themes/【你 主題的名字】這個(gè)目錄中），然后重命名為archives.php，然后不要修改直接上傳到cpanel面板和page.php頁面相同的目錄中，（之所 以說不要修改直接上傳到cpanel面板中再修改是因?yàn)樯婕暗経TF-8的編碼問題，為了避免出錯(cuò)就上傳后再修改），然后按照原文所說的修改。
（2）：第二步：原文說的新建頁面（如叫：歸檔），選擇模版為 Archives意 思就是在你上傳了archives.php并修改好之后，在WordPress后臺(tái)中去新建一個(gè)頁面，然后在新建的時(shí)候在右邊選項(xiàng)中選擇模板為 Archives，然后內(nèi)容不需要填寫，可以修改一下固定鏈接讓其好看一點(diǎn)，比如我的固定鏈接是http://www.shenjieblog.com /archives，如圖：
（3）：第四步：原文作者其實(shí)沒有給出作者自己的CSS效果代碼，但是我谷歌到了一篇文章中給出了原文作者的那種CSS效果，然后之后我直接把那些CSS 代碼復(fù)制到了我的style.css文件最下面，但是出現(xiàn)了兩個(gè)問題：一是歸檔頁面最上面的“全部展開/收縮”按鈕看不見了，想了好久，沒想出原因，后來 打開審查元素，發(fā)現(xiàn)其實(shí)那個(gè)其實(shí)還在，只是因?yàn)楹臀业闹黝}有一些沖突，其實(shí)說白了就是位置錯(cuò)位了，
于是我刪除了兩行代碼就解決了；還有一個(gè)問題就是可能也是因?yàn)槲抑黝}的自帶的ul標(biāo)簽效果和我現(xiàn)在設(shè)置的有沖突，導(dǎo)致我ul前面的小方塊沒有去掉，于是我 有手動(dòng)添加了一行代碼解決了。然后后來我發(fā)現(xiàn)字體太小了，顏色也不好看，我后來又在陽光盒子中看見他的歸檔頁面就是我想要的效果，就是本文最上面的圖片那 種效果，而且我和他使用的主題也都是一樣的，所以我就想說看看他的CSS是什么樣的，最開始的時(shí)候我不知道怎么查看他的那個(gè)CSS，我不可能通過審查元素 看，所以后來我想到了一個(gè)方法，直接把他的style.css文件下載下來，怎么下載呢？直接查看源代碼，他的源代碼很亂，
沒關(guān)系。我把他的代碼全部復(fù)制然后粘貼到Editplus中，你也可以用記事本，然后快捷鍵是ctrl+F，查找，輸入css然后查找，直到找到下面這 種字樣就代表這個(gè)是他使用的css樣式（一般都在最上面，很好找的），注意有時(shí)候不止一個(gè)，然后知道這個(gè)的大體位置之后就在源代碼中去查找，找到之后右 鍵，然后復(fù)制下載鏈接，復(fù)制到迅雷中去下載就可以把他的CSS文件下載下來，如果你像我一樣使用Editplus的話可以直接在Editplus中右鍵， 然后復(fù)制下載鏈接，
這個(gè)就是我下載下來的文件，
可以用記事本打開然后根據(jù)我上面寫的那個(gè)HTML結(jié)構(gòu)查找相應(yīng)的代碼，快捷鍵是ctrl+F，也就是輸入archives然后查找，
找到之后復(fù)制那些代碼到自己后臺(tái)的style.css文件的最后就可以了，然后可以根據(jù)自己的想法修改。
然后我現(xiàn)在我貼出我修改的代碼，修改的部分會(huì)有注釋，然后你們?nèi)绻玫脑捯部梢宰约盒薷囊幌?/span>
| 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;*//*原文這兩行代碼就是影響我最上面“全部展開/收縮”效果的，我刪除了這個(gè)*/ } #archives h3 { ????margin-bottom: 0; ????padding: 0 15px; ????border-bottom: 1px solid #ddd; ????font-size: 20px;/*這個(gè)字體大小和下面的我都做了一些修改*/ ????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;/*這一行代碼是我自己添加的，不加這個(gè)就會(huì)出現(xiàn)ul標(biāo)簽前面的黑色小方塊，很難看*/ ????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;/*這個(gè)顏色和下面的我都做了一些修改*/ ????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 } |
把上面這些代碼復(fù)制到自己WordPress外觀——菜單——編輯——style.css文件的最底部即可。然后刷新一下就可以了。
PS:注意如果刷新之后沒有效果的話可能是因?yàn)闉g覽器的緩存，關(guān)閉瀏覽器之后清除一下緩存再試就可以了，因?yàn)槲矣龅搅诉@個(gè)問題，所以提醒一下大家。
原文網(wǎng)址：http://zww.me/wordpress-archive-page-template-wp-primary-function-2014-edition.z-turn
CSS代碼參考網(wǎng)址：http://www.erro.cn/archives/3856.html
?
轉(zhuǎn)載于:https://www.cnblogs.com/shenjieblog/p/5061237.html
總結(jié)
以上是生活随笔為你收集整理的怎么用代码制作WordPress的归档页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 有哪些好玩的地方值得打卡？
- 下一篇： JDBC常用API小结