WordPress 瀑布流无限 Ajax 加载主题的开发方法

WordPress瀑布流无限加载

作为一种另类的分页方法，在某些布局的网站上，可以加快内容加载速度，提升用户体验。瀑布流无限加载主题的开发方法非常简单，只需要在现有的主题上引入一个jQuery插件，增加几行代码就可以实现无限加载了。

首先引入jQueryInfiniteAjaxLoader插件

因为我们只在某些页面实现瀑布流无限加载，所以只需要在相应的页面引入这个jQuery插件就可以了。这样可以避免在不必要的页面引入这个插件对性能造成的影响。InfiniteAjaxLoader是一个商业插件，但是对个人和非商业使用是免费的。这里使用的JS引入方式是直接写到模板文件中的，如果你需要分享自己所开发的主题，建议通过WordPress标准的前端资源加载方式，通过WordPress的模板判断标签，也可以实现一样的效果。

<script type="text/javascript" src="/js/jquery-ias.min.js"></script>

配置InfiniteAjaxLoader插件实现无限加载

InfiniteAjaxLoader插件的作用就是把普通的分页Ajax化了，所以要使用这个插件，前提是原来的页面必须要有分页功能。如果没有，可以安装一个WordPress分页插件先把分页功能加上。如果已经有了分页功能，把下面的代码直接放到页面底部，</body>标签之前就可以了。下面代码中的各种参数需要和当前使用主题的HTML标签匹配一下。

jQuery(document).ready(function($){
    var ias = jQuery.ias({
        container: '#cases',
        item: '.case-item',
        pagination: '.pagination',
        next: '.nextpostslink'
    });

    //添加加载中图片
    ias.extension(new IASSpinnerExtension());

    //自动加载3次之后，显示加载更多的按钮手动加载下一页
    ias.extension(new IASTriggerExtension({
        offset: 3,
        text: '加载更多'
    }));

    //加载完成后，显示没有更多了
    ias.extension(new IASNoneLeftExtension({text:"暂时没有更多了"}));
});

如果一切OK,上面代码实现的效果是，隐藏默认的分页功能，页面下拉时，自动加载第二页，加载了3页之后，显示一个“加载更多”的按钮，所有页面加载完成之后，显示“暂时没有更多了”提示信息。默认情况下，这些信息是以链接和文字的方式显示的，可以根据你当前使用的主题调整一下样式。

如果页面使用了Masonry布局，我们还需要结合一下Masonry和Imageloaded插件来调整一下无限加载的效果，具体使用方法可以参考官方文档，在这里就不多说了。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。