WordPress Infinite Scroll之手动加载

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

手动加载与自动加载在代码上的区别

手动加载，即当页面滚动到底部时，不自动读取下一页，而是显示一个“Load more”按钮，用户点击这个按钮再加载下一页。

代码与上文差别不大，仅有两点变化：

• 引入behavior参数，infinite scroll jquery插件作者已经写好了手动加载behavior的js脚本，下载之
• 使用callback功能

为什么有callback？

infinite scroll说到底不过是用jquery ajax的load方法去读取下一页的内容，load()允许只返回页面的一部分，根据设定的jquery选择符去匹配，具体到infinite scroll，我们用contentSelector参数指定返回post内容，其它的都不要。

重点是：load()返回html内容时不会去管你head中执行了多少javascript代码，偏偏你的内容就需要一段js来初始化才能正确显示，比如用masonry实现瀑布流。callback在这个时候就变得有用了，你需要执行什么js函数，放到callback里重新执行一遍，保证内容可以正确渲染。

我做的事情比较简单，不需要太多js代码，但我需要在文章加载完后把Load more按钮挪到最下面，这个放到callback中执行。

手动加载模式的代码

手动加载模式的代码，仍然分加载脚本和脚本初始化两个步骤，要多加载一个behavior文件。

load_child_theme_textdomain( 'tt_child', get_stylesheet_directory());
/**
 * 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);
    wp_register_script('infinite_scroll_behavior', get_stylesheet_directory_uri() . '/js/behaviors/manual-trigger.js', array('jquery','infinite_scroll'), null, true);
    if (!is_singular()) {
        wp_enqueue_script('infinite_scroll');
        wp_enqueue_script('infinite_scroll_behavior');
    }
}

add_action('wp_enqueue_scripts', 'custom_theme_js');

/**
 * Infinite Scroll
 */
function custom_infinite_scroll_js() {
    if (!is_singular() ) {
        ?>
        <script>
        jQuery(document).ready(function(){
            /**
             * Customize the previous navitation menu
             */
           jQuery('#nav-below .nav-previous a').text('<?php _e('Load More...', 'tt_child'); ?>');
            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'); ?>"
                },
                behavior: 'twitter',
                nextSelector:'#nav-below .nav-previous a',
                navSelector:"#nav-below",
                itemSelector:"article",
                contentSelector:"#content"
            };
            jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(){
                jQuery('#nav-below').insertAfter('#content article:last');
            });
        });
        </script>
        <?php
    }
}

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

下载源代码

仍然是一个twentytwelve的child theme，下载激活后查看效果

[download id=50]

注意事项

在使用infinite scroll的过程中，最关键的一个内容就是指向文章下一页的链接，infinite scroll正是用ajax方式去读取下一页内容，匹配、返回。所有要保证自己主题中有这个结构。