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

    这里还有个啊。。CSS不会写。。

    1. zwwooooo says:

      @鬼娃娃
      这……默认也可以

  2. [...] zwwooooo 大师的《代码实现WordPress归档页面模板[WP原生函数篇] [...]

  3. 您好,烦请帮忙看一下:我的为什么年月日都不缩进呢?也没有前面的圆点和方点呢?http://www.weiphp.com/archives/

  4. 样式不错啊,学习下。

  5. 伟胖子 says:

    做个标记,本博客已启用……TKS

  6. 瘦马 says:

    老大,想咨询一下,全部调试完毕,唯有收缩的按钮处的字体显示的是问号乱码。但可以正常伸缩。functions.php也改为UTF-8无BOM格式了,为何还是乱码,望赐教。

    1. zwwooooo says:

      @瘦马
      收缩按钮文字不在functions.php吧,你看你写在哪个文件吧。

  7. miro says:

    好用,不过JS文件怎么调用呢?能简单说下吗?

    1. zwwooooo says:

      @miro
      搜一下吧,很简单的问题就不敲了。

  8. Dectinc says:

    话说请问默认全部展开要怎么干啊?

    1. zwwooooo says:

      @Dectinc
      试试删除这句:

      $al_post_list.hide(1,function(){
                   $al_post_list_f.show();
               });
    2. Dectinc says:

      @zwwooooo
      我用了一个比较傻的办法= =
      $al_post_list.hide(1,function(){
      $al_post_list_f.show();
      $al_post_list.show();
      });
      改成这样之后把toogle里面的hide和show对换了,不过好像重复了,嘿嘿。
      谢谢!

    3. zwwooooo says:

      @Dectinc
      搞定就好,慢慢折腾。

  9. shaun says:

    你好 博主 按你的步骤我做了个归档页面 很奇怪 默认13年04月09日的被打开了 ,还有11年有个08日没归属到任何月份·····求指点 谢谢

    1. zwwooooo says:

      @shaun
      你这有点错乱,不知道哪个参数没写好,只是凭这我无法解决,你再认真检查下代码吧。

    2. shaun says:

      @zwwooooo
      :???: 是直接用的你给的代码啊~ 也不知道是哪里的问题了 会不会是因为那些是文章是厚爱导入过一次造成的 ··我再看看吧~

    3. zwwooooo says:

      @shaun
      自己尝试解决下吧

  10. 摆渡人 says:

    能不能把贵站归档的css分享一下?谢谢!

    1. zwwooooo says:

      @摆渡人
      自己直接用firebug看

  11. 我使用了你的代码,非常感谢你。我的归档页面是这个:静思学吧归档页面

    1. zwwooooo says:

      @静思学吧
      去看了一下,工作正常 :mrgreen:

  12. 谢谢博主大牛到我博客确认归档页面没有问题,而且令我很惊喜的是评论竟然可以邮件通知,真的非常不错哦。想知道这个评论的邮件通知是怎么做的?

    1. zwwooooo says:

      @静思学吧
      我写过这类文章,网上也有很多,当然插件就更不用说了。

  13. 一直就想做一个archive页面,苦于没有没找方法,你的方法看起来挺好的,等下我试一试,有问题还需要博主您能帮忙解答。

  14. […] 此代码来自ZWW代码实现WordPress归档页面模板[WP原生函数篇] […]

  15. 魍魉 says:

    我照着这个方法 也做了一遍 有效果 内容都正常
    但也是 “展开/收缩” 这几个字不显示
    您上面说 检查JQ代码处理 请问应该注意哪里。。。?
    为啥它不显示呢。。。求指教 俺是小白。。

    1. zwwooooo says:

      @魍魉
      检查有没有多次加载jQery库

  16. 何敏杰 says:

    博主你好,按住你的方法成功了,跟你的一模一样,但是我想把浏览次数像评论一样加在后边,但不知道怎么搞了,尝试了好多次都没搞定~~谢谢····

    1. zwwooooo says:

      @何敏杰
      你是指插入 wp-postviews 插件的 the_views() 函数么?如果是的话,要给 the_views() 加参数,因为默认 the_views() 是直接输出浏览数,你要改为 the_views(0),或者 the_views('false')

    2. 何敏杰 says:

      @zwwooooo
      你好,我是用http://blog.sina.com.cn/s/blog_9caa75a601017a2r.html这个方法实现浏览次数的,请问我该在后面如果加代码,麻烦写全一点,我不太懂代码,谢谢了哈~~

    3. zwwooooo says:

      @何敏杰
      这个直接就用 getPostViews() 吧,不行的话就是那个函数写的不是特别好,你可以尝试给那个 getPostViews 函数里面开头加个 global $post; 试试吧。

    4. 何敏杰 says:

      @zwwooooo
      虽然没搞定,还是谢谢你,应该是那函数问题,另外我想把评论数取消,删除('. get_comments_number('0', '1', '%') .')这一段 好像还会显示评论,有些奇怪~~~

    5. zwwooooo says:

      @何敏杰
      你好像忘了,这个是加了“数据库缓存”方式的,也就是你直接改了代码直接刷新存档页面你是看不到效果的,你得发新文章或者删除文章才能看到新修改的效果,我想你那“浏览数”没效果是不是也是这个问题导致的?给个简单的测试方法给你:
      修改了代码后,去后台随便把一篇文章用“快速编辑”设定为“草稿”,再设定为“发表”(这个有点类似删除文章动作和发表文章动作),然后刷新存档页面看看结果正不正确

    6. 何敏杰 says:

      @zwwooooo
      真实缓存搞的鬼,现在没问题了,浏览数显示加的这个函数getPostViews(get_the_ID()) ,非常感谢哈~~

    7. 何敏杰 says:

      @zwwooooo
      不过能实时更新缓存就好了,比如浏览此文章或者新增一个评论。~~·

    8. zwwooooo says:

      @何敏杰
      你知道为啥要缓存吗?因为访问时才去获取所有文章会让mysql很耗资源,除非你文章很少,如果是几年的文章一般会卡一下,而且还是单个人访问,如果几十人并发你的主机就挂了

  17. 金冈 says:

    如何忽略私密文章呢?

    1. zwwooooo says:

      @金冈
      这代码的函数虽然没有写 post_status 参数,但 private 类型的文章不会显示的啊,因为 post_status 默认是 publish。

  18. 甜菜 says:

    http://beet.xy-c.net/archives/
    自己随便弄了下,zww大看看,没写css(不会)

    1. 甜菜 says:

      @甜菜
      我又换了个主题,这方法行不通了

    2. 甜菜 says:

      @甜菜
      好吧,我又换回原来的主题了

    3. zwwooooo says:

      @甜菜
      因为用到了jquery,所以要注意兼容性

  19. 老赵 says:

    就这个,我待会也弄一个

  20. Pete says:

    问一下,为什么chrome下伸缩效果有点卡顿但是firefox和ie下不会。。 :?:

    1. zwwooooo says:

      @Pete
      为何那么多人这样说?是不是我改了js文件后因为缓存导致?我的ff、chrome都不会啊

    2. Pete says:

      @zwwooooo 我自己试试ie10和ff都不会,chrome就会。

    3. Pete says:

      @Pete
      好像是js冲突

    4. zwwooooo says:

      @Pete
      为什么我的chrome没事 :shock:

发表评论

昵称 *

网址

B em del U Link Code Quote