2010年07月21日 404条评论

代码实现WordPress归档页面模板[速度很快]

前几天我在自力博客看到 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 . ' &nbsp;(' . count($postresults) . '&nbsp;篇文章)</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, &quot;' . wp_specialchars($text, 1) . '&quot;';
                     $output .= '<li>' . mysql2date('d日', $postresult->post_date) . ':&nbsp;' . "<a href='$url' title='$title_text'>$text</a>";
                     $output .= '&nbsp;(' . $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 一次吧 - -!

zww
or
oooo

“代码实现WordPress归档页面模板[速度很快]”有404条评论

  1. A.shun says:

    华丽的沙发,不解释~ :razz:

    1. @A.shun 你抢沙发这么积极干吗?

    2. zwwooooo says:

      @世纪之光 因为他是我朋友

    3. zwwooooo says:

      A.shun:

      华丽的沙发,不解释~ :razz:

      @A.shun 拿你测试我的jQ方式quote

    4. A.shun says:

      zwwooooo:

      A.shun:
      华丽的沙发,不解释~

      @A.shun 拿你测试我的jQ方式quote

      @zwwooooo

      新方法哇,威武

    5. zwwooooo says:

      @A.shun 因为qiqiboy的引用是引到最下面的,我想改为引到同级评论又不行(onclick只能一个事件吧),所以干脆就jQ吧,反正reply也是

    6. A.shun says:

      zwwooooo:@A.shun 因为qiqiboy的引用是引到最下面的,我想改为引到同级评论又不行(onclick只能一个事件吧),所以干脆就jQ吧,反正reply也是

      @zwwooooo
      原来如此,你这种果然更高级 :shock:

    7. zwwooooo says:

      @A.shun 其实qiqiboy的也可以的,只是你要先点击reply,然后再点击quote,不过这样的话就蛋疼鸟

  2. 流年 says:

    没SF,照上

    1. zwwooooo says:

      @流年 你的博客访问不到

    2. 流年 says:

      @zwwooooo 汗,网址打错了,现在可以的了

    3. zwwooooo says:

      @流年 囧~我以为你博客挂了

  3. MOPVHS says:

    华丽丽的大腿~~~

    1. zwwooooo says:

      @MOPVHS 大腿不在这

    2. MOPVHS says:

      @zwwooooo T_T 不要讲出来...我的确悲剧了,按下[Ctrl+Enter]的一刹那显然只有A.shun的留言的...

    3. zwwooooo says:

      @MOPVHS 哈哈,可能你点reply时没点到reply这个链接

  4. A.shun says:

    归档模板。。暂时不折腾,对现有的挺满意

    1. zwwooooo says:

      @A.shun 哈,我是省了一个插件,我插件太多了

    2. A.shun says:

      @zwwooooo 我那个也是免插件的。。虽然没啥技术也存在一些问题。。
      不过那个样式比较喜欢

    3. zwwooooo says:

      @A.shun 那个有点像mg12的插件

    4. A.shun says:

      @zwwooooo 本来就是的。
      直接把那个插件的代码贴到归档模板、手动加载js就完了。
      不过有些不正常

    5. zwwooooo says:

      @A.shun 原来如此,难怪我说那么像mg12的那个插件了

  5. 流年 says:

    目前是使用Clean Archives Reloaded插件来实现的,先Mark一下

    1. zwwooooo says:

      @流年 这个插件很不错,我用了1年多

    2. 流年 says:

      @zwwooooo 我刚开始用的说

  6. 囧啊囧 says:

    昨天看到在WP看到你制作了几款主题,我想问下,我下载了一个英文主题,里面有mo和po文件,我翻译po文件了但是主题怎么还是英文呢?而单独翻译php文件可以。

    1. 流年 says:

      @囧啊囧 如果你原来默认的语言是英文的,那么还需要修改wp-config.php文件中的语言定义为:define ('WPLANG', 'zh_CN');,别的我就不知道了

    2. zwwooooo says:

      @囧啊囧 mo、po是根据wp的语言来调用的,你用的是英文版wp

  7. 胡一刀 says:

    为毛我现在看见代码就头晕了……
    莫非是老了……

    1. zwwooooo says:

      @胡一刀 或许吧,我也老了

  8. tooya says:

    怎么有一乱码。。

  9. ifenwen says:

    用的是一插件 看来要改改了

    1. zwwooooo says:

      @ifenwen 喜欢用代码就用这个

  10. 有多快?
    少一个插件,我还是挺心动的。

    1. zwwooooo says:

      @世纪之光 呵呵,快是相对的,这个会生成静态html,所以说快

  11. 我博客的内容不多,
    暂时就不鼓捣了,万一崩溃了,就惨了啊!

    1. zwwooooo says:

      @祛痘产品哪种好 现在本地折腾好

  12. 没有时间去折腾。

    1. zwwooooo says:

      @古墓候梅 这是好事,忙代表工作好

  13. 万戈 says:

    唉。。。本来这个我想留着暑假慢慢折腾的。。。被高手抢先了。。。

    1. zwwooooo says:

      @万戈 没你厉害,其实这代码我看不太懂

  14. 蛋卷 says:

    我的自带着,凑合着用

    1. zwwooooo says:

      @蛋卷 呵呵,适合即可

  15. ForRSS says:

    很实用,收集啦。

  16. hzlzh says:

    想到一块去了,我做了个本地HTML缓存,每24小时更新一次缓存文件,这样就省去了 function.php中的那个函数了,呵呵,下个主题中使用!

    1. zwwooooo says:

      @hzlzh 嗯,我本想请你帮忙折腾一个,没想到自己发现一个

      1. hzlzh says:

        嗯,你这个在数据库中缓存,我的在host中缓存,应该还要快些,届时不查数据库直接静态了,哈哈。

        对了,你的代码高亮插件在后台切换的时候,杯具否?

    2. zwwooooo says:

      @hzlzh 你厉害,竟然能在js加载完全插到嵌套3层里面。

      我没用代码高亮插件啊

    3. hzlzh says:

      @zwwooooo 那你代码。。。。手动转义?

    4. zwwooooo says:

      @hzlzh 类似代码发芽网

  17. 疾风 says:

    不错呀 像站点地图一样

    1. zwwooooo says:

      @疾风 本身就是站点地图,叫法不同罢了

  18. [...] This post was mentioned on Twitter by A.shun, zwwooooo. zwwooooo said: 代码实现WordPress归档页面模板[速度很快] http://goo.gl/fb/PlXAu [...]

  19. 包子 says:

    第一個收不起來哈
    要用全部收縮

    1. zwwooooo says:

      @包子 本来设置就是第一个不收

  20. 柳城 says:

    强劲。速度的确不错阿

    1. zwwooooo says:

      @柳城 你才是高手,我只是CP过来

回复给 侯永禄 ¬
取消回复

昵称 *

网址

B em del U Link Code Quote