代码实现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. 这个评论框好强大

    1. zwwooooo says:

      @哥特复兴
      刚写上的。。。

  2. 八方SEO says:

    WP多折腾

    1. zwwooooo says:

      @八方SEO
      也可以不折腾

  3. :evil: 这个挺有用,可以当网站地图用,以前都是插件,不过现在用的柳城那个百度地图插件,感觉也还OK。

    1. zwwooooo says:

      @平板电脑推荐
      柳城的默认加了他的链接……

    2. @zwwooooo
      :cool: 可以去掉,不过我没那么弄 :mrgreen:

    3. zwwooooo says:

      @平板电脑推荐
      嘻嘻,做了seo手段,不喜欢。

    4. Demon says:

      @zwwooooo 阿囧这货现在就是在搞SEO。

    5. zwwooooo says:

      @Demon
      对,看在囧的份上我没关小屋。

  4. JASKNi says:

    :evil: 你的进度条骗我说上上下下左右左右BAEnter之后就可以再来一次的...

    1. JASKNi says:

      @JASKNi
      错了, 是read more...

    2. zwwooooo says:

      @JASKNi
      没这么高级,说来玩的

    3. JASKNi says:

      @zwwooooo
      :sad: :sad: :sad: 你这个骗子!!

    4. zwwooooo says:

      @JASKNi
      其实我也没骗你啊,你可以按,然后鼠标重新放在 read more 上, :mrgreen:

  5. 返回顶部按钮chrome下失效

    1. zwwooooo says:

      @sprityaoyao
      的确是,已修正,谢谢。

  6. 河河 says:

    好文章,顶一下

    1. zwwooooo says:

      @河河
      谢顶,哈。

  7. Harid says:

    这么久了,ZWWoOoOo还在折腾WP,佩服你的坚持哦!

    1. zwwooooo says:

      @Harid
      平时玩的,遇到问题就写写

  8. 爱音族 says:

    好久没有用过WP了。

    1. zwwooooo says:

      @爱音族
      我是一直wp

  9. wmtimes says:

    留言这块怎么实现的啊?一会左边一会右边的。

  10. ben says:

    还在坚持,真不容易啊,我的博客都不写了,不知道哪天重新启动~

    1. zwwooooo says:

      @ben
      平常心,就能坚持了

  11. 公子 says:

    zww又折腾这个评论框了。。。

    1. zwwooooo says:

      @公子
      啊,被你发现了

  12. 咚门 says:

    归档当初想改改的,结果发现听复杂的,就用主题自带的了。现在的也没用上。不过那个link页面是你这来的。

    1. zwwooooo says:

      @咚门
      需要就折腾下。

  13. 尤利卡 says:

    很精致嘛

  14. 郑永 says:

    我现在这个归档和你一样啊,我把它命名为 网站地图了

    1. zwwooooo says:

      @郑永
      方法一样?

  15. John says:

    本来呢看到要改functions.php就有点担心能不能成功,因为我的网站一修改functions.php就报500错误。不过还好这次没有,所以就借用了。一开始我想用自带的archives模板,但是貌似不起作用,遂放弃,改用你的方法。不过操作过程中也没照搬,因为个人的情况不同。还是谢谢了

    1. zwwooooo says:

      @John
      通常要举一反三的,生搬硬套容易出问题,哈,慢慢折腾。

  16. Adoo says:

    多谢文章,有用到你代码。
    不过不知道你有没有注意到,在有置顶文章的时候,置顶文章会单独一类显示在最前面。
    我查了一下文档,提供参数caller_get_posts 给WP_Query,能解决这个问题。

    1. zwwooooo says:

      @Adoo
      可以另外加参数排除置顶分类的,参考WP_Query的参数即可。

  17. Ju2ender says:

    博主的主题很赞,将Loading bar融入Head很有新意

    1. zwwooooo says:

      @Ju2ender
      谢谢您的夸奖。

  18. jianbo says:

    刚抄您的代码弄了个归档页面,呵呵. 当有文章是置顶状态的时候顺序会有些问题,置顶文章都跑到前面去了,下面代码

    $the_query = new WP_Query( 'posts_per_page=-1' );

    需要改成

    $the_query = new WP_Query(array('posts_per_page'=>-1,'ignore_sticky_posts' => 1));

    再次感谢!

    1. zwwooooo says:

      @jianbo
      嗯,自行修改,因为很少用到置顶,所以没加此参数了。我看还是加到文章去吧,感谢。

  19. steven says:

    楼主的找到类似指的是哪呀? :?:

    1. zwwooooo says:

      @steven
      好吧,代码贴时没注意,被屏蔽了,以修正。

发表评论

昵称 *

网址

B em del U Link Code Quote