WordPress主题开发

WordPress Infinite Scroll之手动加载

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

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

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

代码与上文差别不大,仅有两点变化:

为什么有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方式去读取下一页内容,匹配、返回。所有要保证自己主题中有这个结构。

8条评论

  1. 请问,如果我想一次自动加载三页,三页以后要点击下一页才能继续显示可以实现吗?

    1. 我只能真心的说我站点用着的就是这个,我的咋没事呢?你还是找个懂代码的帮你看看主题吧。

    2. 这个方法真心没问题!

      同意博主的观点,如果没办法实现,应该是主题CSS Selector的问题!

评论已关闭。