首页 Wordpress WordPress 利用infinite-ajax-scroll无限分页

WordPress 利用infinite-ajax-scroll无限分页

GavinWu 2022年03月25日 8:03 Wordpress 145 Views

之前写过一篇《为WordPress主题添加”点击加载更多文章”分页功能》的文章,今天再分享一个类似的方法。

下载jquery-ias.min文件到主题文件夹

在主题加载jquery-ias.min文件

可以在header.php里加载,也可以动态加载。WordPress 加载Javascript和CSS的方法

1
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-ias.min.js" type="text/javascript"></script>

在header.php里设置分页,要根据需要修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <script type="text/javascript">
var ias = $.ias({
    container: ".posts-loop", //包含所有文章的元素
    item: ".post-list", //文章元素
    pagination: ".post-read-more", //分页元素
    next: ".post-read-more a", //下一页元素
});
ias.extension(new IASTriggerExtension({
    text: '加载更多+', //此选项为需要点击时的文字
    offset: 1, //设置此项后,到 offset+1 页之后需要手动点击才能加载,取消此项则一直为无限加载
}));
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({
    text: '所有文章加载完毕.', // 加载完成时的提示
}));
</script>

修改替换分页代码

1
2
3
<div class="post-read-more">
<?php next_posts_link('加载更多文章',''); if($next_page) echo $next_page;?>
</div>

相关文章

七牛

发表评论

QR Code

本页二维码