关于wordpress分页无限加载

现在越来越多的网站都添加了无限加载的功能了，像大多数的瀑布流主题，微博的自动加载等等，这样方便了用户浏览，一定程度上提高了用户体验。

以前一直以为实现这个很是麻烦，什么ajax加载什么，搞得头大大的，最后发现有某位大神开发的一个js插件很轻松的就解决了这个问题。

下面就介绍下使用方法吧。

首先引用jq库（这里用的是微软的jq库，至于为什么，不解释了...）

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>  

然后加载js文件

<script type="text/javascript" src="https://raw.github.com/paulirish/infinite-scroll/master/jquery.infinitescroll.min.js"></script>

PS：貌似要下载到本地才能用，直接用上面调用老是失败，我也不知道为什么，可能是https的原因

最后是js内容

假如你站点的主题结构如下

<div id="huilang">  
    <div class="post">这里每篇文章的内容</div>  
    <div class="post">这里每篇文章的内容</div>  
</div>  
<div id="nav">  
    <div class="next">  
        <a href="https://huilang.me/page/2/">下一页</a>  
    </div>  
</div>

那js就按照下面格式加载

<script type="text/javascript">  
jQuery(document).ready(function(){  
/** 
* Customize the previous navitation menu 
*/  
var infinite_scroll = {  
loading: {  
img: "<?php echo get_stylesheet_directory_uri(); ?>/img/ajax-loader",//正在载入中图片显示  
msgText: "正在努力加载中",  
finishedMsg: "文章加载完毕"  
},  
nextSelector:"#nav .next a",//下一页链接地址  
navSelector:"#nav",//包括上下翻页的div结构  
itemSelector:"#huilang .post",//包含每篇文章的div结构  
contentSelector:"#huilang"//包含所有文章的div结构  
};  
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );  
});  
</script>  

如果不需要滚动到底部自动加载时是希望点击然后加载后续内容，则先加载infinitescroll下面文件夹behaviors的两个js，然后用下面的js替换前面的js内容

<script>  
  jQuery(document).ready(function(){  
      /** 
       * Customize the previous navitation menu 
       */  
     jQuery('#nav-below .nav-previous a').text('<?php _e('Load More...', 'tt_child'); ?>');  
      var infinite_scroll = {  
          loading: {  
              img: "<?php echo get_stylesheet_directory_uri(); ?>/img/ajax-loader.gif",  
              msgText: "<?php _e('Loading the next set of posts...', 'tt_child'); ?>",  
              finishedMsg: "<?php _e('All posts loaded.', 'tt_child'); ?>"  
          },  
          behavior: 'twitter',  
          nextSelector:'#nav .next a',  
          navSelector:"#nav .next",  
          itemSelector:"#huilang .post",  
          contentSelector:"#huilang"  
      };  
      jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(){  
          jQuery('.click_more').insertAfter('.post_list .post:last');  
      });  
  });  
  </script>  

并添加一句css，才不会使其自动隐藏

#nav{display:block!important;}  

按照自己站点的div结构进行修改吧。

本站的js配置如下

//自动加载  
  jQuery(document).ready(function(){  
  /** 
  * Customize the previous navitation menu 
  */  
  var infinite_scroll = {  
  loading: {  
  img: "/wp-content/themes/Huilang_line/img/ajax-loader.gif",//正在载入中图片显示  
  msgText: "正在努力加载中",  
  finishedMsg: "文章加载完毕"  
  },  
  nextSelector:".indexbody nav a",//下一页链接地址  
  navSelector:".indexbody nav",//包括上下翻页的div结构  
  itemSelector:"section.indexbody article",//包含每篇文章的div结构  
  contentSelector:"section.indexbody"//包含所有文章的div结构  
  };  
  jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );  
  });  

折腾吧，骚年。