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. 折子戏 says:

    哎呀!真是太学习了啊。看了博主的文章以及那么多评论才发现原来是介个样子!!
    博主有空能不能写一篇关于友情链接页面的呀?

    1. zwwooooo says:

      @折子戏
      那个有人写过了……我没再写了,不过既然你提起,我就扔一篇自己修改过的,过两天吧

  2. Cnfn says:

    英文主题乱码啊.

    1. zwwooooo says:

      @Cnfn
      英文主题要记得转换编码。

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

  4. 这个我已经拿走了

  5. hsmw says:
    <?php
    
    $t1=microtime(true);
    
    
    
    $myposts = $wpdb->get_results("SELECT id,post_title FROM $wpdb->posts WHERE post_type = 'post' AND post_status ='publish' and id limit 1000");
    
    ?>
    
    <div id="tit2"><?php single_cat_title(''); ?> Article List <?php echo microtime(true)-$t1; ?></div><div id="line"></div>
    
    </div>
    
    
    
    <?php
    
    foreach($myposts as $post){
    
    ?>
    
    
    
    <div id="tit-list">id); ?>" title="<?php echo $post->post_title; ?>"><?php echo $post->post_title; ?></div>
    
    <?php
    
    }?>
    

    这个是输出全部文章1000篇的代码,
    我想分类也这样输出1000篇。
    想请教下,怎么修改。

    1. zwwooooo says:

      @hsmw
      用 get_posts() 函数或者用 query_posts() 函数,具体参考 WP codex:
      http://codex.wordpress.org/Template_Tags/get_posts
      http://codex.wordpress.org/Function_Reference/query_posts

    2. 1我爱玩 says:

      @zwwooooo
      老大我想问下 如果标题太长怎么办?有办法控制码》
      求救啊

  6. 我爱玩 says:

    老大我想问下 如果标题太长怎么办?有办法控制码》

    1. zwwooooo says:

      @我爱玩

      $output .= '<ul class="archives-list"><li><span class="archives-yearmonth">' . $text . '  (' . count($postresults) . ' 篇文章)</span><ul class="archives-monthlisting">' . "\n";

      里面的 $text 加 php 截取函数控制长度,具体的函数查询 php 常用函数

  7. 代码实现WordPress归档页面模板 « 落叶随风 says:

    [...] 转载:http://zww.me/archives/25209 [...]

  8. Wordpress如何让构建访问速度很快的文章归档页面 | 梦想象牙塔 says:

    [...] 方法来源:http://zww.me/archives/25209 [...]

  9. 朱定聪 says:

    这个很实用哦,不知道是否会对SEO有理呢?

    1. zwwooooo says:

      @朱定聪
      这……我没去考虑过seo

  10. leo_zhangj says:

    请问如果主题里面有自定类型的文章,怎么能够用这种方式来归档呢?谢谢!

  11. leo_zhangj says:

    zwwooooo,看了你自己的存档示例,很不错,可以把你的这块CSS分享下吗,谢谢!

    1. zwwooooo says:

      @leo_zhangj
      不用分享,既然是我的主题,你大可以用firebug看

  12. mack says:

    站长您好,不好意思打扰您了。我按照这篇文章的步骤,做好了“归档”页面,但是问题也出现了,这个“展开”按钮,就是弹不开全部日志,始终都是收缩得紧紧的,我都急死了。请帮忙看看,http://www.sweetbao.com/archive/

    1. zwwooooo says:

      @mack
      你的网站打不开

    2. mack says:

      @zwwooooo
      前几天网站出了点问题,现在可以正常访问了,麻烦在帮我看看!

    3. zwwooooo says:

      @mack
      你好像折腾好了。

  13. [...] 参照了zwwooooo写的《代码实现WordPress归档页面模板》后,做好了“归档”页面,但是问题也出现了: [...]

  14. 子非我 says:

    :?: 想请教一下,如果归档想排除某一个分类,该如何操作呢?
    2012年3月6日 星期二 10:55:18

    1. zwwooooo says:

      @子非我
      要加排除语句,具体嘛,最好参考我最新的那篇文章的方法,然后看看给 WP_Query() 函数加排除分类参数

  15. 1豆豆 says:

    弄了半天,只能把全部的文章列出来,滑动伸缩效果出不来,不知道你最后说的jQ 代码是添加在什么地方,老大指引下

    1. zwwooooo says:

      @豆豆
      jQ同js,先挂jQuery库(1.3.2版本以上即可),然后把我写的jQuery代码存成js文件挂在jQuery库后面(即jQ库先载入),具体嘛,搜一下就知道了。

    2. 豆豆 says:

      @zwwooooo
      是不是把你写的jQuery代码存成js文件,然后在header.php里面加载就可以了?

    3. zwwooooo says:

      @豆豆
      对,先加载jQuery库

  16. [...] 代码参考:http://zww.me/archives/25209 [...]

  17. [...] 不过找来找去,还是在http://zww.me找到了一篇《代码实现WordPress归档页面模板[速度很快]》这个文章,将如何实现进行了详细的说明。 [...]

  18. just.suny says:

    大师,请问一下你这个网站顶部的导航时怎么实现的啊,好酷。不知道能不能传授一下。

    1. zwwooooo says:

      @just.suny
      顶部导航没啥,css写出来就行了

  19. [...] archieves页面页面的制作参考这里,其中更详细的对PHP的一点都不懂得人的提醒参考这里。 [...]

  20. [...] 方法来源:http://zww.me/archives/25209 [...]

回复给 Cyan ¬
取消回复

昵称 *

网址

B em del U Link Code Quote