分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress归档页面更加明确
+

WordPress归档页面更加明确

  • functions.php中的代码
  • 调用代码
  • JS代码
  • WordPress归档页面更加明确-BanYuner

    对于张戈博客的归档页面一直是很喜欢,喜欢这些自定义比较强的页面,所以我就直接从知更鸟的主题中寻找后相关代码,但是寻找的过程中还是出现了一些小插曲,比如修改了页面代码之后,并没有发生变化,后来我了解到是因为页面缓存的问题。

    接着我看到了知更鸟博客中的代码提到了zww.me,那么我就直接去这个博客中寻找了,最终还是寻找到了相关代码并且成功实现相关功能。这里我就简单的将功能的实现方法以及相关代码附上来:

    代码分为三个部分,一个是需要添加到functions.php中去的,还有一个需要添加到你的归档页面中去的。以及一个JS代码下面是第一部分代码:

    functions.php中的代码

    /* 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'); // 新发表文章/修改文章时
    

    清除缓存的方法就是直接通过后台重新编辑这个页面即可,点一下快速编辑,之后点击更新就可以清除缓存了。

    调用代码

    <?php zww_archives_list(); ?>
    

    上面的代码添加到

    <?php content(); ?>

    之后即可

    JS代码

    <script type="text/javascript">
    (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);
    </script>
    

    这段JS代码我是直接添加到归档页面中,大家可以看情况添加。

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    WordPress归档页面更加明确

    支付宝(点击图片切换)

    扫码,支持我

    WordPress归档页面更加明确

    微信(点击图片切换)

    扫码,手机看

    WordPress归档页面更加明确
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress前端配合后台指定分类判断办法

      WordPress前端配合后台指定分类判断办法

      这个标题说实话我真的不知道该怎么说明,但是看完了内容之后可能你就知道我说的是什么意思了。 今天在实现一个功能的时候,遇到了问题,首选描述一下...

      点击查看
    • WordPress站点搜索添加标签过滤功能

      WordPress站点搜索添加标签过滤功能

      很久之前我已经给我的站点搜索添加了分类搜索,也就是搜索的时候可以指定分类来增强搜索的精准性,那么今天介绍的同样是利用标签来精准进行搜索,具体...

      点击查看
    • the_permalink() 和 get_permalink() 之间的差别

      the_permalink() 和 get_permalink() 之间的差别

      今天突然发现自己站点的相关文章功能并不能生效了,推荐的三篇文章的地址都是同一个地址,我当时表示很诧异,不知道什么时候开始,整个主题都有点不正...

      点击查看
    • 帅气小琦琦
    • 云泽
    • 楚书业
    WordPress归档页面更加明确
    3 + 7 =
    • 昵称 (必填)  
    • 邮箱 (必填)
    • 网址 (选填)
    1. 2楼
      云泽
      老哥,请问,你博客中的上一篇下一篇文章,是怎么实现的呀!
      云泽 1周前 (03-19)回复
      • 帅气小琦琦
        @云泽 这个其实就是常规的上一篇下一篇,只不过添加了部分CSS效果而已,你可以右键查看属性就知道了
        帅气小琦琦    1周前 (03-19)回复
    2. 1楼
      楚书业
      归档页文章列表折叠的?
      楚书业 1年前 (2016-04-01)回复