xiu主题是自带这个功能的,可以设置自动加载还是手动加载,今天陌小雨教大家如何添加这个掉渣天的功能:WordPress实现手动点击ajax无刷新加载分页文章。
方法是:
1、下载infinite scroll插件:下载地址
2、把jquery.infinitescroll.js文件和behaviors/manual-trigger.js文件复制到自己主题的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、修改主题的html结构,以上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>
这个结构需与第三步中的一一对应。
注意:操作成功与否,最重要的是下一页的样式名称和链接是否正确!





