本教程我们来用实例代码讲讲WordPress用WP原生态函数归档页面模板,归档函数放在你所在的主题目录的functions.php里面.
1.归档函数
下面代码放到主题文件 functions.php 里面,另外注意代码里面有中文,所以要把 functions.php 文件编码改为 UTF8 无 BOM 格式.
/* Archives list v2014 by zwwooooo | http://zww.me */ function zww_archives_list() { if ( ! $output = get_option( 'zww_db_cache_archives_list' ) ){ $output = '<div id="archives"><p><a id="al_expand_collapse" href="#">全部展开/收缩</a> <em>(注: 点击月份可以展开)</em></p>' ; $args = array ( 'post_type' => 'post' , //如果你有多个 post type，可以这样 array('post', 'product', 'news') 'posts_per_page' => -1, //全部 posts 'ignore_sticky_posts' => 1 //忽略 sticky posts ); $the_query = new WP_Query( $args ); $posts_rebuild = array (); $year = $mon = 0; while ( $the_query ->have_posts() ) : $the_query ->the_post(); $post_year = get_the_time( 'Y' ); $post_mon = get_the_time( 'm' ); $post_day = get_the_time( 'd' ); if ( $year != $post_year ) $year = $post_year ; if ( $mon != $post_mon ) $mon = $post_mon ; $posts_rebuild [ $year ][ $mon ][] = '<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(); foreach ( $posts_rebuild as $key_y => $y ) { $output .= '<h3 class="al_year">' . $key_y . ' 年</h3><ul class="al_mon_list">' ; //输出年份 foreach ( $y as $key_m => $m ) { $posts = '' ; $i = 0; foreach ( $m as $p ) { ++ $i ; $posts .= $p ; } $output .= '<li><span class="al_mon">' . $key_m . ' 月 <em> ( ' . $i . ' 篇文章 )</em></span><ul class="al_post_list">' ; //输出月份 $output .= $posts ; //输出 posts $output .= '</ul></li>' ; } $output .= '</ul>' ; } $output .= '</div>' ; update_option( 'zww_db_cache_archives_list' , $output ); } //开源软件:phpfensi.com echo $output ; } function clear_db_cache_archives_list() { update_option( 'zww_db_cache_archives_list' , '' ); // 清空 zww_archives_list } add_action( 'save_post' , 'clear_db_cache_archives_list' ); // 新发表文章/修改文章时PS:因为查询度有点大,所以有加数据库缓存,只在文章发表/修改时才会更新缓存数据,所以测试时,可以特意去后台点[快速编辑]文章然后点更新就可以更新缓存数据.
2.复制一份主题的 page.php 更名为 archives.php,然后在最顶端加入:
<?php /* Template Name: Archives */ ?>在 archives.php 找到类似 <?php content(); ?>,在其下面加入如下代码"
<?php zww_archives_list(); ?>
然后新建页面,如叫:归档,选择模版为 Archives
3. 给主题加载 jQuery 库,没有加载的,把下面这句扔到 functions.php 里面就行了.
wp_enqueue_script('jquery');
4.jQuery 代码:
这次玩了逐个下拉/收缩效果,想着很好,但我博客感觉效果一般,因为文章太多了...如果文章不多,可以把代码里面 2 个 (s-10<1)?0:s-10 改为 s,效果会好看点.
( function ($, window) { $( function () { var $a = $( '#archives' ), $m = $( '.al_mon' , $a ), $l = $( '.al_post_list' , $a ), $l_f = $( '.al_post_list:first' , $a ); $l .hide(); $l_f .show(); $m .css( 'cursor' , 's-resize' ).on( 'click' , function (){ $(this).next().slideToggle(400); }); var animate = function (index, status, s) { if (index > $l .length) { return ; } if (status == 'up' ) { $l .eq(index).slideUp(s, function () { animate(index+1, status, (s-10<1)?0:s-10); }); } else { $l .eq(index).slideDown(s, function () { animate(index+1, status, (s-10<1)?0:s-10); }); } }; $( '#al_expand_collapse' ).on( 'click' , function (e){ e.preventDefault(); if ( $(this).data( 's' ) ) { $(this).data( 's' , '' ); animate(0, 'up' , 100); } else { $(this).data( 's' , 1); animate(0, 'down' , 100); } }); }); })(jQuery, window);PS:不知道怎么写 js 文件然后调用的朋友就直接打开 header.php 并找到 <?php wp_head(); ?>,在其下面加上:
<script type="text/javascript">上面那段 jQuery 代码</script>
因为是放在主题的 the_content() 下面,所以会默认使用主题写好的 h3 ul li 格式，如果要更加有特色,那么就要自己去修改 css 了.
查看更多关于WordPress WP原生函数实现归档页面模板实例的详细内容...