Old

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

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

    81楼
  2. zwwooooo zwwooooo Firefox 10.0.2 Windows 7 x64 Edition

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

  3. Veetotem Veetotem Google Chrome 17.0.963.56 Windows XP

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

    82楼
  4. ......
  5. 生活有意思 生活有意思 Firefox 29.0 Windows 8.1 x64 Edition

    ZWW大大,这个有没有办法支持自定义文章类型呢? 试了下只会显示wordpress默认的文章类型

    81楼
    • zwwooooo zwwooooo Firefox 29.0 Windows 8.1 x64 Edition

      @生活有意思
      可以,对 WP_Query 函数加参数,你自己去测试:

      WP_Query( 'posts_per_page=-1&ignore_sticky_posts=1&post_type=自定义文章类型名' );
    • zwwooooo zwwooooo Firefox 29.0 Windows 8.1 x64 Edition

      @生活有意思
      不同下,如果要包括自定义类型就要这样写了:

      $the_query = new WP_Query( array(
      	'posts_per_page' => -1,
      	'ignore_sticky_posts' => 1,
      	'post_type' => array('post','自定义文章类型名'
      )
      );

      具体自己看函数参数

    • 生活有意思 生活有意思 Firefox 29.0 Windows 8.1 x64 Edition

      @zwwooooo
      感谢,我去试试

  6. 小清新图片 小清新图片 Google Chrome 33.0.1750.146 Mac OS X  10.9.2

    列表不更新了,发文章,清缓存,归档列表一直就是不动。。- -好尴尬~

    82楼
  7. try try Google Chrome 35.0.1916.153 Windows 7 x64 Edition

    我想通过给WP_Query加参数,能够在归档页中排除某些文章分类,
    我的某些分类是隐私的,不想该分类在归档页中出现
    不知想法是否正确

    83楼
  8. try try Google Chrome 35.0.1916.153 Windows 7 x64 Edition

    很抱歉,不仅盗了你的代码,还盗了你的css,

    84楼
  9. WordPress添加文章归档页面 | 天羽小筑 - pingback on 2014/07/05/ 19:22
    85楼
  10. 宋颖 宋颖 Firefox 30.0 Windows 7

    请问,html结构的那部分,是写在哪里呢?

    86楼
  11. Aaron Aaron Google Chrome 30.0.1599.101 Windows 7 x64 Edition

    很好,折腾了半个小时。感谢您无私的分享。

    87楼
  12. Kuka Kuka Google Chrome 35.0.1916.114 GNU/Linux

    感谢,使用了! :razz:

    88楼
  13. 郑永 郑永 Google Chrome 37.0.2062.103 Windows XP

    请教一下,为什么我现在用很多归档页的输出代码都显示空白,而换回原来的就可以了,其他版本包括你这个都不行,都显示空白,难道空间函数问题?还是。。。

    89楼
    • zwwooooo zwwooooo Firefox 32.0 Windows 8.1 x64 Edition

      @郑永
      这个用了数据库缓存,所以要检查一下是否清空后没生成新的

    • 郑永 郑永 Firefox 32.0 Windows XP

      @zwwooooo
      我试着发布一篇文章来清空,但是还是不行。。只能用旧的样式,喜欢你新的样式,呵呵。 怎么搞都是空白啊,头大。

  14. 郑永 郑永 Firefox 32.0 Windows XP

    另外很喜欢InstantClick,居然对很多ajax东西造成显示问题,于是只能放弃了。。。

    90楼
  15. 郑永 郑永 Firefox 32.0 Windows XP

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

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

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

    92楼
  17. 落大雨 落大雨 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查看效果

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

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

    94楼
    • zwwooooo zwwooooo Firefox 37.0 Windows 8.1 x64 Edition

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

  19. yufei yufei Sogou Explorer Windows 7 x64 Edition

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

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

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

    96楼

Leave a Reply