代码实现WordPress归档页面模板[WP原生函数篇]

2014 新版《WordPress 归档页面模板[WP原生函数实现2014版]


前年(时间好快过)我写了一篇《代码实现WordPress归档页面模板[速度很快]》,之后我的博客归档页面就一直使用文章所说的方法至今。其实这个方法里面的数据是直接使用 SQL 语句实现调用的,WordPress 官方不提倡直接使用 SQL 语句实现。今天在制作一个主题时,突然就想尝试下用 WordPress 原生函数来实现归档页面的内容调用。

经过测试,我使用了 WordPress 推荐的 WP_Query() 函数来调用所有文章,除了每月的文章数量无法直接调用到外,其它数据都可以实现,虽然可以借助另外的 WP 原生函数实现每月文章数量,但是比较繁琐。所以我另外想了个办法:我博客的存档页是用了 jQuery 来实现每月文章列表的伸缩效果,于是“每月文章数量显示”我就用 jQuery 来实现了。

下面是过程和方法,有兴趣的朋友可以试试。

折腾功能:代码实现WordPress归档页面模板[WP原生函数篇]

原创作者:zwwooooo

特点

1. 按照年份、月份显示文章列表
2. 显示每月的文章数量(需要配合及Query)
3. 显示每篇文章的评论数
4. 使用 WordPress 原生函数实现数据调用
5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存,只在发表/修改文章时才更新,减少数据库查询。
6. 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。

在线演示效果见我博客的存档页

效果图

代码实现WordPress归档页面模板[WP原生函数篇]

步骤

1. 把下面的函数扔到所用主题的 functions.php 文件里面:(注意:因为有中文,所以要把 functions.php 文件转换为 UTF8 无 BOM 格式,不然中文会乱码)【2012.3.22 UpdateJianbo盆友提醒,加上忽略置顶文章】

 /* Archives list by zwwooooo | https://zww.me */
 function zww_archives_list() {
     if( !$output = get_option('zww_archives_list') ){
         $output = '<div id="archives"><p>[<a id="al_expand_collapse" href="#">全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>';
         $the_query = new WP_Query( 'posts_per_page=-1&ignore_sticky_posts=1' ); //update: 加上忽略置顶文章
         $year=0; $mon=0; $i=0; $j=0;
         while ( $the_query->have_posts() ) : $the_query->the_post();
             $year_tmp = get_the_time('Y');
             $mon_tmp = get_the_time('m');
             $y=$year; $m=$mon;
             if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';
             if ($year != $year_tmp && $year > 0) $output .= '</ul>';
             if ($year != $year_tmp) {
                 $year = $year_tmp;
                 $output .= '<h3 class="al_year">'. $year .' 年</h3><ul class="al_mon_list">'; //输出年份
             }
             if ($mon != $mon_tmp) {
                 $mon = $mon_tmp;
                 $output .= '<li><span class="al_mon">'. $mon .' 月</span><ul class="al_post_list">'; //输出月份
             }
             $output .= '<li>'. get_the_time('d日: ') .'<a href="'. get_permalink() .'">'. get_the_title() .'</a> <em>('. get_comments_number('0', '1', '%') .')</em></li>'; //输出文章日期和标题
         endwhile;
         wp_reset_postdata();
         $output .= '</ul></li></ul></div>';
         update_option('zww_archives_list', $output);
     }
     echo $output;
 }
 function clear_zal_cache() {
     update_option('zww_archives_list', ''); // 清空 zww_archives_list
 }
 add_action('save_post', 'clear_zal_cache'); // 新发表文章/修改文章时

2. 复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:

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

然后找到类似 <?php content(); ?>,在其下面加入如下代码

<?php zww_archives_list(); ?>

进wp后台添加一新页面,在右侧栏模板选择 archives

3. 给主题加载 jQuery 库,没有加载的,把下面这句扔到 functions.php 里面就行了。

wp_enqueue_script('jquery');

4. jQuery 效果代码

jQuery(document).ready(function($){
 //===================================存档页面 jQ伸缩
     (function(){
         $('#al_expand_collapse,#archives span.al_mon').css({cursor:"s-resize"});
         $('#archives span.al_mon').each(function(){
             var num=$(this).next().children('li').size();
             var text=$(this).text();
             $(this).html(text+'<em> ( '+num+' 篇文章 )</em>');
         });
         var $al_post_list=$('#archives ul.al_post_list'),
             $al_post_list_f=$('#archives ul.al_post_list:first');
         $al_post_list.hide(1,function(){
             $al_post_list_f.show();
         });
         $('#archives span.al_mon').click(function(){
             $(this).next().slideToggle(400);
             return false;
         });
         $('#al_expand_collapse').toggle(function(){
             $al_post_list.show();
         },function(){
             $al_post_list.hide();
         });
     })();
 });

PS:不知道怎么写js文件调用的就直接打开 header.php 并找到 <?php wp_head(); ?>,在其下面加上
<script type="text/javascript">上面那段jQuery代码</script>

4. css根据需要写,不写也可以的。HTML结构:

<div id="archives">
     <p>[<a id="al_expand_collapse" href="#">全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>
     <h3 class="al_year">'年份</h3>
     <ul class="al_mon_list">
         <li><span class="al_mon">月份<em> (本月文章数量)</em></span>
             <ul class="al_post_list">
                 <li>号数: <a href="文章链接">文章标题</a> <em>(评论数量)</em></li>
             </ul>
         </li>
     </ul>
 </div>

折腾完,收工!

zww
or
oooo

“代码实现WordPress归档页面模板[WP原生函数篇]”有232条评论

  1. vian says:

    照你的方法做了,但是不能伸缩也不能折叠,奇怪!

    1. zwwooooo says:

      @vian
      检查jQuery代码有没有正确加载和执行,可以通过firebug查看。

  2. 我的数据库里怎么没有生成zww_archives_list这个表,其他的里面也没有,不过可以正常使用,谢谢了

    1. zwwooooo says:

      @小雅辰辰
      没有么?我这正常啊

  3. Bolo says:

    其实只需要用WP_Query()就可以

    1. zwwooooo says:

      @Bolo
      你是说缓存多余?还是说可以直接 WP_Query() 配置参数就能输出需要的格式?

    2. Bolo says:

      @zwwooooo
      给WP_Query()加一个posts_groupby的filter不需要for循环就可以按日期归档,另外使用update_option()作为缓存的话,clear_zal_cache()先判断一下$post->post_status是否等于publish可以减少一些无谓的缓存清空动作

    3. zwwooooo says:

      @Bolo
      可惜对SQL语句木有了解过……

  4. shadowma says:

    折騰完畢,感謝分享! :mrgreen:

  5. Normal says:

    非常有用,很有效果。感谢你的教程!

    1. zwwooooo says:

      @Normal
      慢慢折腾

    2. Normal says:

      @zwwooooo
      话说,我换了个没有page.php的主题,就是你的免费的zonce主题,应该怎么修改啊?

  6. Normal says:

    对于没有page.php的主题应该怎么做啊??

  7. seventh says:

    好像遇到了点小问题,我测试时候遇到了此种情况,就是我突然想把文章发表到比现在(2012)早的年份(如2009或别的),但月份也是当月的(如现在的4月份),然后显示就出错了,显示年份下的月份不会显示(如4月不显示,别的可显示),是我这边的问题还是?能否解决?
    因为有时候会遇到把文章改前的情况

    1. zwwooooo says:

      @seventh
      按道理是不影响的,这里是按文章发布时间排序的。

  8. Normal says:

    Z大,谢谢提醒,现在已经做好存档页面了。嘿嘿~~ :smile: :smile:

    1. zwwooooo says:

      @Normal
      搞定就好,哈。

  9. 蓝枫 says:

    亲,想问个纠结的问题,我的博客文章比较多,现在本地测试可以生成存档到数据库表 但是服务器上现在生成字段了 但是就是不进内容 导致加载缓慢,不知道该怎么办 用的目前的代码,没做修改 挺卡的 http://www.lanfeng.net/archives

    1. zwwooooo says:

      @蓝枫
      检查一下代码,如果老是要重新计算,应该是木有做出判断。

    2. 蓝枫 says:

      @zwwooooo
      是这样的,本地使用可以,但是到服务器上就是无法写入到数据库的那个字段内,无法写入就需要加载数据库所有的列表,从而导致速度很卡,代码一样的,就是把你的zww改为了wp 我想 这肯定没问题的

    3. zwwooooo says:

      @蓝枫
      既然本地测试OK,那么就是你的服务器环境问题,具体原因不知,我不是搞主机的,资讯主机商。发现你的博客文章基本都是转载的,囧~

  10. 蓝枫 says:

    博主zwwooooo 你能帮忙想想办法吗 文章太多 需要服务器怎么调整

  11. 你的这个回复框效果是怎么实现的

  12. 潇遥 says:

    谢谢你的文章了,很喜欢你的博客。我最近正想报一个php培训班呢,我会多来你博客学习的。我对代码一窍不通啊,但我肯定要从seo向php程序员过度的。我的目标就是形成品牌,今后多写文章,不要在浮云上面浪费时间。博客这东西只是一个载体,关键是里面装的什么。我计算机是几乎0基础的,打扰一下,请问我安装了你的Weisay Sail主题为什么文章中的插图不在首页文章摘要里显示呢?有空能不能帮我看一下。

    1. zwwooooo says:

      @潇遥
      你搞错了,Weisay Sail 不是我的主题。

    2. 潇遥 says:

      其实我是一时失手,我想问的是——请问我安装了Weisay Sail主题为什么文章中的插图不在首页文章摘要里显示呢?有空能不能帮我看一下。
      :lol: :lol:

    3. zwwooooo says:

      @潇遥
      这个你直接问Weisay主题作者应该更快得到答案,我没看过这主题的文件代码。你说的插图问题,跟主题本身有关。

  13. 咚门 says:

    又参考了。。

  14. [...] zwwooooo – 代码实现WordPress归档页面模板 [...]

  15. 子非我 says:

    请问如果希望某分类下文章不显示,该如何操作?

    1. zwwooooo says:

      @子非我
      这个处理麻烦,无法直接给你答案。

    2. zwwooooo says:

      @子非我
      啊,你参考一下 WP_Query 的参数,加上排除的分类即可。

    3. 子非我 says:

      嗯,不懂php的人呐 :razz:

    4. zwwooooo says:

      @子非我
      不学肯定不懂了。

  16. xie says:

    有头像!!哈哈

  17. 建立存档页的方法 | oneorison says:

    [...] 6、即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。使用效果 使用方法 作者地址:代码实现WordPress归档页面模板[WP原生函数篇] [...]

  18. [...] 下面方法每个步骤都分两种,一种是对于一般主题,另外一种是针对Mossight主题的。如各位看客需了解其原理,请移步原创作者:ZWWoOoOo(毕竟借鉴他人的没有那么足底气跟人讲解 呵呵)查看具体效果:请看我博客的存档页 [...]

  19. 倡萌 says:

    好吧 也为我的主题添加这个 :mrgreen:

  20. 鬼娃娃 says:

    第一步的时候,就会把第一步代码全部显示在头部了