2012年03月06日 232条评论

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

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

    1. zwwooooo says:

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

  2. Veetotem says:

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

    1. jiechic says:

      @Veetotem
      我打开也是空的。

    2. lss53 says:

      @jiechic
      我这儿打开也是空的

    3. zwwooooo says:

      @Veetotem
      我写错一个参数,因为缓存问题导致我认为没问题

  3. Feeng says:

    还是用的插件,改天把ZWW大叔的代码折腾上。

    1. zwwooooo says:

      @Feeng
      插件方便

  4. 林木木 says:

    现在研究模板函数的真见不着了……

    1. zwwooooo says:

      @林木木
      的确没多少了,只有仿制盗版者

  5. 小闇 says:

    看不見內容+1 等待修復 :cool:

    1. 小闇 says:

      留言後到主畫面看了看 原來的那個下拉式導航…現在好像一坨◯◯(我說得會不會太失禮了…orz)

    2. axiu says:

      @小闇
      看不见+1

    3. Veezy says:

      @小闇
      +1... 一坨 :mrgreen:

    4. zwwooooo says:

      @小闇
      对,你胃口不好时可以形容为蛋糕,胃口好时就形容为一坨屎吧——牛屎。

    5. zwwooooo says:

      @Veezy
      其实应该是 +2 = 三坨

  6. wmtimes says:

    这排版像是在哪儿见过。

    1. zwwooooo says:

      @wmtimes
      我的博客一直这样排版

  7. 不能吧 says:

    咦~我IE8从QQ邮箱订阅进来的,看存档页啥也没有,然后换opera,也是啥都木有啊~~~

    1. 不能吧 says:

      @zwwooooo
      Z大,这句

      wp_enqueue_script('jquery');

      能替代这个

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      

      吗?区别是什么呢?

    2. zwwooooo says:

      @不能吧
      区别?wp_enqueue_script('jquery')是调用wp自带的jq库,这种调用方法是wp官方推荐的,兼容性较好,但速度稍微慢点——这个速度是人感觉不到的。

    3. 不能吧 says:

      @zwwooooo
      不知道这两个库的内容区别多大,还是用谷歌的吧,毕竟都用谷歌 呵呵

    4. zwwooooo says:

      @不能吧
      这个随意了。

  8. 牧风 says:

    用page-archive.php不行么, 这个

    1. zwwooooo says:

      @牧风
      可以,随便你叫神马名

  9. 收着以后用。

  10. Jianbo says:

    学习了

  11. 奚少 says:

    改天换换玩玩 :evil:
    “2. 显示每月的文章数量(需要配合及Query)”这里“及Query”打错了 :grin:

    1. zwwooooo says:

      @奚少
      真细心,等下修正

  12. 奚少 says:

    猛击ctrl+F5,依然看不到 :???:

    1. zwwooooo says:

      @奚少
      写错参数……已修正

  13. MYZ says:

    有时间试试。最近勾起了欲望。你懂的...

    1. 穆远直 says:

      @MYZ

      MYZ: 有时间试试。最近勾起了欲望。你懂的...

      用上了,感谢zww哦~在你这里学到很多知识。

    2. zwwooooo says:

      @MYZ
      那就跟我一起折腾

  14. 本小明 says:

    都快成队形了,我也没看到存档页

    1. zwwooooo says:

      @本小明
      现在可以了啊

  15. xsinger says:

    按照你的方法,但是空白显示的?以前的那个方法还可以!! :?:

    1. zwwooooo says:

      @xsinger
      有个参数名我贴错了,已修正。

    2. xsinger says:

      @zwwooooo 好!

  16. 牧风 says:

    代码有错, get_option('zww_archives_list')存在时, 没有给$output赋值,

         }else{
    		$output = get_option('zww_archives_list');
    	 }
         echo $output;
    1. zwwooooo says:

      @牧风
      已经修正,参数错了。

    2. 牧风 says:

      @zwwooooo
      我怎么收不到你的评论回复的邮件呢,莫非进入了垃圾邮件..

    3. zwwooooo says:

      @牧风
      可能,有人反映说我的评论回复邮件会随机进垃圾,ORZ

    4. 牧风 says:

      @zwwooooo
      垃圾箱木有, 这个.......

  17. Jianbo says:

    贴代码的时候老出现个问题(当使用语法高亮插件时),'' 还有单双引号都变成了 < 等,这有什么办法处理么? 如果单一用HTML模式编辑(或visual)都不会有问题,2者一切换,这问题就出来了。

    1. Jianbo says:

      @Jianbo
      上面的符号也被处理掉了,是大于号,小于号,都变成了 & l t ;这样的

    2. zwwooooo says:

      @Jianbo
      推荐插件 Quotmarks Replacer

  18. heson says:

    一直都用这个功能额 :wink:

  19. Lauyu says:

    折腾好了。。。只是CSS部分不知如何修改 :mrgreen:

    1. zwwooooo says:

      @Lauyu
      如果你的主题css写的好,不用写也ok。

  20. 不能吧 says:

    又发现好玩的了,文章页评论框随窗口滚动了哦 :mrgreen:

    1. zwwooooo says:

      @不能吧
      哈哈,昨晚写好玩的,今天才放上

回复给 Veetotem ¬
取消回复

昵称 *

网址

B em del U Link Code Quote