WordPress：增加无限分页（Infinite Scroll）功能

2013 年 2 月 25 日

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，有需要的朋友请下载。

[download id=49]

40条评论

muff说道：
2014 年 8 月 12 日 22:21
博主问一下，不知道为什么我的网站会屏蔽掉?paged=2?这种参数我的网站翻页是xxx.com/?paged=2?#posts_holder这样但是浏览器只显示xxx.com/#posts_holder 从而只会跳转到首页。固定连接插件 .htaccess都修改过也没用主题也换过
facebig说道：
2014 年 7 月 15 日 13:46
使用Masnory瀑布流主题，可以加载，在加载出来的新内容块和上面的内容块有重叠现象，请问是什么原因？
1. Sola说道：
  2014 年 7 月 15 日 20:16
  是不是container div的样式有问题？这个得具体看才知道
  1. facebig说道：
    2014 年 7 月 16 日 09:54
    谢谢，已解决，回调的问题。
Kelvin说道：
2014 年 6 月 20 日 23:31
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. Kelvin说道：
  2014 年 6 月 21 日 14:50
  哈哈，找到原因了，搞定了，当作骚扰了啊，微笑
小鱼说道：
2014 年 4 月 18 日 15:27
请教个WP的模板修改问题
如果用Infinite Scroll做滚动无限加载，一直加载~会让感到很恐怖~一直加载不完~
http://www.hao123.com/gaoxiao/~
请问如果要做这种分页效果，要怎么处理~
滚动加载，加载到设置好的数量就不加载了，出现分页按钮按。
damao50说道：
2014 年 3 月 27 日 21:51
ie7-ie8下面不行啊
于江水说道：
2013 年 12 月 2 日 14:12
有没有想过如何实现？
它这就是一个 JS 吧，没有 PHP 用来专门的请求数据吧。那就是通过设置的选择器，找到当前页面和下一个页面，然后直接 load 下一个页面再用 jQuery 筛选出文章内容填补进去吧？
那分页的数据还是得输出出来，然后用 CSS 隐藏一下？
最近我需要用 Ajax 来构建自己的一个项目，分页这块有点小乱，如果有这个，就不需要分页了。不过。。。
PS：你都自由职业了，咋不接私活？是太忙了还是钱太多了没压力啊哈哈
1. Sola说道：
  2013 年 12 月 2 日 19:38
  那分页的数据还是得输出出来，然后用 CSS 隐藏一下
  Re：这里不涉及到css问题。分页是php程序，必须存在。正常的流程是用户点击下一页链接，php程序读取下一页显示给用户，需要刷新页面。用ajax，是ajax代替用户去执行这个分页的php程序，把结果带回来，不离开当前页。所以，分页的程序必须存在，你还是先把分页搞定吧。
  我是自由职业，没忙的臭死钱也不算太多。从我过去的经验看，大部分从我博客找我干活的人期待的是廉价劳动，我的时间有限，水平也不算非常低，当然不想浪费这种时间了。所以我宁可免费帮助别人解决我感兴趣的问题，也不想浪费时间讨价还价。
  1. 于江水说道：
    2013 年 12 月 2 日 19:44
    好吧，不错，真性情。
蓝色说道：
2013 年 12 月 1 日 17:50
大神请教下，用不使用插件的方法，怎么让动态图片居中
PC丶爱好者说道：
2013 年 12 月 1 日 15:03
想问下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. PC丶爱好者说道：
  2013 年 12 月 1 日 15:04
  空格被省略了……是从上到下包含关系的
2. Sola说道：
  2013 年 12 月 2 日 19:33
  nextSelector:”#journal-articles-block #pagination a”
  我对这个有疑问，这里应该填写可以选中“下一页”链接的css选择器，比如我例子中用.nav-previous a，注意是nav-previous。通常导航不是有两个吗，上一页下一页，你用的选择器似乎会同时选中这两个链接。
  1. PC丶爱好者说道：
    2013 年 12 月 3 日 16:52
    为了方便我只输出了下一页的链接，应该是可以选中的
    1. Sola说道：
      2013 年 12 月 3 日 20:16
      那是否有js错误？可以用firebug或者chrome inspector等调试工具查看。
    2. PC丶爱好者说道：
      2013 年 12 月 3 日 21:28
      目前主题里只载入了JQ和scrollmonitor和上文的JS，没有错误的说
    3. Sola说道：
      2013 年 12 月 4 日 11:51
      你用的什么主题
    4. PC丶爱好者说道：
      2013 年 12 月 4 日 19:10
      是自己写的。。
    5. Sola说道：
      2013 年 12 月 4 日 19:36
      那你得先确认你的主题没问题，比如脚本加载方式。
    6. PC丶爱好者说道：
      2013 年 12 月 4 日 21:49
      刚刚试了下还真是写得不规范的问题……多谢Sola大神的解答，麻烦你了。。
孙学龙说道：
2013 年 10 月 22 日 00:27
大神，加载第二页的时候跟第一页重叠了，怎么回事啊？
1. Sola说道：
  2013 年 10 月 22 日 19:30
  不明白你说的意思，请使用默认主题测试。
wuxingfeng说道：
2013 年 10 月 20 日 16:59
我用的是大前端的收费主题D8。但后台设置后也不能实现无限加载文章，请问哪里出了问题呢？可以帮我看看吗？十分感谢！！！
1. Sola说道：
  2013 年 10 月 21 日 12:39
  nextSelector, navSelector, itemSelector和contentSelector全部设置正确，才能使用。
  既然是收费主题，为何不去问作者。
  1. wuxingfeng说道：
    2013 年 10 月 22 日 13:02
    我是别人给我的模板，所以没售后服务的。。。试过在wp官方模板可以用，然后把D8页码代码替换了，还是不行。已经折磨几天了。。。不知道什么问题呢？
    1. Sola说道：
      2013 年 10 月 22 日 19:20
      不行说明你设置的不对，如果你不明白无限加载的原理，不懂代码，还是找售后吧。
      我没用过这款主题，没法帮你。
    2. wuxingfeng说道：
      2013 年 10 月 22 日 20:29
      我可以发这个主题给你，你帮我修改下行吗，有偿修改。我的QQ 287930420，希望可以帮帮我吧。谢谢了。
    3. Sola说道：
      2013 年 10 月 23 日 10:08
      不好意思，我不接任何项目。
Ryan说道：
2013 年 9 月 26 日 21:39
代码方式很棒，已在主题中添加！
谢谢！
另外，如何实现像你博客中点击才加载，而不是自动加载呀？
1. Sola说道：
  2013 年 9 月 27 日 14:05
  方法在这篇文章里https://www.solagirl.net/wordpress-infinite-scroll-manual-loading.html
  1. Ryan说道：
    2013 年 9 月 27 日 14:09
    非常感謝！
    BTW，你站很棒，你這里蒐羅到不少好東西！ 🙂
    1. Sola说道：
      2013 年 9 月 27 日 14:13
      Thank you for saying that!
deadcrane说道：
2013 年 9 月 20 日 00:44
如果是自己写的主题，就需要设置一番，完全不懂HTML的话可能会有些困难，需要设置的内容在第三节中将会。。。
第三节在哪里呢？
1. Sola说道：
  2013 年 9 月 20 日 01:13
  第三个标题就是第三节…
kk说道：
2013 年 8 月 24 日 13:30
为什么翻到第二页就停止了
1. Sola说道：
  2013 年 8 月 24 日 17:50
  问题太不具体，无法回答
马光说道：
2013 年 8 月 9 日 00:15
终于找到了这个插件，已经安装了，好用~
Pingback： WordPress Infinite Scroll之手动加载 | ~SolagirL~

评论已关闭。