前几天我在自力博客看到 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 原创,转载请以链接形式标明本文地址!
[...] 增加归档页面模板--实现方法为Zww的“代码实现WordPress归档页面模板[速度很快]” Tagged with: [...]
拿走了哈
@BoKeam 随便搜刮
[...] 下面是详细步骤(引用自 zww 博客) 1. 把下面的 archives_list_SHe 函数代码扔进主题的 functions.php 里面 [...]
zwoooooooooooo,多打几个。
我的主题里有 archives.php这个文件,请问下该怎么操作?
@瘦米中文
删了/更名,然后按照文章中的方法折腾。
@zwwooooo
搞好了,还有一个问题,怎么在主题中加载jQuery 库?
另外,我觉得,zwoooooooo,应该把存档页面的那些链接都默认设置为新页面打开,这样有助于提高用户体验,适合用户浏览习惯。
@瘦米中文
把下面的加入head内,最好在<?php wp_head() ?>前:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
链接新窗口问题,我觉得不用,完全可以通过浏览器的功能在新标签打开(如ff/chrome下ctrl+点击,ie等就shift+点击)
[...] 本来今天只想唠叨几句没用的话,不过大家都过来了,我就再说说弄归档这个页面的方法吧!以前在阿邙那里看过这样的效果(插件+jq),不过他这家伙最近不知道死哪里去了,文章也不更新!我还想问问他那个侧边栏滑动的bug怎么修改呢!不过,我今天看了zwwooooo的代码实现WordPress归档页面模板于是动手试了试,果然效果不错,起码我文章有归档了!我是一个复制党,直接拷贝粘贴过来了,大家可以不用跑他那里看啦,哈哈! [...]
你好!我今天按照你的方法改了,我文件里面有调用JQ,但为什么不能伸缩呢?难道是我主题不支持?
@小天
跟主题没关系,说明你的jQ代码没写好,或者选择器搞错
@zwwooooo
我看heard里面是加载的google上的jq
那我改修改哪些呀!~?
@小天
检查一下顺序,jQ库要先加载,然后才加载jQ代码
@zwwooooo
恩 JQ库是在上面,哎 不知道为什么?我对php还不是很熟悉,只是能看懂“点点/很多”
呵呵,谢谢你啊!明天在来看你的文章
还有hzlzh的哈哈 都有好多可以学习的地方!
@小天
这……你在本地测试吧,你说的是jQ代码,即js,不是php。只有archives_list_SHe函数才是php代码,这个直接扔到functions.php就可以了。
这个想要月份显示大写应该改哪里?
@snowxh
怎样大写法?英文大写?英文大写就给archives-yearmonth这个class加个英文大写转换的css属性
@zwwooooo
不是不是 显示汉字 像你的那样~
@snowxh
把你的wp设为中文版就行了
@zwwooooo
是中文版。。。不是官方的都不行么= =
@snowxh
或许,我没测试,源代码用的是一些函数,为啥不用官方中文版?
@zwwooooo
官方3.0 3.01出的很晚额 就先下汉化的了
等我换了官方的看看有木有变化。。
@snowxh
嗯,先试试吧,我倒喜欢数字,呵呵
[...] 参考Z大的《代码实现wordpress归档页面模板》一文 [...]
怎么没我的pingback 做做广告嘛~- -
@heson
貌似没捕捉到
学习了,去尝试一下!
已经添加到我的模板了~
@blueandhack
很不错的,我一直用
很好,留个标志,以后备用。。。
如果你的主题本身加载了 jQuery 库,那么继续把下面的 jQ 代码加上去,就会有滑动伸缩效果了,麻烦问一下要加到那个文件??
@ailog
自建一个js文件然后在jQ库下面加载。
@ailog
新建的js:
jQuery(document).ready(function(){
上面代码放到这里
});
谢谢楼主,这个问题之前解决了,但是在处理英文网页的时候还是有些问题。http://www.ailog.net/archives
还是不可以自动收缩,不知道您有什么解决方案,麻烦您了。
@ailog
不能收缩就是jQ代码没有折腾好了。认真检查
谢啦,我在检查一遍
今天又鼓捣了好久,还是不能收缩。。。。。
@ailog
囧~你用了插件了?
你好请问一下,下面这段代码(page.php)在哪加入代码:
@VN.
你的主题调用很多,你试试放在
下面吧
@zwwooooo
谢谢、
做完后,能够伸缩,但有个问题,每篇文章后的 访问数(views) 都是0 ,不知道怎么修改这个,我使用的插件 wp-postviews 来计算每篇文章的点击量,那我该如何将这个插件的点击数据 导入 到我的归档文章内?
@Edward Han
导入?没有这个东东。你只能试试在生成归档文件的代码加入views调用函数,只能提供这个思路给你,行不行就要你自己测试了。
我按照你的代码作出来的
http://www.edward-han.com/%E5%BD%92%E6%A1%A3
但 “篇文章” 之前个 > 符号,代码都是复制的,不知道为什么会出现这个情况。
@Edward Han
这个要你自己认真检查了,我再看了下我这的代码,貌似没什么问题,而且很多copy的朋友貌似没问题。
[...] 转载:《代码实现WordPress归档页面模板[速度很快]》 [...]