代码实现WordPress归档页面模板[WP原生函数篇]

作者：用户投稿来源：网络发布时间： 14/07/04

【编者按】网学网网络知识频道为大家收集整理了“代码实现WordPress归档页面模板[WP原生函数篇]“提供大家参考，希望对大家有所帮助!

　　今天在制作一个主题时，突然就想尝试下用 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 格式，不然中文会乱码）

/* 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'' );
         $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 $year .'' 年</h3><ul //输出年份
             }
             if ($mon != $mon_tmp) {
                 $mon = $mon_tmp;
                 $output .= ''<li><span $mon .'' 月</span><ul //输出月份
             }
             $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 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 />     <ul />         <li><span (本月文章数量)</em></span>
             <ul />                 <li>号数: <a href="文章链接">文章标题</a> <em>(评论数量)</em></li>
             </ul>
         </li>
     </ul>
 </div>

　　折腾完，收工！

Wordpress下载：