前面博客吧介绍过的wordpress滚动自动加载分页数据插件Infinite Scroll,该WP插件是把jQuery插件jquery.infinitescroll.js制作成wordpress插件,而且现在介绍的是直接把jquery.infinitescroll.js集成到主题中,减少wordpress插件的使用。像这样的自动无限翻页一般使用在淘宝客程序,图片类网站。
实现步骤:
1、下载jQuery插件
infinite-scroll-master.zip
,解压后,把根目录的jquery.infinitescroll.min.js文件上传至当前主题的js文件夹;
2、下载动态图片(把鼠标移动图片上,右击,图片另存为),把该图片上传至当前主题的images文件夹;
非wordpress插件实现滚动自动无限分页
3、分页代码:该方法只对wordpress默认“上一页、下一页”链接生效
4、在当前主题的functions.php文件中,添加以下代码:
参数说明:
img: 等待加载时显示的动态图片URL路径
nextSelector: 下一页(Previous Post)链接CSS样式名称 + a标签(类选择器或ID选择器)
navSelector: 包含上一页/下一页链接的样式名称(类选择器或ID选择器)
itemSelector: 包含每篇文章内容的样式名称(类选择器或ID选择器)
contentSelector: 包含所有文章的样式名称(类选择器或ID选择器)
提醒:如果按上面方法没有生效,请检查样式是否选择错。
5、CSS样式代码:(把下面的CSS代码添加到当前主题的样式文件中,一般是style.css,可根据自己的喜欢修改对应代码)