第一版
水煮魚：
https://blog.wpjam.com/2007/10/25/how-to-create-an-archives-page/
如何創(chuàng)建歸檔頁面
翻譯自?Small Potato?的?How to Create An Archives Page?，有刪節(jié)。這篇教程講解如何創(chuàng)建一個列出所有分類和月份的歸檔頁面，在進行前，先去看看?Small Potato 的歸檔頁面的效果。
首先要確認是否需要自己來制作，絕大多數(shù) WordPress 主題已經(jīng)包含了額外的歸檔頁面模板，一般主題作者都會把這個模板命名為?archives.php，這樣可以和主題的默認歸檔文件?archive.php?區(qū)分開(區(qū)別在文件名末尾的s)。
其次還得注意這個教程不是在任何情況下都適用，因為每個主題的結(jié)構(gòu)都多多少少有些差異。
步驟:
1. 建立一個新文件并命名為 archives.php
2. 在文件里輸入:
<?php
/*
Template Name: Archives Page
*/
?>
沒有這幾行代碼的話就無法把這個文件作為新的歸檔模板來使用，確保不要漏過這步。
3.?添加循環(huán)(loop)、標題、分類列表和月份列表:
<?php while(have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<ul><?php wp_list_cats('sort_column=name&optioncount=1') ?></ul>
<ul><?php wp_get_archives('type=monthly&show_post_count=1') ?></ul>
<?php endwhile; ?>
4. 根據(jù)你當前主題的情況調(diào)整上面的代碼。
5. 上傳到你主題里文件夾里。
6. 創(chuàng)建一個新頁面并選擇剛上傳的文件作為頁面模板。
第二版
來源于：
https://zww.me/wordpress-archive-page-template-wp-primary-function-2014-edition.z-turn
效果展示：
http://wuguowei.com/wordpress/%E5%BD%92%E6%A1%A3
PS:?因為查詢度有點大，所以有加數(shù)據(jù)庫緩存，只在文章發(fā)表/修改時才會更新緩存數(shù)據(jù)，所以測試時，可以特意去后臺點“快速編輯”文章然后點更新就可以更新緩存數(shù)據(jù)。
2016.12.07?新增“年份后面顯示此年份文章數(shù)”版本：
/* Archives list v2014 by zwwooooo | https://zww.me */
function zww_archives_list() {
if( !$output = get_option('zww_db_cache_archives_list') ){
$output = '
全部展開/收縮 (注: 點擊月份可以展開)
';
$args = array(
'post_type' => array('archives', 'post', 'zsay'),
'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][] = '
'. get_the_time('d日: ') .''">'. get_the_title() .' ('. get_comments_number('0', '1', '%') .')
';
endwhile;
wp_reset_postdata();
foreach ($posts_rebuild as $key_y => $y) {
$y_i = 0; $y_output = '';
foreach ($y as $key_m => $m) {
$posts = ''; $i = 0;
foreach ($m as $p) {
++$i; ++$y_i;
$posts .= $p;
}
$y_output .= '
'. $key_m .' 月 ( '. $i .' 篇文章 )
'; //輸出月份
$y_output .= $posts; //輸出 posts
$y_output .= '
';
}
$output .= '
'. $key_y .' 年 ( '. $y_i .' 篇文章 )
'; //輸出年份
$output .= $y_output;
$output .= '
';
}
$output .= '
';
update_option('zww_db_cache_archives_list', $output);
}
echo $output;
}
function clear_db_cache_archives_list() {
update_option('zww_db_cache_archives_list', ''); // 清空 zww_archives_list
}
add_action('save_post', 'clear_db_cache_archives_list'); // 新發(fā)表文章/修改文章時
2. 復(fù)制一份主題的 page.php 更名為 archives.php，然后在最頂端加入：
/*
Template Name: Archives
*/
?>
在 archives.php 找到類似??content();??>，在其下面加入如下代碼
zww_archives_list(); ?>
然后新建頁面（如叫：歸檔），選擇模版為 Archives
3. 給主題加載 jQuery 庫，沒有加載的，把下面這句扔到 functions.php 里面就行了。
wp_enqueue_script('jquery');
4. jQuery 代碼：
這次玩了逐個下拉/收縮效果，想著很好，但我博客感覺效果一般，因為文章太多了...如果文章不多，可以把代碼里面 2 個?(s-10<1)?0:s-10?改為?s，效果會好看點。
(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 并找到??wp_head();??>，在其下面加上
<script type="text/javascript">上面那段 jQuery 代碼script>
因為是放在主題的 the_content() 下面，所以會默認使用主題寫好的 h3 ul li 格式，如果要更加有特色，那么就要自己去修改 css 了
發(fā)現(xiàn)自己好久沒玩 PC 游戲了，機器配置是個問題，空閑時間不多也是個問題，新游戲要花很多時間研究也是個問題，突然感覺學生時代多好啊……
第三版
這是一份07年的代碼，推薦使用
https://www.weisay.com/blog/wordpress-archives.html
WordPress的文章歸檔還是很有必要的，特別是文章多了之后，用歸檔可以很方便的找到想要找的文章，網(wǎng)上有很多的插件可以實現(xiàn)這個功能，不過我們喜歡折騰，那么就不用插件，而是使用代碼來實現(xiàn)。
如果在配合Jquery的話，可以實現(xiàn)非常棒的效果。
下面我就說下簡單的操作方法。
1、把下面的 archives_list_SHe 函數(shù)代碼添加到主題的 functions.php 里面；
function?archives_list_SHe() {
?????global?$wpdb,$month;
?????$lastpost?=?$wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_date <'"?. current_time('mysql') . "'?AND post_status='publish'?AND post_type='post'?AND post_password=''?ORDER BY post_date DESC LIMIT 1");
?????$output?= get_option('SHe_archives_'.$lastpost);
?????if(empty($output)){
?????????$output?=?'';
?????????$wpdb->query("DELETE FROM $wpdb->options WHERE option_name LIKE 'SHe_archives_%'");
?????????$q?=?"SELECT DISTINCT YEAR(post_date) AS year, MONTH(post_date) AS month, count(ID) as posts FROM $wpdb->posts p WHERE post_date <'"?. current_time('mysql') . "'?AND post_status='publish'?AND post_type='post'?AND post_password=''?GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC";
?????????$monthresults?=?$wpdb->get_results($q);
?????????if?($monthresults) {
?????????????foreach?($monthresults?as?$monthresult) {
?????????????$thismonth????= zeroise($monthresult->month, 2);
?????????????$thisyear????=?$monthresult->year;
?????????????$q?=?"SELECT ID, post_date, post_title, comment_count FROM $wpdb->posts p WHERE post_date LIKE '$thisyear-$thismonth-%' AND post_date AND post_status='publish' AND post_type='post' AND post_password='' ORDER BY post_date DESC";
?????????????$postresults?=?$wpdb->get_results($q);
?????????????if?($postresults) {
?????????????????$text?= sprintf('%s %d',?$month[zeroise($monthresult->month,2)],?$monthresult->year);
?????????????????$postcount?=?count($postresults);
?????????????????$output?.=?'
'?.?$text?.?' ?('?.?count($postresults) .?'?篇文章)
'?.?"\n";
?????????????foreach?($postresults?as?$postresult) {
?????????????????if?($postresult->post_date !=?'0000-00-00 00:00:00') {
?????????????????$url?= get_permalink($postresult->ID);
?????????????????$arc_title????=?$postresult->post_title;
?????????????????if?($arc_title)
?????????????????????$text?= wptexturize(strip_tags($arc_title));
?????????????????else
?????????????????????$text?=?$postresult->ID;
?????????????????????$title_text?=?'View this post, "'?. wp_specialchars($text, 1) .?'"';
?????????????????????$output?.=?'
'?. mysql2date('d日',?$postresult->post_date) .?':?'?.?"$text";
?????????????????????$output?.=?'?('?.?$postresult->comment_count .?')';
?????????????????????$output?.=?'
'?.?"\n";
?????????????????}
?????????????????}
?????????????}
?????????????$output?.=?'
'?.?"\n";
?????????????}
?????????update_option('SHe_archives_'.$lastpost,$output);
?????????}else{
?????????????$output?=?'
Sorry, no posts matched your criteria.
'?.?"\n";
?????????}
?????}
?????echo?$output;
?}
2、復(fù)制一份主題的 page.php 更名為 archives.php，然后在最頂端加入：
/*
Template Name: archives
*/
?>
3、再然后找到類似?，在其下面加入如下代碼
<a id="expand_collapse"?href="#">全部展開/收縮a>
<div id="archives"> archives_list_SHe(); ?>div>
進wp后臺添加一新頁面，在右側(cè)欄模板選擇 archives。
4、如果你的主題本身加載了 jQuery 庫，那么繼續(xù)把下面的 jQ 代碼加上去，就會有滑動伸縮效果了。
<script type="text/javascript">
????jQuery(document).ready(function() {
?$('#expand_collapse,.archives-yearmonth').css({cursor:"s-resize"});
?$('#archives ul li ul.archives-monthlisting').hide();
?$('#archives ul li ul.archives-monthlisting:first').show();
?$('#archives ul li span.archives-yearmonth').click(function(){$(this).next().slideToggle('fast');returnfalse;});
?$('#expand_collapse').toggle(
?function(){
?$('#archives ul li ul.archives-monthlisting').slideDown('fast');
?},
?function(){
?$('#archives ul li ul.archives-monthlisting').slideUp('fast');
?});
?});
script>
css 樣式可以通過 #archive 來定義，ok，搞定。
本文固定鏈接:?https://www.weisay.com/blog/wordpress-archives.html | 威言威語
