前几天我在自力博客看到 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 原创,转载请以链接形式标明本文地址!
Warning: Undefined array key 1 in /www/wwwroot/zww/zww.me/wordpress/wp-content/plugins/wp-useragent/wp-useragent-detect-webbrowser-version.php on line 32
那个代码好像错了..
我进去那个页面 随便点一个月的 他不弹出来了..
@mice 没有错误,我试过了,或许是js加载速度问题
Warning: Undefined array key 1 in /www/wwwroot/zww/zww.me/wordpress/wp-content/plugins/wp-useragent/wp-useragent-detect-webbrowser-version.php on line 32
@zwwooooo
那就是我杯具了..我刷新无数次 等他加载完,都是一个效果..
但是如果没加载完 全部展开/收缩 这个也应该会失效吧.
我现在只有 全部展开/收缩 这个会有效果.
单独点月不会有反应
@mice 再试试吧,我更新了代码,如果再有问题就是浏览器问题了。
Warning: Undefined array key 1 in /www/wwwroot/zww/zww.me/wordpress/wp-content/plugins/wp-useragent/wp-useragent-detect-webbrowser-version.php on line 32
@zwwooooo
现在所有的都展开了= =....我保证我加载完了..
@mice 囧,我发现一个问题,如果js更改频繁ie内核浏览器加载js会出错,清空缓存即可。
Warning: Undefined array key 1 in /www/wwwroot/zww/zww.me/wordpress/wp-content/plugins/wp-useragent/wp-useragent-detect-webbrowser-version.php on line 32
@zwwooooo
完美显示,哦耶,不过我那个开了缓存的=.= 用clan什么的跟这个应该差不多吧.
@mice 我这个跟那个插件差不多
Warning: Undefined array key 1 in /www/wwwroot/zww/zww.me/wordpress/wp-content/plugins/wp-useragent/wp-useragent-detect-webbrowser-version.php on line 32
全部展开/收缩 这个还是可以用的
你的博很棒!一下子就吸引了我!希望你越博越精彩!加油啊!!!
希望你有时间也能来我的BLOG做客,欢迎!
@小罗 这是啥?万戈马甲?fans?囧~差点当垃圾
嘎嘎……
技术性的文章值得一读啊!
@WordPress啦 你那里才是宝库
zwoooo都不知道折腾到什么境界了。。。
@卢松松 没啥,平时消遣,没有境界
哈哈 这个优化的好啊
這個效果真的很棒、又快速、不卡版,感謝這麼大方分享教學
@Carrie 网络需要分享
这个评论嵌套样式,越看越爽,我也要搞成这样,嘿嘿
@hzlzh 哈,我叫做“旗杆式”,我也喜欢。
我设计的还有“晾衣架”式(zLEI)、“G”字型(zLive)、还有几个没有名字
@zwwooooo 我都看看,看有没有更舒坦滴
我也刚打算折腾这个~
@掌柜的马甲 折腾吧
下次折腾上。。~~
希望成为互访的朋友!不错!
@武龙杰 这个不需要说,荒淫常来
@zwwooooo 嘿嘿,我可是常来哦
@yetone 所以根本不需要说回访,哈哈哈
你的那个header下面的那个广告是CSS定义的么? 求这个方法 哈哈 我要做一个CSS相册!
@苏扬 纯css,所以更改麻烦
学习了!
不知数据库查询次数有多少,http://www.ihacklog.com/wordpress/wpskills/hacklog-clean-archives.html
这里也有个,不过我懒没有试!
@mcooo 只在你发表/删除文章才更新数据库,所以不用担心查询数
服务器有点问题 这会悲剧中, 搬个板凳过来看看ZWW的折腾经历、
@7cbt 休息一下,慢慢折腾
@zwwooooo 各种问题累积,导致我周六又有得忙了。
这个一定要mark一下,太好了~以前都是通过插件实现的,这次同样的效果...呵呵~~~
@球犯 对啊,折腾上吧
还是用插件实现吧,不想改主题了
@门新闻 简单就用插件
我是用的Clean Archives Reloaded,卸载试试这个去
这个在IE6下有问题,点击没反应
@Dianso ie好像要清空缓存才行,我今天更改了n次js
这个很实用