Blog

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

月更成就 Get…… 开博到现在算是最长的一次更新间隔了,人一忙就没时间去折腾,没去折腾就没什么可写,吃喝拉撒的事没习惯写,所以这次终于破纪录了。

这两天稍微空闲点,看到博客草已人高,所以就找找以前有没有没解决的来访朋友评论提到的问题。然后想起我 2012 年写的《代码实现WordPress归档页面模板[WP原生函数篇]》,按照这篇文档折腾的朋友大部分都成功了,但是总是有部分朋友说出现文章排列不对或者文章不全什么的,因为觉得大部分朋友都能成功,所以就一直没去分析。

今天分析了一下,应该是有些月份如果 0 篇文章就会出现问题,这是判断代码没写好的原因,于是自己想了一下,就重写了一个。现已应用到我博客的存档页面:http://zww.me/archives,截个图吧

141028-archives-page-template-2014

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

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);
	}
	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: 因为查询度有点大,所以有加数据库缓存,只在文章发表/修改时才会更新缓存数据,所以测试时,可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据。

2016.12.07 新增“年份后面显示此年份文章数”版本:

/* 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' => array('archives', 'post', 'zsay'),
			'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) {
			$y_i = 0; $y_output = '';
			foreach ($y as $key_m => $m) {
				$posts = ''; $i = 0;
				foreach ($m as $p) {
					++$i; ++$y_i;
					$posts .= $p;
				}
				$y_output .= '<li><span class="al_mon">'. $key_m .' 月 <em>( '. $i .' 篇文章 )</em></span><ul class="al_post_list">'; //输出月份
				$y_output .= $posts; //输出 posts
				$y_output .= '</ul></li>';
			}
			$output .= '<h3 class="al_year">'. $key_y .' 年 <em>( '. $y_i .' 篇文章 )</em></h3><ul class="al_mon_list">'; //输出年份
			$output .= $y_output;
			$output .= '</ul>';
		}

		$output .= '</div>';
		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'); // 新发表文章/修改文章时

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 了


发现自己好久没玩 PC 游戏了,机器配置是个问题,空闲时间不多也是个问题,新游戏要花很多时间研究也是个问题,突然感觉学生时代多好啊……

zww
or
oooo

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/wordpress-archive-page-template-wp-primary-function-2014-edition.z-turn

90 comments

  1. 大肥羊 大肥羊 Firefox 32 Firefox 32 Windows 7 Windows 7

    :mrgreen: 已修改成功。

    沙发
  2. Angely Angely Firefox 32 Firefox 32 Windows 8.1 Windows 8.1

    这个效果好,比默认好看多了。

    板凳
  3. 不亦乐乎 不亦乐乎 Google Chrome 36 Google Chrome 36 Windows XP Windows XP

    板凳!!

    地板
  4. ......
  5. 爱偷笑 爱偷笑 QQbrowser 8 QQbrowser 8 Windows 7 Windows 7

    真的很不错 :lol:

    21楼
  6. 咚门 咚门 Google Chrome 38 Google Chrome 38 Windows 8.1 Windows 8.1

    我后来一直用的牧风那篇文章的教程,觉得挺好的。也是在那之后才慢慢了解wp的函数的。

    22楼
  7. kn007 kn007 Google Chrome 38 Google Chrome 38 Windows 7 Windows 7

    许久没来,过来转悠

    23楼
  8. Demon Demon Google Chrome 39 Google Chrome 39 Windows 8.1 Windows 8.1

    估计博主要不了多久就会换主题了

    24楼
  9. 胡倡萌 胡倡萌 Google Chrome 39 Google Chrome 39 Windows 8.1 Windows 8.1

    建议采用钩子挂载外部js和css文件,然后将函数封装为简码,只需要直接上传js 和css文件,添加函数到 functions.php ,然后创建页面添加简码即可。或者干脆弄个插件吧,对小白用户会更方便啦

    25楼
  10. 香港云主机 香港云主机 Google Chrome 36 Google Chrome 36 Windows 7 Windows 7

    你好!我这里有个独立ip主机3.8折的广告图推荐给你如何?如果可以的话,请加我QQ:2116461930

    26楼
  11. 爱浮夸 爱浮夸 Google Chrome 38 Google Chrome 38 Windows 7 Windows 7

    东西很不错。

    27楼
  12. 百家网络博客 百家网络博客 Google Chrome 30 Google Chrome 30 Windows 7 Windows 7

    要是能分页就好了

    28楼
  13. 2014hosts 2014hosts Google Chrome 39 Google Chrome 39 Windows 7 Windows 7

    感谢博主分享

    29楼
  14. 懿古今 懿古今 Google Chrome 31 Google Chrome 31 Windows XP Windows XP

    这个归档样式挺不错的,有空我也试用看看

    30楼
  15. 懒人梦醒 懒人梦醒 uBrowser 4 uBrowser 4 Windows 7 Windows 7

    Hello,首先我得说下不好意思,因为样式很漂亮,我也是完全照搬了。
    :grin:

    31楼
  16. geekv geekv Google Chrome 31 Google Chrome 31 Windows 8.1 Windows 8.1

    博主好,生成内容部分如何调用自定义字段呢?我用'. get_post_meta($post->ID, 'version_zdbj', true) .'无法获取到。

    32楼
    • geekv geekv Google Chrome 31 Google Chrome 31 Windows 8.1 Windows 8.1

      @geekv
      可以获取到了,但是只能在while部分获取到,怎么在foreach循环里无法获取到

    • zwwooooo zwwooooo Firefox 35 Firefox 35 Windows 8.1 Windows 8.1

      @geekv
      foreach 要注意参数

  17. whuted whuted Google Chrome 37 Google Chrome 37 Windows 8.1 Windows 8.1

    已经用上了,美观度还不错,只是顶部的“全部展开/收缩 (注: 点击月份可以展开)”不能使用,而且点击月份没有反应。

    33楼
  18. 草根成春 草根成春 Google Chrome 31 Google Chrome 31 Windows 7 Windows 7

    很好的归档页面,谢谢分享!

    34楼
  19. 百赖小生 百赖小生 Google Chrome 17 Google Chrome 17 Windows Server 2003 Windows Server 2003

    学习下!

    35楼
  20. 余人陶艺 余人陶艺 Google Chrome 38 Google Chrome 38 Windows 7 Windows 7

    好复杂呀

    36楼
  21. 求助 求助 Google Chrome 38 Google Chrome 38 Windows 7 Windows 7

    哥们,我几年前用的你的相关文章,现在还在用,
    我现在手机端的用这个存档无法显示“展开或全部显示”
    若有时间希望帮我看看
    http://yilingyan.com/archive
    :oops: :oops: :oops:

    37楼
    • zwwooooo zwwooooo Firefox 40 Firefox 40 Windows 10 Windows 10

      @求助
      简单在chrome虚拟的手机环境下看,没问题,你说的手机是什么浏览器啊,chrome应该没问题,其他国产或者阉割或者某app内置无法保证。

    • 感谢博主 感谢博主 WebView 4 WebView 4 Android 4.4.4 Android 4.4.4

      @zwwooooo

      zwwooooo:
      简单在chrome虚拟的手机环境下看,没问题,你说的手机是什么浏览器啊,chrome应该没问题,其他国产或者阉割或者某app内置无法保证。

      感谢回复,您是一个热心的博主,如果还有印象星海还记得我去年向您提问相关文章代码的,原因是我用的免费主题却无收费主题的代码,直到现在依旧用的你能当初发给我的,祝您事业顺心,万事如意,这次我用的单独版手机主题也是阉割版本的,我已经解决了,用的是您更新后的代码,js没换还是你最初的,在函数模板却无法用最开始的。再次感谢博主。祝愿中秋快乐!

    • zwwooooo zwwooooo Firefox 40 Firefox 40 Windows 10 Windows 10

      @感谢博主 客气了,也祝你中秋快乐!

  22. 东皇太一 东皇太一 Google Chrome 42 Google Chrome 42 Windows 7 Windows 7

    很赞,刚刚按照教程加了个归档页面 :lol: :lol: :lol:

    38楼
  23. D-Bood D-Bood Google Chrome 54 Google Chrome 54 Windows 10 Windows 10

    太赞了!效果真的不错,真心感谢博主的无私贡献!

    39楼
  24. 金贝贝 金贝贝 Firefox 53 Firefox 53 Windows 7 Windows 7

    逐个下拉的效果有点视觉疲劳。。。。jQ要怎么改下回到瞬间展开/收缩所有的方式?参考2012版的弄了弄不成功

    40楼
    • zwwooooo zwwooooo Firefox 50 Firefox 50 Windows 10 Windows 10

      @金贝贝 你把 animate(0, 'up', 100); 和 animate(0, 'down', 100); 改为 animate(0, 'up', 0); 和 animate(0, 'down', 0); 试试

    • 沙隆巴斯 沙隆巴斯 Firefox 53 Firefox 53 Windows 7 Windows 7

      @zwwooooo 成功没问题,谢谢

    • 沙隆巴斯 沙隆巴斯 Firefox 53 Firefox 53 Windows 7 Windows 7

      @沙隆巴斯 另外又白屏,just now
      恐怕你内心又有一万头... :shock:

    • zwwooooo zwwooooo Firefox 50 Firefox 50 Windows 10 Windows 10

      @沙隆巴斯 白屏原因不明...

    • zwwooooo zwwooooo Firefox 50 Firefox 50 Windows 10 Windows 10

      @沙隆巴斯 已经开了调试模式,如果你又遇到白屏、错误页,请把显示的错误发给我,麻烦你发邮件哦(邮箱地址在侧边栏头像那里),别在评论里面贴出来哦,哈 :mrgreen:

Leave a Reply