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 Opera 10 Windows 7 Windows 7

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

    81楼
  2. zwwooooo zwwooooo Firefox 10 Firefox 10 Windows 7 Windows 7

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

  3. Veetotem Veetotem Google Chrome 17 Google Chrome 17 Windows XP Windows XP

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

    82楼
  4. ......
  5. 生活有意思 生活有意思 Firefox 29 Firefox 29 Windows 8.1 Windows 8.1

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

    81楼
    • zwwooooo zwwooooo Firefox 29 Firefox 29 Windows 8.1 Windows 8.1

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

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

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

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

      具体自己看函数参数

    • 生活有意思 生活有意思 Firefox 29 Firefox 29 Windows 8.1 Windows 8.1

      @zwwooooo
      感谢,我去试试

  6. 小清新图片 小清新图片 Google Chrome 33 Google Chrome 33 Mac OS X 10.9 Mac OS X 10.9

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

    82楼
  7. try try Google Chrome 35 Google Chrome 35 Windows 7 Windows 7

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

    83楼
  8. try try Google Chrome 35 Google Chrome 35 Windows 7 Windows 7

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

    84楼
    • zwwooooo zwwooooo Firefox 30 Firefox 30 Windows 8.1 Windows 8.1

      @try
      盗?何来盗?这些代码就是写来分享的

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

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

    86楼
  11. Aaron Aaron Google Chrome 30 Google Chrome 30 Windows 7 Windows 7

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

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

    感谢,使用了! :razz:

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

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

    89楼
    • zwwooooo zwwooooo Firefox 32 Firefox 32 Windows 8.1 Windows 8.1

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

    • 郑永 郑永 Firefox 32 Firefox 32 Windows XP Windows XP

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

  14. 郑永 郑永 Firefox 32 Firefox 32 Windows XP Windows XP

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

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

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

    91楼
  16. ego ego Google Chrome 37 Google Chrome 37 Mac OS X 10.9 Mac OS X 10.9

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

    92楼
  17. 落大雨 落大雨 Google Chrome 40 Google Chrome 40 Windows 8.1 Windows 8.1

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

    93楼
    • zwwooooo zwwooooo Firefox 36 Firefox 36 Windows 8.1 Windows 8.1

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

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

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

  18. 秋叶博客 秋叶博客 Google Chrome 39 Google Chrome 39 Windows 7 Windows 7

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

    94楼
    • zwwooooo zwwooooo Firefox 37 Firefox 37 Windows 8.1 Windows 8.1

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

  19. yufei yufei Sogou Explorer Sogou Explorer Windows 7 Windows 7

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

    95楼
    • zwwooooo zwwooooo Firefox 43 Firefox 43 Windows 10 Windows 10

      @yufei get_comments_number('0', '1', '%')
      改为
      the_views(false)
      试试吧

  20. 慢鸟 慢鸟 Google Chrome 31 Google Chrome 31 Windows 8.1 Windows 8.1

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

    96楼

Leave a Reply