WordPress文章下拉自动无限翻页方式-资源客

通过几行代码把自己的 wordpress 主题修改成文章自动无限下拉的形式，但是苦于功能不能实现，也不清楚是卡在哪个步骤了，今天给大家分享两个零距离的傻瓜版，来帮助大家完成这个功能。

方法一：

以下这个方法对于其它的教程优势在于，很明确的给到了翻页的代码，因为其它的教程都是以翻页的 js 及功能为例子，这里比较好的是提供了一个完整的翻页代码，可以直接应用，当然比较核心的步骤也同步给到了大家。希望这次大家可以操作成功。一共分三个步骤，复制粘贴，然后查找自己的每篇的文章样式 class，和包含文章的 class 样式替换即可。

1、本功能主要应用了 jQuery 插件 jquery.infinitescroll.js，通过大挖给大家提供了 CDN 的链接，方便直接应用到 HEAD 内即可：

<script src="https://cdn.bootcss.com/jquery-infinitescroll/2.0b2.120520/jquery.infinitescroll.min.js"></script>

2、替换分页代码：将以下分页的代码替换到当前分页位置上：

<div class="pagenavi">
	<?php next_posts_link('下一页 » ') ?>
	<?php previous_posts_link('« 上一页') ?>
</div>

3、在当前主题的 functions.php 文件中，添加以下代码：

代码中间包含了一个 gif 图像翻页效果的动态图，大家可以要的自己的喜欢，自行制作或是注释掉，这里大挖不再提供 GIF 图片：

/*
加载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');
/*
初始化infinite scroll插件配置参数
*/
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/ajax-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);

参数说明：

img: 等待加载时显示的动态图片 URL 路径

nextSelector: 下一页（Previous Post）链接 CSS 样式名称 + a 标签（类选择器或 ID 选择器）

navSelector: 包含上一页/下一页链接的样式名称（类选择器或 ID 选择器）

itemSelector: 包含每篇文章内容的样式名称（类选择器或 ID 选择器）

contentSelector: 包含所有文章的样式名称（类选择器或 ID 选择器）

提醒：如果按上面方法没有生效，请检查样式是否选择错。

4、CSS 样式代码：（把下面的 CSS 代码添加到当前主题的样式文件中，一般是 style.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;}

方法二：

以上都是用某个 js 插件来实现了，下面教大家一个不用插件实现的方法，首先在 php 里加上相关代码：

    <div class="article-list mobantu" id="article-list">
    <?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $args = array(
    'caller_get_posts' => 1,
    'paged' => $paged
    );
    query_posts($args);
    while ( have_posts() ) : the_post();
    get_template_part( 'content', get_post_format() );
    endwhile; wp_reset_query();
    ?>
    </div>
    <?php
    $next_page = get_next_posts_link('加载更多');
    if($next_page) echo '<div class="article-paging mobantu">'.$next_page.'</div>';
    ?>

然后，在 js 里加上相关代码（前提需要加载了 jquery，且网站使用了伪静态分页）：

    $('.article-paging > a').on('click',function(){ //点击实现加载更多，你可以根据自己需要改成下拉自动加载
    var next_url = $(this).attr("href");
    var next_text = $(this).text();
    if(next_text == '加载更多'){
    $(this).text('加载中...');
    $.ajax({
    type: 'get',
    url: next_url + '#article-list',
    success: function(data){
    result = $(data).find("#article-list .article-item");
    next_link = $(data).find(".article-paging > a").attr("href");
    //$(this).attr("href", next_url);
    if (next_link != undefined){
    $('.article-paging > a').attr("href", next_link);
    $('.article-paging > a').text('加载更多');
    }else{
    $(".article-paging").remove();
    }
 
    $(function(){
    $("#article-list").append(result.fadeIn(300));
    $('.thumb').lazyload({
    data_attribute: 'src',
    placeholder: _BGJ.uri + '/static/img/thumbnail.png',
    threshold: 400
    });
    });
 
    $(function() {
    if (next_url.indexOf("page") < 1) {
    $("#article-list").html('');
    }
    $("#article-list").append(result.fadeIn(200));
    });
    }
    });
    }
    return false;
    });

http://xzh.i3geek.com