WonderCSS

WordPress 动态分页加载插件 Infinite-Scroll 介绍

今天要笔记的是一款早就想得到的 HTML 效果,那就是动态加载翻页。这个效果随着瀑布流的开始就已经流行了,就是当页面滑动到最底部,无需手动点击上一页或下一页,自动加载下一页内容。那么在wordpress程序里我们有现成的插件可用,那就是:Infinite Scroll

ajax-loading-effect

Infinite-Scroll是一种动态加载内容的方式,当网页滚动到底部时,自动载入本需要翻页才能看到的内容,在社交应用中很常见,例如各个微博、花瓣、图钉等。在使用上,如果你使用的是wordpress官方主题,或是一些知名的wordpess主题,那么直接安装Infinite-Scroll WordPress插件即可。

今天主要记录的内容就是,如果你使用的主题并不是wordpress官方主题,安装Infinite-Scroll插件无效后,我们该如何设置。我们先来看看这个插件安装后的几个主要选项:

infinite-scroll

  • Content Selector:循环日志文章的外层容器,通常就是日志CLASS为.post的外层DIV,通常主题为#content
  • Navigation Selector:分页导航的容器ID名,通常为#nav-below
  • Next Selector:链接到下一个页面的内容
  • Item Selector:每篇日志的通用Class

如果你的 WordPress 主题是自己编写开发的,那么上面这四个选项将保障 Infinite-Scroll插件 正常运行。尤其“页面分页导航”这里,如果你的wordpress主题安装并启用了 WP-PageNavi 分页插件,那么一定要停止它,使用官方的导航方式。

不用安装插件实现 Infinite-Scroll 功能

1 我们需要在页面中加载 jquery.infinitescroll.min.js 文件,如果这个链接已经失效,你也可以在paulirish/infinite-scroll · GitHub下载ZIP文件包,解压后在根目录里找到。

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');

下面的代码中,你需要对 img、nextSelector、navSelector、itemSelector、contentSelector 几个字段进行设置,如本文之前的选项介绍。


/**
 * 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 自带的 loading 图片(ajax-loader.gif)不满意的话,你可以在 preloaders.net 这个网站上自定义生成一个合适的图片来防置到你的网站上。

By 于湛 发布于 2013.10.4 16,992 次浏览

WordPress 动态分页加载插件 Infinite-Scroll 介绍》上有8条评论

  1. 不懂代码却爱折腾的小白

    用了你的方法,在本地测试了一下,有个疑问,就是每次从首页点击进入某篇文章,我再点浏览器后退,又要重新loading,这个怎么解决?没有缓存定位吗?

    回复
    1. 于湛 文章作者

      确实是,因为浏览器后退时会直接定位到原先页面的位置,所以又重新Loading加载了一下当前位置的数据。这个JS应该没有缓存设置,感谢你的评论!

      回复
  2. 杨花落尽子灰啼

    请问如何在代码中把Behavior改为Manual Trigger,默认是翻页加载?

    回复
    1. 于湛 文章作者

      默认是自动加载翻页,你说的问题限于我近乎外行的JS知识,无法回答,真心抱歉。

      回复
    1. 于湛 文章作者

      这个自动加载效果是兼容IE旧浏览器的,IE7和8没问题,你可以排查下是否有其他JS造成的冲突。或者再看看CSS样式表有没有针对IE7和8的特殊语句。

      回复
  3. 求解

    文章中第一段代码放置在functions.php中,
    第二段代码放置在哪里呢?也是在functions.php中吗?
    放了这两段代码后还是没反应,还须怎样引用代码呢?
    谢谢解答。

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注