首页 » 开源/框架 » WordPress » 正文

非插件为WordPress实现分页Ajax无限加载功能

| WordPress | 53 条评论 | (18评) |

今天在Github上找东西的时候发现了一个叫做 Infinite AJAX Scroll 的项目，看到它通过很简单的设置，就可以让Wordpress支持分页Ajax无线加载功能。测试了下非常好用，现在分享给大家~

下面以Wordpress自带主题 Twenty Twelve 主题为例：

1) 下载 jquery-ias.min.js。

2) 把 jquery-ias.min.js 拷贝到 wp-content/themes/twentytwelve/js 文件夹下。

3) 在编辑器中打开 wp-content/themes/twentytwelve/header.php。

4) 为主题添加 jQuery。把下面的代码粘贴到 </head> 之前（如果主题已引入jQuery，可跳过此步）：

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>

5) 把下面的代码放在上一步引入的 jQuery 之后， </head> 之前：

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

6) 最后，把下面的代码贴在 </head> 之前（有些属性需要改为你主题中的）：

<script type="text/javascript">
var ias = $.ias({
    container: "#content", //包含所有文章的元素
    item: ".post", //文章元素
    pagination: ".navigation", //分页元素
    next: ".nav-previous a", //下一页元素
});

ias.extension(new IASTriggerExtension({
    text: 'Load more items', //此选项为需要点击时的文字
    offset: 2, //设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载
}));
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({
    text: 'You reached the end.', // 加载完成时的提示
}));
</script>

如果主题启用了Lazyload插件，在第二页开始之后的页面图片会加载不出来，需要加入下面的代码才行：

ias.on('rendered', function(items) {
    $("img.lazy").lazyload({effect:"fadeIn"}); //这里是你调用Lazyload的代码
})

Done!

效果测试

本文共 53 个回复

  • 大雄 2016/03/09 08:41

    如果模板有文章形式分类的话不知道能不能加载形式分类的样式，找了很久了都没有找到方法。我博客199508.com你瞧瞧。

    回复

    • Specs 2016/03/09 11:10

      @ 大雄 你这不是已经有无限加载了吗~ 用我这个方法的话就跟你分页时候点下一页一样，会把下一页列表的样式输出出来

      回复

      • 大雄 2016/03/09 15:39

        @ Specs 嗯嗯，只是我这边有点小bug就是加载出来之后的文章样式是默认的，我这边有自定义状态的样式的，但是加载的时候就只加载默认的样式，就是不知道你这个方法能不能解决我这个bug，我到时候弄弄看。

        回复

        • Specs 2016/03/09 15:42

          @ 大雄 应该是可以的

          回复

          • 大雄 2016/03/10 10:55

            @ Specs pagination: ".navigation", //分页元素

            回复

          • 大雄 2016/03/10 10:55

            @ Specs pagination: ".navigation", //分页元素这个如果是我的博客的话应该填写什么，剩一条按错了所以提交了~我在尝试用你的这个办法来替换我的那个的bug~然后就是卡在这里不知道填什么了。

            回复

    • 尹先生 2016/08/07 10:33

      @ 大雄 哈哈哈~世界太小了，我也在研究这个功能

      回复

  • 王大锤 2016/04/15 11:44

    移动端好像没用了 有什么解决办法吗 急急急！

    回复

  • 小鹏 2016/09/24 00:15

    Load More只有在scroll以后才会出现，点击后，第二页的文章和第一页的文章在同一个位置，第三页 第四页都没有问题，向下加载，大概是什么回事

    回复

  • Lebow 2016/12/14 11:59

    这个请求下一页的时候会把样式和页面的所有内容都加载进来大大降低了网站的速度得不偿失，怎么样只去加载内容呢

    回复

  • bautt 2017/05/10 11:16

    这个不用修改fuction吗？

    回复

    • Specs 2017/05/17 07:56

      @ bautt 根据你主题分页那里的结构调整下就行了，不用改 functions.php

      回复

  • bautt 2017/05/10 13:16

    需要在 function中加入如下代码：if ( ! function_exists( 'twentytwelve_content_nav' ) ) :/** * Displays navigation to next/previous pages when applicable. * * @since Twenty Twelve 1.0 */function twentytwelve_content_nav( $html_id ) { global $wp_query; if ( $wp_query->max_num_pages > 1 ) : ?> <nav id="" class="navigation" role="navigation"> <?php next_posts_link( __( '← Older posts', 'twentytwelve' ) ); ?> <?php previous_posts_link( __( 'Newer posts →', 'twentytwelve' ) ); ?> <?php endif;}endif;

    回复

  • 北巷季博客 2017/06/30 18:23

    像我这个主题，它本身没有任何的AJAX，我也是小白，请问我目前这个播放器 我想做到 点网站所有的分类或是页面都对播放器无刷新的效果呢

    回复

  • ppp 2017/10/16 16:16

    上拉刷新在断网恢复后一直停留在正在加载中，求帮助

    回复

  • 花差花差 2017/11/28 10:07

    博主，这个需要引用jquery-ias.min.js么，我打开，里面的代码全是白色的，不知道有没有效果，还有那个JS代码，我可以复制到footer么。是一定要在header么，我复制到footer后没有效果

    回复

  • 花开花落 2020/07/27 16:25

    大佬，我自己开发主题想弄瀑布流，看了很多主题的方法，dux，tob以及国外的主题，就是搞不出来，要么能加载，页面错乱，要么布局可以，不会下滑加载数据，你这个方法也测试了，不行哇！主循环： <a href="" > <img src=""> 当前列表为空，尚未发布！

    回复

    • Specs 2020/09/07 14:01

      @ 花开花落 相应的元素属性需要改为自己代码里设置的

      回复

12

发表评论

友情链接