前几天我在自力博客看到 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 一次吧 - -!
- 本文标题:代码实现WordPress归档页面模板[速度很快]
- 本文链接:https://zww.me/archives/25209
- 发布时间:2010年07月21日 10:18
- 版权声明:除非注明,文章均为 zwwooooo 原创,转载请以链接形式标明本文地址!
非常有用的代码,但是别的都弄得很好,我按照你前面的回答,把年份和月份的代码调换了一下位置,怎么还是没有任何变化呢?我直接cp的你的回复:$text = sprintf('%s %d', $monthresult->year, $month[zeroise($monthresult->month,2)]);
@nvrwp
我知道了
1、改完function以后,没有增减文章刷新数据库。
2、上面的代码,应该将%s %d调换一下位置
@nvrwp
哈,对鸟,自己折腾解决很爽吧
折腾半天也没搞懂那个自动伸缩咋个搞..直接把伸缩代码添加进jq库直接就是N多错误冒出来~
@jalena
注意js封闭
折腾了好久终于搞定了。 多谢!
@朵未
不用谢,祝贺
瓦屋,你也是个折腾王
@沙拉酷儿
闲时折腾,好玩
多谢分享!搞定!高手呀!
@welyook
荒淫使用
菜鸟提问……
不知道为什么,主题文件的page.php里没有类似“”的东西
@加七
一般不会没有content这个函数的,除非主题自己重新定义过此函数,但还是有调用的。
原来关键之处是这里啊:
还有右栏添加上面代码的模板。。谢了,搞定了。
呃。。数据库中生成一个表。。我怎么没找到。。
@仰肖
应该叫一个表值吧,表太大了,呵呵
O(∩_∩)O哈!搞定啦~
刚开始JS 没有封闭纠结好久,不过不知道为什么中文(即“全部展开/收缩”)显示乱码,无法解决改成英文了,呵呵
@贺昌
把主题文件转换为“utf8无bom格式”就能显示中文。
震惊!!!!俺貌似用的是插件。。。。。原来代码就能行了啊。。。T.T
@sicza
霍霍,一样的,用代码就是方便点,不用老是去装插件。
代码珍藏了。多谢分享
@sprityaoyao
慢慢折腾使用
嗯,保存在库中,好想法。
@荒野无灯
减少查询数,这个查询是很耗资源的。
@zwwooooo 是的,这个如果每次打开都计算的话,很费资源。而且,这个归档又不是需要即时更新的,按一定时段存入库中比较合理。很多插件只管最终效果,不太考虑效率。
@荒野无灯
所以新发表/删除文章才更新这样处理是最好的
hi,博主,能移步http://www.3shi.net/archives/看一下这是怎么回事吗,标题全变成 $text 了。多谢。
@3shi
说明变量$text变成字符串了,检查一下你的代码。
@zwwooooo
确实如此,上次脑残把双引号改成了单引号,唉,php伤不起啊!
@3shi
代码都如此,不能伤
http://www.365star.info/archives
帮忙看一下吧,这个里面加载的不是JQuery?为啥报告$不对呢
@nova
jQ代码放在jQuery ready 里面,如下:
@zwwooooo
还是不管用。貌似是这个错误
Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
这里面的jquery不是jquery库么。。。
@nova
把$全换成JQuery就好了。。。
@nova
jQuery库版本问题吧
额,,不会啊
@蓝色离子
不会就用插件
搞好了!谢谢啊!
实现不了展开/收缩的效果,能帮忙看看么???
我想把上线箭头改成小手,怎么替换?
博主能把你的样式也分享一下么?
@老白
你已经搞定了
话说不知道如何加载jq
@小司
这些基本的就拜托google/百度吧
@zwwooooo
嗯哼哼,i'do
调试成功了,由衷佩服,感谢!
@mingming
慢慢折腾