Infinite Scroll是一种动态加载内容的方式,当网页滚动到底部时,自动载入本需要翻页才能看到的内容,在社交应用中很常见,例如新浪微博。

WordPress.com已经支持了这个功能,但自己host的WordPress需要通过插件或代码添加,先介绍一下插件方法。

JetPack

如果你使用Jetpack by WordPress.com插件,那只需要一段简单的代码就可以开启infinite scroll功能,jetpack已经集成了该功能。

Infinite Scroll

直接安装Infinite-Scroll WordPress插件,如果你使用默认主题或一些知名主题,只要开启该插件就可以获得infinite scroll功能。如果是自己写的主题,就需要设置一番,完全不懂HTML的话可能会有些困难,需要设置的内容在第三节中将会提到。

不使用插件

下面介绍的方法来自WordPress Theming

1. 下载infinite scroll的zip压缩包,在根目录下找到jquery.infinitescroll.min.js这个文件,放到主题的js目录下。

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

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

/**
 * Load javascripts used by the theme
 */
function custom_theme_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', 'custom_theme_js');

4. 初始化infinite scroll,这里需要你懂HTML了,这里我们要找一些相关的css selector,才能继续完成代码。

  • img: ajax loader gif图片的url
  • nextSelector: 能够选中下一页(Previous Post)链接元素的css selector
  • navSelector: 包含上一页/下一页链接的元素的css selector
  • itemSelector: 包含每篇post内容的元素的css selector
  • contentSelector: 包含所有文章的container元素的css selector
/**
 * Infinite Scroll
 */
function custom_infinite_scroll_js() {
    if (!is_singular() ) {
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function(){
            /**
             * Customize the previous navitation menu
             */          
            var infinite_scroll = {
                loading: {
                    img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
                    msgText: "<?php _e('Loading the next set of posts...', 'tt_child'); ?>",
                    finishedMsg: "<?php _e('All posts loaded.', 'tt_child'); ?>"
                },
                nextSelector:"#nav-below .nav-previous a",
                navSelector:"#nav-below",
                itemSelector:"article",
                contentSelector:"#content"
            };
            jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
        });
        </script>
        <?php
    }
}

add_action('wp_footer', 'custom_infinite_scroll_js', 100);

如果使用Infinite Scroll插件时总是出错,多半是这几个selector没找对,只有找对这些class才能让代码工作。

注意:上述代码使用get_stylesheet_directory_uri获取路径,如果你需要的资源在parent theme中,请替换成get_template_directory_uri。

现在一切都准备好了,到前台刷新一下页面,滚动页面,当滚动到底部时,应该会自动加载更多文章,加载文章的数量取决于后台设置->阅读中的“博客页面至多显示”选项的值。

下载源代码

这是一个带有infinite scroll功能的twentytwelve child theme,有需要的朋友请下载。

Infinite Scroll事例主题(Twentytwelve Child Theme) 已下载 1256 次

40条留言

  1. 博主问一下,不知道为什么我的网站会屏蔽掉?paged=2?这种参数 我的网站翻页是xxx.com/?paged=2?#posts_holder这样 但是浏览器只显示xxx.com/#posts_holder 从而只会跳转到首页。 固定连接 插件 .htaccess都修改过也没用 主题也换过

  2. 使用Masnory瀑布流主题,可以加载,在加载出来的新内容块和上面的内容块有重叠现象,请问是什么原因?

    1. 是不是container div的样式有问题?这个得具体看才知道

      1. 谢谢,已解决,回调的问题。

  3. HI Sola,
    我是自己写的主题,用isotope和infinitescroll.min.js这2个插件来实现瀑布流自动加载,现在的问题是分页内容始终加载不出来,下面是我使用的2个文件
    page_editorial.php:http://pan.baidu.com/s/1kTvAVif
    functions.php:http://pan.baidu.com/s/1bnrh6ij
    wordpress后台新建了一个页面,选择的是page_editorial.php这个模版,调用的内容也都是属于默认分类id为3的分类文章,网上找了些资料,研究了一番,还是没搞定,请教了

    1. 哈哈,找到原因了,搞定了,当作骚扰了啊,微笑

  4. 请教个WP的模板修改问题
    如果用Infinite Scroll做滚动无限加载,一直加载~会让感到很恐怖~一直加载不完~
    http://www.hao123.com/gaoxiao/~
    请问如果要做这种分页效果,要怎么处理~
    滚动加载,加载到设置好的数量就不加载了,出现分页按钮按。

  5. ie7-ie8下面不行啊

  6. 有没有想过如何实现?

    它这就是一个 JS 吧,没有 PHP 用来专门的请求数据吧。那就是通过设置的选择器,找到当前页面和下一个页面,然后直接 load 下一个页面再用 jQuery 筛选出文章内容填补进去吧?

    那分页的数据还是得输出出来,然后用 CSS 隐藏一下?

    最近我需要用 Ajax 来构建自己的一个项目,分页这块有点小乱,如果有这个,就不需要分页了。不过。。。

    PS:你都自由职业了,咋不接私活?是太忙了还是钱太多了没压力啊哈哈

    1. 那分页的数据还是得输出出来,然后用 CSS 隐藏一下
      Re:这里不涉及到css问题。分页是php程序,必须存在。正常的流程是用户点击下一页链接,php程序读取下一页显示给用户,需要刷新页面。用ajax,是ajax代替用户去执行这个分页的php程序,把结果带回来,不离开当前页。所以,分页的程序必须存在,你还是先把分页搞定吧。

      我是自由职业,没忙的臭死钱也不算太多。从我过去的经验看,大部分从我博客找我干活的人期待的是廉价劳动,我的时间有限,水平也不算非常低,当然不想浪费这种时间了。所以我宁可免费帮助别人解决我感兴趣的问题,也不想浪费时间讨价还价。

  7. 大神请教下,用不使用插件的方法,怎么让动态图片居中

  8. 想问下sola大神,我的结构是这样的:
    #page-container
    #div
    #page-content
    #cont932
    #journal-articles-block ←文章列表
    .journal-article ←单篇post内容
    #pagination

    那我是不是要填上:
    nextSelector:”#journal-articles-block #pagination a”,
    navSelector:”#pagination”,
    itemSelector:”#journal-articles-block .journal-article”,
    contentSelector:”.journal-articles-block”
    表示试了好多次都没效果……求解答谢谢!

    1. nextSelector:”#journal-articles-block #pagination a”
      我对这个有疑问,这里应该填写可以选中“下一页”链接的css选择器,比如我例子中用.nav-previous a,注意是nav-previous。通常导航不是有两个吗,上一页下一页,你用的选择器似乎会同时选中这两个链接。

        1. 那是否有js错误?可以用firebug或者chrome inspector等调试工具查看。

          1. 目前主题里只载入了JQ和scrollmonitor和上文的JS,没有错误的说

        2. 那你得先确认你的主题没问题,比如脚本加载方式。

          1. 刚刚试了下还真是写得不规范的问题……多谢Sola大神的解答,麻烦你了。。

  9. 大神,加载第二页的时候跟第一页重叠了,怎么回事啊?

    1. 不明白你说的意思,请使用默认主题测试。

  10. 我用的是大前端的收费主题D8。但后台设置后也不能实现无限加载文章,请问哪里出了问题呢?可以帮我看看吗?十分感谢!!!

    1. nextSelector, navSelector, itemSelector和contentSelector全部设置正确,才能使用。
      既然是收费主题,为何不去问作者。

      1. 我是别人给我的模板,所以没售后服务的。。。试过在wp官方模板可以用,然后把D8页码代码替换了,还是不行。已经折磨几天了。。。不知道什么问题呢?

        1. 不行说明你设置的不对,如果你不明白无限加载的原理,不懂代码,还是找售后吧。
          我没用过这款主题,没法帮你。

          1. 我可以发这个主题给你,你帮我修改下行吗,有偿修改。我的QQ 287930420,希望可以帮帮我吧。谢谢了。

        2. 不好意思,我不接任何项目。

  11. 代码方式很棒,已在主题中添加!
    谢谢!

    另外,如何实现像你博客中点击才加载,而不是自动加载呀?

    1. 方法在这篇文章里http://www.solagirl.net/wordpress-infinite-scroll-manual-loading.html

      1. 非常感謝!

        BTW,你站很棒,你這里蒐羅到不少好東西! 🙂

        1. Thank you for saying that!

  12. 如果是自己写的主题,就需要设置一番,完全不懂HTML的话可能会有些困难,需要设置的内容在第三节中将会。。。
    第三节在哪里呢?

  13. 为什么翻到第二页就停止了

  14. 终于找到了这个插件,已经安装了,好用~

  15. […] 本文基于《WordPress: 增加无限分页(Infinite Scroll)功能》而写,上文说到Infinite Scroll自动加载模式,这种模式的缺点显而易见——用户永远无法到达页面底部(除非有中国式的超慢网速加屏蔽)。因此介绍另一种模式:手动加载。 […]

评论功能已关闭