wordpress利用jquery插件infinite scroll实现ajax无刷新手动加载分页文章

本站前面介绍过《wordpress非插件实现滚动自动无限分页》,在用户体验上有个很大的弊端,如果网站文章很多,访客要到达页面底部则比较困难。那么对于想避免这种情况的站长,可以使用infinite scroll插件手动加载的模式,即是当用户点击“查看更多”按钮时,ajax无刷新加载下一页文章列表。

操作方法:

1、下载infinite scroll插件:点击下载

2、把jquery.infinitescroll.js文件和behaviors/manual-trigger.js文件复制到自己主题的根目录

3、在主题的header.php文件</head>之前添加引用代码(前提是已经引入了jquery库文件):

<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/jquery.infinitescroll.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url');?>/js/manual-trigger.js"></script> <script type="text/javascript"> $(document).ready(function(){  var infinite_scroll = {   loading: {    msgText: '',    finishedMsg: '<div class="pagenavi"><a rel="next" href="javascript:void(0);">所有文章均已加载完成</a></div>' //加载到最后一页的提示文字   },   behavior: 'twitter',   nextSelector:".pagenavi a",//分页的a标签   navSelector:".pagenavi",//分页的样式名称   itemSelector:".post", //每篇文章的样式名称   contentSelector:"#section" //列表的样式名称或ID名称  };  $( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(){   $('.pagenavi').insertAfter('#section'); //加载下一页后,分页条显示的位置  });  $( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll ); }); </script>

4、以上js对应的html结构(参考):

<div id="section">  <div class="post">   单独一篇文章  </div>  <div class="post">   单独一篇文章  </div>  <div class="post">   单独一篇文章  </div>  <div class="post">   单独一篇文章  </div>  </div> <div class="pagenavi">  <a href="#">查看更多</a> </div>

注意:操作成功与否,最重要的是下一页的样式名称和链接是否正确!

wordpress利用jquery插件infinite scroll实现ajax无刷新手动加载分页文章:等您坐沙发呢!

发表评论

表情
还能输入210个字