Past Dust

最近有一个wordpress主题需要用到无限加载文章列表，如Infinite Scroll插件的wordpress移植版，今天的话分享一个免插件实现wordpress无限加载文章的方法：

1、同样是基于Infinite Scroll插件，所以需要下载插件包：infinite-scroll-master

2、将以下loader图片下载到本地，并上传到你网站当前主题的images文件夹里面，或者去ajaxload重新生成一张。

3、将刚刚下载的压缩包内的jquery.infinitescroll.min.js文件上传到你当前主题的js文件夹。

4、添加分页代码，注意此无限加载的方法只在wordpress默认的分页代码下才能实现。

<div class="pagenavi"><?php next_posts_link('下一页 &raquo; ') ?><?php previous_posts_link('&laquo; 上一页') ?></div>

5、加载jquery.infinitescroll.min.js文件到你的主题，需要先确认你的主题是否已经载入了jquery库，并将以下代码添加到你当前主题的functions.php文件

//加载infinite scroll插件脚本
function infinitescroll_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', 'infinitescroll_js');

6、加载无限加载配置js到你的主题，代码添加位置同上

//无限加载参数配置
function infinite_scroll_js() {
    if (!is_singular() ) {
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function(){            
            var infinite_scroll = {
                loading: {
                    img: "<?php echo get_stylesheet_directory_uri(); ?>/images/loader.gif",
                    msgText: "加载中...",
                    finishedMsg: "已加载所有产品..."
                },
                nextSelector:".pagenavi a",
                navSelector:".pagenavi",
                itemSelector:".post",
                contentSelector:".main",                
            };
            jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'infinite_scroll_js', 100);

6、参数说明

img: 等待加载时显示的动态图片URL路径
nextSelector: 下一页（Previous Post）链接CSS样式名称 + a标签（类选择器或ID选择器）
navSelector: 包含上一页/下一页链接的样式名称（类选择器或ID选择器）
itemSelector: 包含每篇文章内容的样式名称（类选择器或ID选择器）
contentSelector: 包含所有文章的样式名称（类选择器或ID选择器）

7、css样式代码

.pagenavi,#infscr-loading {text-align:center; font-size:0.75em;}
.pagenavi a {padding:6px 12px; background:#F04848; color:#fff; border:1px solid #dedede; border-right:none; overflow:hidden;}
#infscr-loading img {display:block; margin:0 auto; text-align:center;}

以上，就能够实现wordpress无限加载的功能了，具体可以应用在展示类或者图片站以及移动端用户体验改善等等，代码经过测试，完美无错，如果配置不成功请多检查一下细节。