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:

    :???: 菜鸟提问……
    不知道为什么,主题文件的page.php里没有类似“”的东西

    1. zwwooooo says:

      @加七
      一般不会没有content这个函数的,除非主题自己重新定义过此函数,但还是有调用的。

  2. 心叔 says:

    原来关键之处是这里啊:

    <?php
    /*
    Template Name: archives
    */
    ?>

    还有右栏添加上面代码的模板。。谢了,搞定了。

  3. 仰肖 says:

    呃。。数据库中生成一个表。。我怎么没找到。。 :neutral:

    1. zwwooooo says:

      @仰肖
      应该叫一个表值吧,表太大了,呵呵

  4. 无插件实现wordpress文章归档的方法_SEO营 says:

    [...] 以上为无插件实现wordpress文章归档的方法也是从互联网整理而来的,感觉不错就分享给大家,★原文地址:(http://zww.me/archives/25209);使用以上方法之后你就可以彻底告别你所用的任何实现文章归档的插件了,减少了插件就相应的增加了网站的加载速度,从而也有效的提高用户体验。 [...]

  5. 贺昌 says:

    O(∩_∩)O哈!搞定啦~
    刚开始JS 没有封闭纠结好久,不过不知道为什么中文(即“全部展开/收缩”)显示乱码,无法解决改成英文了,呵呵

    1. zwwooooo says:

      @贺昌
      把主题文件转换为“utf8无bom格式”就能显示中文。

  6. sicza says:

    震惊!!!!俺貌似用的是插件。。。。。原来代码就能行了啊。。。T.T

    1. zwwooooo says:

      @sicza
      霍霍,一样的,用代码就是方便点,不用老是去装插件。

  7. 代码珍藏了。多谢分享

    1. zwwooooo says:

      @sprityaoyao
      慢慢折腾使用

  8. 嗯,保存在库中,好想法。

    1. zwwooooo says:

      @荒野无灯
      减少查询数,这个查询是很耗资源的。

    2. @zwwooooo 是的,这个如果每次打开都计算的话,很费资源。而且,这个归档又不是需要即时更新的,按一定时段存入库中比较合理。很多插件只管最终效果,不太考虑效率。

    3. zwwooooo says:

      @荒野无灯
      所以新发表/删除文章才更新这样处理是最好的

  9. 3shi says:

    hi,博主,能移步http://www.3shi.net/archives/看一下这是怎么回事吗,标题全变成 $text 了。多谢。

    1. zwwooooo says:

      @3shi
      说明变量$text变成字符串了,检查一下你的代码。

    2. 3shi says:

      @zwwooooo
      确实如此,上次脑残把双引号改成了单引号,唉,php伤不起啊! :oops:

    3. zwwooooo says:

      @3shi
      代码都如此,不能伤

  10. nova says:

    http://www.365star.info/archives
    帮忙看一下吧,这个里面加载的不是JQuery?为啥报告$不对呢

    1. zwwooooo says:

      @nova
      jQ代码放在jQuery ready 里面,如下:

      jQuery(document).ready(function(){
        文章jQ代码
      });
    2. nova says:

      @zwwooooo
      还是不管用。貌似是这个错误
      Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
      这里面的jquery不是jquery库么。。。

    3. nova says:

      @nova
      把$全换成JQuery就好了。。。

    4. zwwooooo says:

      @nova
      jQuery库版本问题吧

  11. 额,,不会啊 :cry:

    1. zwwooooo says:

      @蓝色离子
      不会就用插件

  12. :mrgreen: 搞好了!谢谢啊!

  13. [...]   除了以上提到的这些,受升级影响还停掉了Easyarchives。用上了zwwooooo的代码实现WordPress归档页面模板。 [...]

  14. 老白 says:

    实现不了展开/收缩的效果,能帮忙看看么??? :oops:

  15. 老白 says:

    我想把上线箭头改成小手,怎么替换?
    博主能把你的样式也分享一下么?

    1. zwwooooo says:

      @老白
      你已经搞定了 :mrgreen:

  16. 小司 says:

    话说不知道如何加载jq

    1. zwwooooo says:

      @小司
      这些基本的就拜托google/百度吧

    2. 小司 says:

      @zwwooooo
      嗯哼哼,i'do

  17. [...] Clean Archives Reloaded–实现WordPress归档页面,目前是通过代码直接实现,参见:http://zww.me/archives/25209 [...]

  18. [...] 但是修改“文章存档页”的函数的时候竟然发现前台没有效果,郁闷极了,怎么会哪?改一个“title”信息也没有效果,难道是调用的系统本身的文件,再细看源码,没有的事啊,网上搜索下看看,好像没有人遇到过,但是突然在ZWW看到一句话,提示了我。 这个存档函数会在数据库生成一个表 SHe_archives_25216,用来保存在文章新发表/删除文章时生成的 html,这主要是加快访问速度,不用每次都要查询数据库生成归档。 [...]

  19. mingming says:

    调试成功了,由衷佩服,感谢!

    1. zwwooooo says:

      @mingming
      慢慢折腾

  20. 追逐自由 says:

    那个..博主
    我的归档页面无法实现伸缩效果啊

    最后这段代码应该是加到CSS里面的吧,没效果啊,我已将jQuery 库加载了

    1. zwwooooo says:

      @追逐自由
      最后那段是jQuery代码,你加到css你说对么? :mrgreen:
      不知道怎样就在jQ库后面加上如下js代码:

      <script type="text/javascript">
      	jQuery(document).ready(function(){
      		这里加最后那段jQuery代码
      	});
      </script>

回复给 9185虚拟视频 ¬
取消回复

昵称 *

网址

B em del U Link Code Quote