A-A+

如何实现动态加载实现WordPress不跳转分页效果

2015年01月25日 wordpress 暂无评论 阅读 1,064 次

你是否见过网站的瀑布流布局方式,在很多图片网站的布局就是这样的,比如:我们常刷的微博等。他们实现的加载方式都是随着你的滚动条滚动进行动态加载的。这样的好处是:你不必点击“下一页”去实现页面的跳转来达到翻页的效果,给你的浏览带来了极大的便捷。WordPress插件Infinite Scroll就是一个很棒的插件。

Infinite Scroll插件如何使用呢?

登录wordpress网站后台,在“插件”中搜索“Infinite Scroll”,然后点击安装即可。安装好的Infinite Scroll插件我们需要对它做相应的设置才能真正起到作用。先来看看Infinite Scroll的几个主要选项:

infinite-scroll

  • Content Selector:循环日志文章的外层容器,通常就是日志CLASS为.post的外层DIV,通常主题为#content
  • Navigation Selector:分页导航的容器ID名,通常为#nav-below
  • Next Selector:链接到下一个页面的内容
  • Item Selector:每篇日志的通用Class

如果你的 WordPress 主题是自己编写开发的,那么上面这四个选项将保障 Infinite-Scroll插件正常运行。尤其“页面分页导航”这里,如果你的wordpress主题安装并启用了 WP-PageNavi 分页插件,那么一定要停止它,使用官方的导航方式。

不用安装插件实现 Infinite-Scroll 功能

1、我们需要在页面中加载 jquery.infinitescroll.min.js 文件,如果这个链接已经失效,你也可以点这里下载

2、挑一张ajax loader图片作为loading时显示的图片,放到主题的images目录下。

3、注册并加载infinite scroll所需要的脚本,将下面代码放在主题的functions.php中:

下面的代码中,你需要对 img、nextSelector、navSelector、itemSelector、contentSelector 几个字段进行设置,如本文之前的选项介绍。

在最后,如果你对 Infinite Scroll 自带的 loading 图片(ajax-loader.gif)不满意的话,你可以在 preloaders.net 这个网站上自定义生成一个合适的图片来防置到你的网站上。

标签:
Copyright © 互联网世界 保留所有权利.   Powered by www.zhangjinpeng.com.cn 网站地图   粤ICP备13066957号-2  
内容说明:本站内容及数据部分来自互联网及公开渠道,如有侵权请及时联系我们,本站将在第一时间删除相关资源。

用户登录

分享到: