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. wordpress制作归档页面 | YY&Heson的双人WordPress情侣博客 says:

    [...] 本文章参考zwwooooo的《代码实现wordpress归档页面模版》 之后折腾预告:重新搞一个背景播放器....... - - [...]

  2. susan says:

    我在英文wordpress上用你的代码,函数那里会报错格式错误,就是这行

    $output .= '<li>' . mysql2date('d日', $postresult->post_date)

    请问英文版上应该怎么改呢?

    1. zwwooooo says:

      @susan
      去掉中文试试吧。

  3. [...] 实现方法:代码实现WordPress归档页面模板 [...]

  4. 奚少 says:

    是不是生成数据库后不能及时显示几条评论?比如你的最新的日志已经有评论11条,而归档只显示4条...

    1. zwwooooo says:

      @奚少
      对,因为不需要即时,存档只是个文章索引,方便查看而已。

    2. 奚少 says:

      @zwwooooo
      怪不得叫[速度很快]呢,呵呵~

    3. zwwooooo says:

      @奚少
      如果你要即时生成也可以,你不在意速度和你的服务器压力的话

    4. 奚少 says:

      @zwwooooo
      呵呵,不需要了,那个页面半年估计也没多少人去一下,放那里吧~

    5. zwwooooo says:

      @奚少
      所以说嘛

  5. 奚少 says:

    0条,按错键盘了...

  6. wmtimes says:

    看来都是从这儿学的啊。我说呢。

  7. 主题Squash | 采薇 says:

    [...] 1. 存档页面模板(参考自om《代码实现WordPress归档页面模板[速度很快]》); [...]

  8. 维斯 says:

    请问博主,此SHe_archives_xxx里的Html是WP本身在新发表/删除文章时生成的吗?还是要加了以上的archives_list_SHe()才有的?
    因为我把View this post字眼改成别的字貌似没有效果.

    1. zwwooooo says:

      @维斯
      WP没这个功能,当然是这段代码生成的,而且只在文章发表时才更新。

  9. Ben says:

    :grin: 留爪,记录。我用的还是插件……不过最近打算换了

    1. zwwooooo says:

      @Ben
      慢慢折腾

  10. 不会伸缩啊,JQ库加载了,也把你的JS合并到我的ALL.JS里了,没反应哦

    1. zwwooooo says:

      @yesureadmin
      要注意js闭合问题

  11. nvrwp says:

    非常有用的代码,但是别的都弄得很好,我按照你前面的回答,把年份和月份的代码调换了一下位置,怎么还是没有任何变化呢?我直接cp的你的回复:$text = sprintf('%s %d', $monthresult->year, $month[zeroise($monthresult->month,2)]);

    1. nvrwp says:

      @nvrwp
      我知道了
      1、改完function以后,没有增减文章刷新数据库。
      2、上面的代码,应该将%s %d调换一下位置
      :smile:

    2. zwwooooo says:

      @nvrwp
      哈,对鸟,自己折腾解决很爽吧 :mrgreen:

  12. [...] 看到zww哪里实现的免插件代码实现真的很酷,如是照葫芦画瓢,无奈怎么弄就是不见伸缩效果,JS也加载了。由于文章太多,页面长得不得了,不得不放弃。Clean Archives Reloaded插件可以很方便快速的创建一个归档页面。使用Javascript折叠显示存档效果,也比较好。 [...]

  13. jalena says:

    :twisted: 折腾半天也没搞懂那个自动伸缩咋个搞..直接把伸缩代码添加进jq库直接就是N多错误冒出来~

    1. zwwooooo says:

      @jalena
      注意js封闭

  14. 朵未 says:

    折腾了好久终于搞定了。 :grin: 多谢!

    1. zwwooooo says:

      @朵未
      不用谢,祝贺

  15. [...] 看到zww哪里实现的免插件代码实现真的很酷,如是照葫芦画瓢,无奈怎么弄就是不见伸缩效果,JS也加载了。由于文章太多,页面长得不得了,不得不放弃。Clean Archives Reloaded插件可以很方便快速的创建一个归档页面。使用Javascript折叠显示存档效果,也比较好。 [...]

  16. 瓦屋,你也是个折腾王

    1. zwwooooo says:

      @沙拉酷儿
      闲时折腾,好玩

  17. [...] 6、实现WordPress归档页面,可替代 Clean Archives Reloaded插件,很棒的功能。参见:http://zww.me/archives/25209  [...]

  18. welyook says:

    多谢分享!搞定!高手呀! :mrgreen:

    1. zwwooooo says:

      @welyook
      荒淫使用

  19. 解决wordpress rss“XML解析错误:xml处理指令不在实体的开始部分” | Simnovo says:

    [...] 最后想起是看了zww的免插件实现WordPress存档页面的文章后修改过functions.php文件,将之前备份主题的functions.php文件上传后,RSS终于正常了。 [...]

  20. 博客折腾小记 | 玉在河里 says:

    [...] 1,加上了文章归档功能,参考了zwwooooo的代码实现WordPress归档页面模板[速度很快]。 [...]

回复给 折子戏 ¬
取消回复

昵称 *

网址

B em del U Link Code Quote