代码实现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. sky says:

    呵呵,这个功能很重要的,值得一试的

    1. zwwooooo says:

      @sky 一般博客都加上,用插件或者代码

    2. sky says:

      @zwwooooo
      呵呵,因为我之前是插件的,还是决定用回你的代码好了,谢谢啊 :razz:

    3. zwwooooo says:

      @sky
      插件简单,代码折腾,随意

  2. 太感谢你上午的帮忙了~

  3. 知道了,谢谢!

  4. Carrie says:

    你真的很要求完美呢,一改再改,佩服!

    1. zwwooooo says:

      @Carrie 有问题没办法啊

    2. Carrie says:

      @zwwooooo 看來我之後重新再寫主題時,也會遇上這個 IE 困難,唉,誰叫 IE 使用者還是佔絕大多數啊 :???:

    3. zwwooooo says:

      @Carrie IE基本上OK就行了,特别是IE6,差不多可以直接忽视了。

    4. Carrie says:

      @zwwooooo 我的確是很想直接無視於 IE6,但其他版本還是會稍微注意一下的。

  5. 相当好的排版,这样打开就很快了,不错。pj也可以改改!

  6. 麦子 says:

    我觉的我自己找的那个代码修改后挺好,嘿嘿

    1. zwwooooo says:

      @麦子 适用就好

  7. zchiy2k says:

    直接新建一个表去存档,每次更新最近一条文章,厉害

    1. zwwooooo says:

      @zchiy2k 更新了文章才需要更新存档嘛

    2. zchiy2k says:

      @zwwooooo 对啊,这个想法很聪明,对于文章特别多的站点很适用。

    3. zwwooooo says:

      @zchiy2k 对啊,不然老是在线生成很耗网站资源

    4. zchiy2k says:

      @zwwooooo 这个确实是优化的做法,很值得学习,感谢分享

  8. 北极鱼 says:

    不知道最后的那个JQ代码加在哪里??

    1. zwwooooo says:

      @北极鱼 如果你主题没有js文件,那么把下面的js加到主题header.php的<?php wp_head() ?>下面

      <script type="text/javascript">
      jQuery(document).ready(
      function($){
      文章里面的jQ代码
      });
      </script>

  9. 北极鱼 says:

    我主题有用到JQ,不过我把那些代码加在我主题用到的JS里面(直接复制粘贴到JS的最后面)没有效果,再试试直接复制到header.php看看

  10. 阿七 says:

    速度很快的说,确实不错

    1. zwwooooo says:

      @阿七 其实这个功能的插件都用类似的方法

  11. 北极鱼 says:

    不知道如果我只要最新的那个月的文章展开来,其他月份收缩的显示效果要改哪里?因为默认是全部展开,文章一多的话不好看

  12. 北极鱼 says:

    不好意思,看走眼了,现在就是这样子的,呵呵

  13. nero says:

    zwwooooo你好。我按照你的教程操作之后,我发现我的小站里面的中英文及日期不是对齐的,怎么能够做到像你那样对齐呢?望赐教!
    [IMG]http://i27.tinypic.com/pyi54.jpg[/IMG]
    [IMG]http://i29.tinypic.com/2w59gd1.jpg[/IMG]
    好像不能贴图片上来,不过地址在上面,应该可以看。

    1. zwwooooo says:

      @nero 看图片没什么问题啊,默认是根据你主题的样式显示的。最好给我你的站点地址看看

    2. nero says:

      @zwwooooo
      地址在http://e-joy.org.ru,新手一枚,网上有人说可以用vertical-align: baseline;但是我加上去没用,可能是加错了吧,麻烦你帮忙看看了!!!

    3. zwwooooo says:

      @nero 你打开你主题的style.css,找到
      html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, code, em, img, dl, dt, ol, ul, li, input, textarea, form, label, table, tbody, tr, th, td {
      border:0 none;
      color:#515151;
      font-family:Helvetica,Tahoma,Verdana,sans-serif;
      font-size:12px;
      font-style:inherit;
      font-weight:normal;
      list-style:none outside none;
      margin:0;
      outline:0 none;
      padding:0;
      text-decoration:none;
      vertical-align:middle;
      }
      把最后那行的
      vertical-align:middle;
      改为
      vertical-align:baseline;
      试试吧

    4. nero says:

      @zwwooooo
      我试过,无效;又试了一遍,依然无变化,我知道有缓存,我是发了新日志之后再看的,不过还是谢谢你的帮忙!

    5. zwwooooo says:

      @nero 我在线调试是有效的,不过你要搞清楚,字母不可能完全对齐(小写字母会稍微下拉一点),这是因为中英文字体不统一的问题吧。
      你的网站但不开了,一直loading

  14. nero says:

    嗯,也许吧,不过网上有人说全用宋体就行,我试了一下,也不能解决,也许就是那个样子的,只是我太苛刻,想让它对齐吧,谢谢你的帮忙了。嘿嘿,网站打不开是因为我用的是免费空间,我已经习惯了。

    1. zwwooooo says:

      @nero 其实我这的小写英文字母也比中文稍微低点,只是没有你的那么严重而已,其实全部宋体就不如全部雅黑好了。

  15. nero says:

    没想到你现在还在,谢谢你的回复,你的意思是要我把字体设为雅黑试一下吗?我试一下!

  16. nero says:

    我还想问下,我用的是免费空间,是不是就不能开启本地的头像缓存啊,反正我把代码CP进function之后就出现错误了

    1. zwwooooo says:

      @nero 一般免费空间限制比较严格,我想一般都不会开发copy()函数,所以缓存不了

  17. Bee君 says:

    这个要折腾~~能手工解决就手工~不依赖插件

    1. zwwooooo says:

      @Bee君 嗯,这个不错

  18. [...] 嗯,交代一下最开始我是用ZWW的方法折腾的,看起来是不是很相像?它们不仅样子上看起来很像,骨子里也很像——代码也很像,就像是把clean archives reloaded剥离出来了一样。但我实在没心思去深究了。我在修改 archives_list_SHe 函数的时候出错的…… [...]

  19. yulin.me says:

    向LZ请教一个问题
    我前台是英文,怎么把文章归档上的日期也能成英文呢? :idea:
    (从中文转为英文的)

    1. zwwooooo says:

      @yulin.me 年月是根据你wp后台的日期格式,日是直接把上面代码里面的“d日”的“日”字去掉就可以了。

  20. yulin.me says:

    还发现一个问题,
    我只有在登录的情况下才能滑动伸缩效果
    不登录就只是展开的树状列表,而且无法伸缩。

    1. zwwooooo says:

      @yulin.me 去你那看了下,你的jQ库没加载

发表评论

昵称 *

网址

B em del U Link Code Quote