代码实现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 | http://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>

折腾完,收工!

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25589

224 comments

  1. phoetry phoetry Opera 10.10 Windows 7

    这次不是沙发我就把名字倒过来写

    沙发
  2. zwwooooo zwwooooo Firefox 10.0.2 Windows 7 x64 Edition

    @phoetry
    要是有“审核的沙发”你就要倒着写了,哈。

  3. Veetotem Veetotem Google Chrome 17.0.963.56 Windows XP

    怎么回事,我打开预览页是空的。RP问题吗

    板凳
  4. ......
  5. 郑永 郑永 Firefox 32.0 Windows XP

    InstantClick 只能用在手机端了,呵呵。

    91楼
  6. ego ego Google Chrome 37.0.2062.124 Mac OS X  10.9.5

    这个有严重的BUG,表现为若某一年比如(2012年8月份)只有一篇文章,它会嵌到上一年(比如2017年8月份)li下

    92楼
  7. 落大雨 落大雨 Google Chrome 40.0.2214.115 Windows 8.1 x64 Edition

    请问,怎样在归档页面默认将所有月份都展开呢?目前是仅展开最近一个月的,其它的都是折叠状态。
    盼回复,感激不尽!

    93楼
    • zwwooooo zwwooooo Firefox 36.0 Windows 8.1 x64 Edition

      @落大雨
      太忙,你试试删除/注释掉这个

               $al_post_list.hide(1,function(){
                   $al_post_list_f.show();
               });
      
    • 秋叶博客 秋叶博客 Google Chrome 33.0.0.0 Android 4.4.4

      你要的修复在我博客里面,可以到http://www.wuover.com/article查看效果

  8. 秋叶博客 秋叶博客 Google Chrome 39.0.2171.99 Windows 7 x64 Edition

    这附带有缓存啊,修改了都不生效的。。。。让我白折腾了~

    94楼
    • zwwooooo zwwooooo Firefox 37.0 Windows 8.1 x64 Edition

      @秋叶博客
      缓存有条件,如果你改了代码,要起效就要去添加/修改/删除 post 才能看到效果,或者你把缓存的语句先注释掉。

  9. yufei yufei Sogou Explorer Windows 7 x64 Edition

    你好,请问将评论数修改为浏览次数怎么修改呢?我安装了Post Views插件了。

    95楼
  10. 慢鸟 慢鸟 Google Chrome 31.0.1650.63 Windows 8.1 x64 Edition

    :razz: 恩。使用了你的方法,不错。顺便把你的文章也转了过去,放心表明了原出处。如果不希望转,M我,我删了就是了。
    还有一个小问题‘鼠标放在超链接上显示上下箭头如何更改’。

    96楼

Leave a Reply