ajax无刷新手动加载分页文章

    前面介绍过通过jquery插件infinite scroll实现滚动自动无限分页,在用户体验上有个很大的弊端,如果网站文章很多,访客要到达页面底部则比较困难。那么对于想避免这种情况的站长,可以使用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>
    

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

    Responses

    您的电子邮箱地址不会被公开。 必填项已用*标注

    Up Next:

    WordPress前端用户中心经常用到的函数

    WordPress前端用户中心经常用到的函数