WordPress 归档页面模板[WP原生函数实现2014版]

折腾功能:代码实现WordPress归档页面模板[WP原生函数篇]

原创作者:zwwooooo

特点:

1. 按照年份、月份显示文章列表

2. 显示每月的文章数量(需要配合及jQuery)

3. 显示每篇文章的评论数

4. 使用 WordPress 原生函数实现数据调用

5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存,只在发表/修改文章时才更新,减少数据库查询。

6. 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。

简单说下步骤,也可以参考前面提及 2012 年的文章。

1. 归档函数

下面代码放到主题文件 functions.php 里面,另外注意代码里面有中文,所以要把 functions.php 文件编码改为 UTF8 无 BOM 格式

/* Archives list v2014 by zwwooooo */
function zww_archives_list() {
	if( !$output = get_option('zww_db_cache_archives_list') ){
		$output = '
全部展开/收缩 (注: 点击月份可以展开

'; $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][] = '
  • '. get_the_time('d日: ') .''. get_the_title() .' ('. get_comments_number('0', '1', '%') .')
  • '; endwhile; wp_reset_postdata(); foreach ($posts_rebuild as $key_y => $y) { $output .= '<h3 class="al_year">'. $key_y .' 年
      '; //输出年份 foreach ($y as $key_m => $m) { $posts = ''; $i = 0; foreach ($m as $p) { ++$i; $posts .= $p; } $output .= '<li><span class="al_mon">'. $key_m .' 月 ( '. $i .' 篇文章 )
        '; //输出月份 $output .= $posts; //输出 posts $output .= '
      '; } $output .= '
    '; } $output .= '
    '; update_option('zww_db_cache_archives_list', $output); } 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,然后在最顶端加入:

    在 archives.php 找到类似 ,在其下面加入如下代码

    然后新建页面(如叫:归档),选择模版为 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 并找到 ,在其下面加上

    因为是放在主题的 the_content() 下面,所以会默认使用主题写好的 h3 ul li 格式,顺便放出套用zww的css:

    /* page:archives */
    #archives {
    	position: relative;
    }
    #archives p {
    	position: absolute;
    	top: -60px;
    	left: 150px;
    }
    #archives h3 {
    	margin-bottom: 0;
    	padding: 0 15px;
    	border-bottom: 1px solid #ddd;
    	font-size: 20px;
    	font-weight: 400;
    	text-align: center;
    	letter-spacing: 5px;
    }
    #archives ul {
    	list-style: none;
    	margin: 0 30px;
    	padding: 10px 0 20px 10px;
    	border-left: 1px solid #ddd;
    	font-size: 12px;
    }
    #archives li {
    	position: relative;
    	line-height: 30px;
    }
    #archives ul ul {
    	margin: -15px 0 0 0;
    	padding: 15px 0 10px 0;
    }
    #archives ul ul li{
    	padding: 0 0 0 15px;
    }
    #archives ul ul li:before{
    	content: "";
    	position: absolute;
    	left: 0;
    	top: 10px;
    	border-top: 5px dashed transparent;
    	border-bottom: 5px dashed transparent;
    	border-left: 10px solid #ddd;
    }
    #al_expand_collapse {
    	display: inline-block;
    	line-height: 24px;
    	padding: 0 10px;
    	color: #fff;
    	font-size: 12px;
    	text-decoration: none;
    	background: linear-gradient(to bottom, #8c9fcc 20%, #49629e 80%) repeat scroll 0 0 transparent;
    	background: -webkit-linear-gradient(to bottom, #8c9fcc 20%, #49629e 80%) repeat scroll 0 0 transparent;
    }
    #al_expand_collapse:hover {
    	background: linear-gradient(to bottom, #49629e 20%, #8c9fcc 80%) repeat scroll 0 0 transparent;
    	background: -webkit-linear-gradient(to bottom, #49629e 20%, #8c9fcc 80%) repeat scroll 0 0 transparent;
    }
    #archives em {
    	padding-left: 5px;
    	font-size: 12px;
    	color: #777;
    }
    #archives .al_mon {
    	padding-left: 5px;
    	font-size: 14px;
    	font-weight: 700;
    }
    #archives .al_mon:after {
    	content: "";
    	position: absolute;
    	left: -10px;
    	top: 15px;
    	width: 10px;
    	height: 1px;
    	background: #ddd;
    }
    #archives .al_mon em {
    	font-size: 12px;
    	font-weight: 400;
    }

    Leave a Reply

    Your email address will not be published. Required fields are marked *