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

WordPress教程 3894

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

操作方法：

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<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结构（参考）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<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>

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

精品推荐：