第一版
水煮鱼：
https://blog.wpjam.com/2007/10/25/how-to-create-an-archives-page/
如何创建归档页面
翻译自 Small Potato 的 How to Create An Archives Page ，有删节。这篇教程讲解如何创建一个列出所有分类和月份的归档页面，在进行前，先去看看 Small Potato 的归档页面的效果。
首先要确认是否需要自己来制作，绝大多数 WordPress 主题已经包含了额外的归档页面模板，一般主题作者都会把这个模板命名为 archives.php，这样可以和主题的默认归档文件 archive.php 区分开(区别在文件名末尾的s)。
其次还得注意这个教程不是在任何情况下都适用，因为每个主题的结构都多多少少有些差异。
步骤:
1. 建立一个新文件并命名为 archives.php
2. 在文件里输入:
<?php
/*
Template Name: Archives Page
*/
?>
没有这几行代码的话就无法把这个文件作为新的归档模板来使用，确保不要漏过这步。
3. 添加循环(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. 根据你当前主题的情况调整上面的代码。
5. 上传到你主题里文件夹里。
6. 创建一个新页面并选择刚上传的文件作为页面模板。
第二版
来源于：
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: 因为查询度有点大，所以有加数据库缓存，只在文章发表/修改时才会更新缓存数据，所以测试时，可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据。
2016.12.07 新增“年份后面显示此年份文章数”版本：
/* 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'); // 新发表文章/修改文章时
2. 复制一份主题的 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 文件然后调用的朋友就直接打开 header.php 并找到 wp_head(); ?>，在其下面加上
<script type="text/javascript">上面那段 jQuery 代码script>
因为是放在主题的 the_content() 下面，所以会默认使用主题写好的 h3 ul li 格式，如果要更加有特色，那么就要自己去修改 css 了
发现自己好久没玩 PC 游戏了，机器配置是个问题，空闲时间不多也是个问题，新游戏要花很多时间研究也是个问题，突然感觉学生时代多好啊……
第三版
这是一份07年的代码，推荐使用
https://www.weisay.com/blog/wordpress-archives.html
WordPress的文章归档还是很有必要的，特别是文章多了之后，用归档可以很方便的找到想要找的文章，网上有很多的插件可以实现这个功能，不过我们喜欢折腾，那么就不用插件，而是使用代码来实现。
如果在配合Jquery的话，可以实现非常棒的效果。
下面我就说下简单的操作方法。
1、把下面的 archives_list_SHe 函数代码添加到主题的 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、复制一份主题的 page.php 更名为 archives.php，然后在最顶端加入：
/*
Template Name: archives
*/
?>
3、再然后找到类似 ，在其下面加入如下代码
<a id="expand_collapse" href="#">全部展开/收缩a>
<div id="archives"> archives_list_SHe(); ?>div>
进wp后台添加一新页面，在右侧栏模板选择 archives。
4、如果你的主题本身加载了 jQuery 库，那么继续把下面的 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 | 威言威语
