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. [...] 增加归档页面模板--实现方法为Zww的“代码实现WordPress归档页面模板[速度很快]” Tagged with: [...]

  2. BoKeam says:

    拿走了哈 :lol:

    1. zwwooooo says:

      @BoKeam 随便搜刮

  3. [...] 下面是详细步骤(引用自 zww 博客) 1. 把下面的 archives_list_SHe 函数代码扔进主题的 functions.php 里面 [...]

  4. zwoooooooooooo,多打几个。
    我的主题里有 archives.php这个文件,请问下该怎么操作?

    1. zwwooooo says:

      @瘦米中文
      删了/更名,然后按照文章中的方法折腾。

    2. @zwwooooo
      搞好了,还有一个问题,怎么在主题中加载jQuery 库?
      另外,我觉得,zwoooooooo,应该把存档页面的那些链接都默认设置为新页面打开,这样有助于提高用户体验,适合用户浏览习惯。

    3. zwwooooo says:

      @瘦米中文
      把下面的加入head内,最好在<?php wp_head() ?>前:
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      链接新窗口问题,我觉得不用,完全可以通过浏览器的功能在新标签打开(如ff/chrome下ctrl+点击,ie等就shift+点击)

  5. [...] 本来今天只想唠叨几句没用的话,不过大家都过来了,我就再说说弄归档这个页面的方法吧!以前在阿邙那里看过这样的效果(插件+jq),不过他这家伙最近不知道死哪里去了,文章也不更新!我还想问问他那个侧边栏滑动的bug怎么修改呢!不过,我今天看了zwwooooo的代码实现WordPress归档页面模板于是动手试了试,果然效果不错,起码我文章有归档了!我是一个复制党,直接拷贝粘贴过来了,大家可以不用跑他那里看啦,哈哈! [...]

  6. 小天 says:

    你好!我今天按照你的方法改了,我文件里面有调用JQ,但为什么不能伸缩呢?难道是我主题不支持?

    1. zwwooooo says:

      @小天
      跟主题没关系,说明你的jQ代码没写好,或者选择器搞错

    2. 小天 says:

      @zwwooooo
      我看heard里面是加载的google上的jq
      那我改修改哪些呀!~?

    3. zwwooooo says:

      @小天
      检查一下顺序,jQ库要先加载,然后才加载jQ代码

    4. 小天 says:

      @zwwooooo
      恩 JQ库是在上面,哎 不知道为什么?我对php还不是很熟悉,只是能看懂“点点/很多”
      呵呵,谢谢你啊!明天在来看你的文章
      还有hzlzh的哈哈 都有好多可以学习的地方!

    5. zwwooooo says:

      @小天
      这……你在本地测试吧,你说的是jQ代码,即js,不是php。只有archives_list_SHe函数才是php代码,这个直接扔到functions.php就可以了。

  7. snowxh says:

    这个想要月份显示大写应该改哪里?

    1. zwwooooo says:

      @snowxh
      怎样大写法?英文大写?英文大写就给archives-yearmonth这个class加个英文大写转换的css属性

    2. snowxh says:

      @zwwooooo
      不是不是 显示汉字 像你的那样~

    3. zwwooooo says:

      @snowxh
      把你的wp设为中文版就行了

    4. snowxh says:

      @zwwooooo
      是中文版。。。不是官方的都不行么= =

    5. zwwooooo says:

      @snowxh
      或许,我没测试,源代码用的是一些函数,为啥不用官方中文版?

    6. snowxh says:

      @zwwooooo
      官方3.0 3.01出的很晚额 就先下汉化的了
      等我换了官方的看看有木有变化。。

    7. zwwooooo says:

      @snowxh
      嗯,先试试吧,我倒喜欢数字,呵呵

  8. [...] 参考Z大的《代码实现wordpress归档页面模板》一文 [...]

  9. heson says:

    怎么没我的pingback 做做广告嘛~- - :evil:

    1. zwwooooo says:

      @heson
      貌似没捕捉到

  10. 双陈记 says:

    学习了,去尝试一下!

  11. 已经添加到我的模板了~

    1. zwwooooo says:

      @blueandhack
      很不错的,我一直用

  12. winky says:

    很好,留个标志,以后备用。。。

  13. ailog says:

    如果你的主题本身加载了 jQuery 库,那么继续把下面的 jQ 代码加上去,就会有滑动伸缩效果了,麻烦问一下要加到那个文件??

    1. zwwooooo says:

      @ailog
      自建一个js文件然后在jQ库下面加载。

    2. zwwooooo says:

      @ailog
      新建的js:
      jQuery(document).ready(function(){
      上面代码放到这里
      });

  14. ailog says:

    谢谢楼主,这个问题之前解决了,但是在处理英文网页的时候还是有些问题。http://www.ailog.net/archives
    还是不可以自动收缩,不知道您有什么解决方案,麻烦您了。

    1. zwwooooo says:

      @ailog
      不能收缩就是jQ代码没有折腾好了。认真检查

  15. ailog says:

    谢啦,我在检查一遍

  16. ailog says:

    今天又鼓捣了好久,还是不能收缩。。。。。 :oops: :oops: :oops:

    1. zwwooooo says:

      @ailog
      囧~你用了插件了?

  17. VN. says:

    你好请问一下,下面这段代码(page.php)在哪加入代码:

    <?php
     /* Mystique/digitalnature */
     get_header();
    ?>
    
      <!-- main content: primary + sidebar(s) -->
      <div id="main">
       <div id="main-inside" class="clear-block">
        <!-- primary content -->
        <div id="primary-content">
         <div class="blocks">
           <?php do_action('mystique_before_primary'); ?>
           <?php
    
            if (have_posts()):
             while (have_posts()):
              the_post();
              mystique_page();
             endwhile;
            endif;
    
            comments_template();
           ?>
           <?php do_action('mystique_after_primary'); ?>
         </div>
        </div>
        <!-- /primary content -->
    
        <?php get_sidebar(); ?>
    
       </div>
      </div>
      <!-- /main content -->
    
    <?php get_footer(); ?>
    
    
    1. zwwooooo says:

      @VN.
      你的主题调用很多,你试试放在

      <?php do_action('mystique_after_primary'); ?>

      下面吧

    2. VN. says:

      @zwwooooo
      谢谢、

  18. Edward Han says:

    做完后,能够伸缩,但有个问题,每篇文章后的 访问数(views) 都是0 ,不知道怎么修改这个,我使用的插件 wp-postviews 来计算每篇文章的点击量,那我该如何将这个插件的点击数据 导入 到我的归档文章内?

    1. zwwooooo says:

      @Edward Han
      导入?没有这个东东。你只能试试在生成归档文件的代码加入views调用函数,只能提供这个思路给你,行不行就要你自己测试了。

  19. Edward Han says:

    我按照你的代码作出来的

    http://www.edward-han.com/%E5%BD%92%E6%A1%A3

    但 “篇文章” 之前个 > 符号,代码都是复制的,不知道为什么会出现这个情况。

    1. zwwooooo says:

      @Edward Han
      这个要你自己认真检查了,我再看了下我这的代码,貌似没什么问题,而且很多copy的朋友貌似没问题。

  20. [...] 转载:《代码实现WordPress归档页面模板[速度很快]》 [...]

回复给 zwwooooo ¬
取消回复

昵称 *

网址

B em del U Link Code Quote