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

前言:

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

如果网站的内容非常多,一直自动加载下一页可能会使某些用户感到迷惑,需要查看网站底部信息的时候,也会非常不方便。这时候我们需要在加载了若干个页面之后,改变加载方式为手动加载。

首先引入 jQuery Infinite Ajax Loader 插件

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

  1. <script type=“text/javascript” src=“/js/jquery-ias.min.js”></script>

配置 Infinite Ajax Loader 插件实现无限加载

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

  1. jQuery(document).ready(function ($) {
  2.  var ias = jQuery.ias({
  3.      container: ‘#cases’,
  4.      item: ‘.case-item’,
  5.      pagination: ‘.pagination’,
  6.      next: ‘.nextpostslink’
  7.  });
  8.  // 添加加载中图片
  9.  ias.extension(new IASSpinnerExtension());
  10.  // 自动加载3次之后,显示加载更多的按钮手动加载下一页
  11.  ias.extension(new IASTriggerExtension({
  12.      offset: 3,
  13.      text: ‘加载更多’
  14.  }));
  15.  // 加载完成后,显示没有更多了
  16.  ias.extension(new IASNoneLeftExtension({text: “暂时没有更多了”}));
  17. });

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

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

写在后面:

瀑布流是一个很受欢迎的展示模式,不过也因人而异吧,有些站点比如图片类为主的站点,就比较适合瀑布流。

本文参考于 https://www.wpzhiku.com/wordpress-infinite-ajax-loader-theme/  ,若有任何来源问题,请联系QQ:1516677079 及时更正。

最有意思的设计站点


最好的UI素材库

我们极力推荐: