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

WordPress 瀑布流无限加载作为一种另类的分页方法，在某些布局的网站上，可以加快内容加载速度，提升用户体验。瀑布流无限加载主题的开发方法非常简单，只需要在现有的主题上引入一个 jQuery 插件，增加几行代码就可以实现无限加载了。
如果网站的内容非常多，一直自动加载下一页可能会使某些用户感到迷惑，需要查看网站底部信息的时候，也会非常不方便。这时候我们需要在加载了若干个页面之后，改变加载方式为手动加载。
首先引入 jQuery Infinite Ajax Loader 插件
因为我们只在某些页面实现瀑布流无限加载，所以只需要在相应的页面引入这个 jQuery 插件就可以了。这样可以避免在不必要的页面引入这个插件对性能造成的影响。Infinite Ajax Loader 是一个商业插件，但是对个人和非商业使用是免费的。这里使用的 JS 引入方式是直接写到模板文件中的，如果你需要分享自己所开发的主题，建议通过 WordPress 标准的前端资源加载方式，通过 WordPress 的模板判断标签，也可以实现一样的效果。

配置 Infinite Ajax Loader 插件实现无限加载
Infinite Ajax Loader 插件的作用就是把普通的分页 Ajax 化了，所以要使用这个插件，前提是原来的页面必须要有分页功能。如果没有，可以安装一个 WordPress 分页插件先把分页功能加上。如果已经有了分页功能，把下面的代码直接放到页面底部，标签之前就可以了。下面代码中的各种参数需要和当前使用主题的 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 和 Image loaded 插件来调整一下无限加载的效果，具体使用方法可以参考官方文档，在这里就不多说了。