先看看效果，這個是我網站的歸檔頁面：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