前几天我在自力博客看到 hzlzh 写的《WordPress归档页面模板，按日期列出所有文章》，在本地测试了一下，代码量很少，但每次访问存档页面数据库查询量太大导致打开页面很慢，于是放弃。
昨天帮一朋友修改一私人模板，发现里面有个函数是生成所有文章列表，问其出处，朋友说不知道，这么好的代码为啥没共享出来呢？于是有了这篇文章。
特点：
1. 这个存档函数会在数据库生成一个表 SHe_archives_25216，用来保存在文章新发表/删除文章时生成的 html，这主要是加快访问速度，不用每次都要查询数据库生成归档。
2. 显示每月文章数
3. 显示每篇文章的评论数
效果：见我博客的存档页
说明：我另外加了jQuery滑动效果，jQ代码来自上面提到的 hzlzh，稍微修改。
下面是详细步骤
1. 把下面的 archives_list_SHe 函数代码扔进主题的 functions.php 里面 （2010.7.23 edit）
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 .= '<ul class="archives-list"><li><span class="archives-yearmonth">' . $text . ' (' . count($postresults) . ' 篇文章)</span><ul class="archives-monthlisting">' . "\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 .= '<li>' . mysql2date('d日', $postresult->post_date) . ': ' . "<a href='$url' title='$title_text'>$text</a>"; $output .= ' (' . $postresult->comment_count . ')'; $output .= '</li>' . "\n"; } } } $output .= '</ul></li></ul>' . "\n"; } update_option('SHe_archives_'.$lastpost,$output); }else{ $output = '<div class="errorbox">Sorry, no posts matched your criteria.</div>' . "\n"; } } echo $output; }
2. 复制一份主题的 page.php 更名为 archives.php，然后在最顶端加入：
<?php /* Template Name: archives */ ?>
再然后找到类似 <?php content(); ?>，在其下面加入如下代码（2010.7.21 edit）
<a id="expand_collapse" href="#">全部展开/收缩</a> <div id="archives"><?php archives_list_SHe(); ?></div>
进wp后台添加一新页面，在右侧栏模板选择 archives
3. 如果你的主题本身加载了 jQuery 库，那么继续把下面的 jQ 代码加上去，就会有滑动伸缩效果了（2010.7.23 edit）
/* 存档页面 jQ伸缩 */ $('#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');return false;}); //以下下是全局的操作 $('#expand_collapse').toggle( function(){ $('#archives ul li ul.archives-monthlisting').slideDown('fast'); }, function(){ $('#archives ul li ul.archives-monthlisting').slideUp('fast'); });
css 样式可以通过 #archives 来定义
从折腾WordPress就一直使用的存档页面插件 Clean Archives Reloaded 终于可以光荣退休了。
ok，折腾完。
2010.7.21 update：由于ie下有点问题，所以重新修改了一下代码，折腾过的再 CP 一次吧。
2010.7.23 update：ie6/7下还是有问题，所以又重新修改了一下代码，囧～这次完美了吧，折腾过的再 CP 一次吧 - -！
声明: 除非注明，ZWWoOoOo文章均为原创，转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25209
zwwooooo，看了你自己的存档示例，很不错，可以把你的这块CSS分享下吗，谢谢！
@leo_zhangj
不用分享，既然是我的主题，你大可以用firebug看
站长您好，不好意思打扰您了。我按照这篇文章的步骤，做好了“归档”页面，但是问题也出现了，这个“展开”按钮，就是弹不开全部日志，始终都是收缩得紧紧的，我都急死了。请帮忙看看，http://www.sweetbao.com/archive/
@mack
你的网站打不开
@zwwooooo
前几天网站出了点问题，现在可以正常访问了，麻烦在帮我看看！
@mack
你好像折腾好了。
2012年3月6日 星期二 10:55:18
@子非我
要加排除语句，具体嘛，最好参考我最新的那篇文章的方法，然后看看给 WP_Query() 函数加排除分类参数
弄了半天，只能把全部的文章列出来，滑动伸缩效果出不来，不知道你最后说的jQ 代码是添加在什么地方，老大指引下
@豆豆
jQ同js，先挂jQuery库（1.3.2版本以上即可），然后把我写的jQuery代码存成js文件挂在jQuery库后面（即jQ库先载入），具体嘛，搜一下就知道了。
@zwwooooo
是不是把你写的jQuery代码存成js文件，然后在header.php里面加载就可以了？
@豆豆
对，先加载jQuery库
大师，请问一下你这个网站顶部的导航时怎么实现的啊，好酷。不知道能不能传授一下。
@just.suny
顶部导航没啥，css写出来就行了
想问一下，有没有不是jquery的滑动代码，谢谢
@moper
自己改吧
@zwwooooo
还是用了jquery的，嘿嘿，谢谢哈~
@moper
如果主题本身有加载jQ库，加上也无妨。
这样做多次一举 其实有更好的方法
@三优生活
哦，原来这么多人“多此一举”，请教大师更好的方法是？请分享。
我按照这个方法弄了，可是展开缩小哪里不合适，出现乱码，肿么回事啊，求告知
我的站http://www.fengshao8.com
@枫少
把functions.php转换为utf8无bom格式
好是好，不过日期不符合中国人的习惯。
@侯永禄
而且我这里测试的时候发现链接为默认链接，不是固定链接。
@侯永禄
自己改吧。
@侯永禄
这代码很多人用都木有此问题，检查一下你的“固定链接”
JS不懂的加。呵呵
zww童鞋，我现在用的主题好像也是用您这个方法，不过我发现无法实时显示评论数。看您的也是，所以想问问这是为什么，多久时间会更新？谢谢
@Cyan
这个方法是带有缓存效果的，因为每次都即时查很好资源的。
@zwwooooo
我就想问问大概缓存时间是多久？
@Cyan
我知道了，每次更新博文，就会更新存档页面的。谢谢啦
@Cyan
对头，每次访问都更新的话你的服务器会哭的
如果想按照作者归档显示这个效果，该如何处理？z帮忙指点下，多谢
@茶话汇
主要是数据调用不同，需要重写SQL语句，具体自己研究下
mysql2date('d日' 这个代码这块，显示出来的日期好像不对，看是不是搞错了？
@9185虚拟视频
没啥错吧，都n多人照着折腾成功，有中文注意编码
@zwwooooo
我也成功了，但是不显示日期？只有一个"d日"字。
@9185虚拟视频
注意标点符号
@zwwooooo
我复制的你的，感觉那真写的有问题，不能发图。。。 要不就给你看看了。
输出的格式是这样的：
日: 网站XXXX发布规则 (0)
@9185虚拟视频
我当时用真没问题，而且我也照着复制给其他人用。后来我改用函数了，我自己YY的，我也写了文章。z
@zwwooooo
- -! ,你把你的functions.php里的代码发一份到我邮箱吧~。。。 我看你的好像是正常的
@9185虚拟视频
我用的是这个 http://zww.me/archives/25589 ，另外太忙，没时间再去验证，况且以前就验证过了。
@zwwooooo
好吧，坑了，这边的代码有问题，那边的代码显示是正常的。谢谢！
照着博主写的还有跟别人讨论的内容，稀里糊涂的居然貌似搞定了
...... 跪地谢恩 
@smallear
搞定就好，慢慢折腾
@chonghua
呃，会这样吗？我以为养眼呢……
按照你的操作伸缩功能木有实现，希望加Q630915861解决一下
多谢博主，所有功能都成功实现，但是使用css控制的时候发现id应该是 archives css也应该写成 #archives，少了个S- -！不知道是我的问题还是~~~~
@Uncle.E
对啊，自己纠正就行了，不过，你提醒了我就修正下吧，感谢