WordPress实现分页Ajax无限加载功能:jquery.ias.js

前言

今天在为自己模版添加上ajax无限加载功能，在谷歌和github找了好一阵子，才找到合适的ajax翻页功能。

Infinite AJAX Scroll通过很简单的设置，就可以让Wordpress支持分页Ajax无线加载功能。

教程

下面以Wordpress本博客主题 JaneCC-Silver 主题为例：

下载 jquery.ias.min.js
把  jquery.ias.min.js  拷贝到  wp-content/themes/Silver/js  文件夹下
在编辑器中打开  wp-content/themes/Silver/header.php
为主题添加 jQuery。把下面的代码粘贴到 之前（如果主题已引入jQuery，可跳过此步）：

<script type="text/javascript" src="http://libs.baidu.com/jquery/1 ... gt%3B

把下面的代码放在上一步引入的 jQuery 之后， 之前：

dd<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.ias.min.js" type="text/javascript"></script>

最后，把下面的代码贴在 之前（有些属性需要改为你主题中的）：

var ias = $.ias({

    container: ".content", //包含所有文章的元素

    item: ".article", //文章元素

    pagination: ".page_navi", //分页元素

    next: ".page_navi a:eq(-2)", //下一页元素

});



ias.extension(new IASTriggerExtension({

    text: 'Load more items', //此选项为需要点击时的文字

    offset: 2, //设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载

}));

ias.extension(new IASSpinnerExtension());

ias.extension(new IASNoneLeftExtension({

    text: 'You reached the end.', // 加载完成时的提示

}));

PS：

如果主题启用了Lazyload插件，在第二页开始之后的页面图片会加载不出来，需要加入下面的代码才行：

ias.on('rendered', function(items) {

    $("img.lazy").lazyload({effect:"fadeIn"}); //这里是你调用Lazyload的代码

})