WordPress文章下拉自动无限翻页方式

发布于 2023.02.14

最近给某个客户定制主题时需要实现无限下拉加载功能，想通过几行代码把自己的 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;
```
```
    });
```

类别：WordPress教程、

本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。

方法一：

方法二：

猜你喜欢GUESS YOU LIKE

WordPress添加贴吧表情

PhpStorm配置Xdebug调试WordPress

PHP使用Imagick扩展处理图片

WordPress添加百度主动推送

WordPress文章底部添加相关文章

Windows上配置Nginx+PHP7+WordPress

评论 (0)COMMENT