代码实现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. mysql2date('d日' 这个代码这块,显示出来的日期好像不对,看是不是搞错了?

    1. zwwooooo says:

      @9185虚拟视频
      没啥错吧,都n多人照着折腾成功,有中文注意编码

    2. @zwwooooo
      我也成功了,但是不显示日期?只有一个"d日"字。

    3. zwwooooo says:

      @9185虚拟视频
      注意标点符号

    4. @zwwooooo
      我复制的你的,感觉那真写的有问题,不能发图。。。 要不就给你看看了。
      输出的格式是这样的:
      日: 网站XXXX发布规则 (0)

    5. zwwooooo says:

      @9185虚拟视频
      我当时用真没问题,而且我也照着复制给其他人用。后来我改用函数了,我自己YY的,我也写了文章。z

    6. @zwwooooo
      - -! ,你把你的functions.php里的代码发一份到我邮箱吧~。。。 我看你的好像是正常的

    7. zwwooooo says:

      @9185虚拟视频
      我用的是这个 http://zww.me/archives/25589 ,另外太忙,没时间再去验证,况且以前就验证过了。

    8. @zwwooooo
      好吧,坑了,这边的代码有问题,那边的代码显示是正常的。谢谢!

  2. smallear says:

    照着博主写的还有跟别人讨论的内容,稀里糊涂的居然貌似搞定了 :!: ...... 跪地谢恩 :mrgreen:

    1. zwwooooo says:

      @smallear
      搞定就好,慢慢折腾

  3. chonghua says:

    :mrgreen: :mrgreen: :mrgreen: 不得不说,兄弟的博客看的眼睛发花!

    1. zwwooooo says:

      @chonghua
      呃,会这样吗?我以为养眼呢……

  4. 宏璋 says:

    按照你的操作伸缩功能木有实现,希望加Q630915861解决一下

  5. Uncle.E says:

    多谢博主,所有功能都成功实现,但是使用css控制的时候发现id应该是 archives css也应该写成 #archives,少了个S- -!不知道是我的问题还是~~~~

    1. zwwooooo says:

      @Uncle.E
      对啊,自己纠正就行了,不过,你提醒了我就修正下吧,感谢

  6. 呃,我学着做了,也有效果了,但很奇怪就是缺少“全部展开/收缩”这几个字
    貌似代码里边有的呀,刷新页面的瞬间也能看到,可惜很快这几个字就缩起来看不见了……

    1. zwwooooo says:

      @十万大山
      检查你的jQ代码处理

  7. Hi记忆 says:

    :mrgreen: JQ在我主题失效,看到前面评论里给的插在head里面的方法,顺利解决。留个言感谢下

    1. zwwooooo says:

      @Hi记忆
      稍微注意下是否jQ冲突(如重复加载)

  8. 我是自己添加了archives.js这个文件,然后在head中添加这段代码<script type="text/javascript" src="/js/archives.js">,但是还是没有实现你说的伸缩效果,归档页面:http://www.ynono.com/archives/能否指点一下,谢谢了

    1. zwwooooo says:

      @诺诺海淘馆
      不是有效果嘛,默认是展开最上面那月份,你点击月份看看效果。
      不过你的主题好像加载了2个jQuery库,1个是WP自带的(应该是插件加载的),1个是你主题上加载的,这样容易出现冲突错误,最好解决一下。

  9. Captain says:

    代码盲问一声,CSS是应该新建一个 .css 的文件来编写还是在 funtion.php 里面修改呀?如果要新建的话应该在哪个路径下呢?

    1. zwwooooo says:

      @Captain
      写到你主题的 style.css 里面去

  10. 深蓝 says:

    正合我意~~谢谢。改天折腾。

  11. seo says:

    $output = get_option('SHe_archives_'.$lastpost);这个函数是怎么用的?二级域名怎么出来还是www的。??

    1. zwwooooo says:

      @seo
      这个只是获取数据库表值而已

    2. seo says:

      @zwwooooo
      恩。。我最后发现了。。谢谢。。!!

  12. 偶志 says:

    你好博主,我用你的方法做了个归档页面。但是我改的时候前台没有变化,我添加了文章归档页也没有变化。怎么回事

    1. zwwooooo says:

      @偶志
      归档页面要在发布了文章/删除了文章才会更新内容,如果你代码没搞错的话

  13. 郑永 says:

    能否把整个版本改成 按 年份 分开显示,和wp原生那种归档一样,呵呵 :)

  14. 郑永 says:

    把这个版本改成 按年份排版,和新篇那个归档一样,呵呵。

    1. zwwooooo says:

      @郑永
      其实都可以,改改就行

    2. 郑永 says:

      @zwwooooo
      那个已经可以了,呵呵

  15. 文章归档是不是每次更新文章,都会把整个网站的文章都查询一遍呢?能修改不整站查询吗?

    1. zwwooooo says:

      @米粒在线 这代码不查询就获取不到新文章了,况且更新文章又不是每秒每秒更新……所以无视吧

发表评论

昵称 *

网址

B em del U Link Code Quote