非wordpress插件实现滚动自动无限分页
作者：xlnxin发布时间：2021-04-15分类：WordPress教程浏览：521
导读：前面介绍过的wordpress滚动自动加载分页数据插件InfiniteScroll，该WP插件是把jQuery插件jquery.infinitescroll.js制作成...
前面介绍过的wordpress滚动自动加载分页数据插件Infinite Scroll，该WP插件是把jQuery插件jquery.infinitescroll.js制作成wordpress插件，而且现在介绍的是直接把jquery.infinitescroll.js集成到主题中，减少wordpress插件的使用。
实现步骤：
1、下载jQuery插件jquery.infinitescroll.js，解压后，把根目录的jquery.infinitescroll.min.js文件上传至当前主题的js文件夹；
2、下载动态图片（把鼠标移动图片上，右击，图片另存为），把该图片上传至当前主题的images文件夹；
3、分页代码：该方法只对wordpress默认“上一页、下一页”链接生效
1 2 3 4 | <div class="pagenavi"> <?php next_posts_link('下一页 » ') ?> <?php previous_posts_link('« 上一页') ?> </div> |
4、在当前主题的functions.php文件中，添加以下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /*
加载infinite scroll插件脚本
*/
function infinitescroll_js() {
wp_register_script('infinite_scroll', get_stylesheet_directory_uri() . '/js/jquery.infinitescroll.min.js', array('jquery'), null, true);
if (!is_singular()) {
wp_enqueue_script('infinite_scroll');
}
}
add_action('wp_enqueue_scripts', 'infinitescroll_js');
/*
初始化infinite scroll插件配置参数
*/
function infinite_scroll_js() {
if (!is_singular() ) {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "加载中...",
finishedMsg: "已加载所有产品..."
},
nextSelector:".pagenavi a",
navSelector:".pagenavi",
itemSelector:".post",
contentSelector:".main",
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
});
</script>
<?php
}
}
add_action('wp_footer', 'infinite_scroll_js', 100); |
参数说明：
img: 等待加载时显示的动态图片URL路径
nextSelector: 下一页（Previous Post）链接CSS样式名称 + a标签（类选择器或ID选择器）
navSelector: 包含上一页/下一页链接的样式名称（类选择器或ID选择器）
itemSelector: 包含每篇文章内容的样式名称（类选择器或ID选择器）
contentSelector: 包含所有文章的样式名称（类选择器或ID选择器）
提醒：如果按上面方法没有生效，请检查样式是否选择错。
5、CSS样式代码：（把下面的CSS代码添加到当前主题的样式文件中，一般是style.css，可根据自己的喜欢修改对应代码）
1 2 3 | .pagenavi,#infscr-loading {text-align:center; font-size:0.75em;} .pagenavi a {padding:6px 12px; background:#F04848; color:#fff; border:1px solid #dedede; border-right:none; overflow:hidden;} #infscr-loading img {display:block; margin:0 auto; text-align:center;} |
- WordPress教程排行
- 最近发表