您现在的位置是：首页 > WordPress教程WordPress教程

WordPress如何实现无限滚动

WP集市 2025-09-01 【WordPress教程】 653人已围观

先唠唠无限滚动是啥玩意儿。你刷手机时候往下拉一直出新内容不用点下一页对吧，就那感觉。WordPress搞这个其实挺简单，核心思路就是：用户滚到底部时，用JavaScript偷偷加载新文章，再把内容拼接到现有列表里——像玩俄罗斯方块消行那样无缝衔接。
准备阶段得先确保主题支持。打开你的主题文件夹，检查index.php或archive.php里有没有经典的循环代码：
```
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; endif; ?>
```
有的话恭喜，这是能改造的底子。

关键来了，用AJAX动态加载。先注册个脚本扔到functions.php：

add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('infinite-scroll', get_template_directory_uri().'/js/infinite.js', array('jquery'), null, true);
wp_localize_script('infinite-scroll', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
});

重点在infinite.js里的监听逻辑。当滚动条蹭到底部时，就触发加载：

jQuery(function($){
let loading = false;
$(window).scroll(function(){
  if($(window).scrollTop() + 100 >= $(document).height() - $(window).height() && !loading){
     loading = true;
     $.post(ajax_object.ajax_url, {
        action: 'load_more_posts',
        page: currentPage // 这个变量要全局记录页码
     }, function(data){
        $('#文章容器').append(data);
        currentPage++;
        loading = false;
     });
  }
});
});

别忘了PHP端响应请求。还是在functions.php补处理函数：

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');
function load_more_posts(){
$paged = $_POST['page'] + 1;
query_posts(array('paged' => $paged));
if(have_posts()): while(have_posts()): the_post();
  get_template_part('内容模板路径'); // 比如'template-parts/content'
endwhile; endif;
wp_die();
}

最后注意个小坑。有时候加载会重复触发，得加个锁变量（像前面js里的loading）；如果没更多文章了，记得返回空或隐藏加载按钮。用户体验方面可以加个旋转的加载动画，毕竟人类需要视觉反馈来确认世界还在运转。
其实插件党可以直接用Jetpack的无限滚动模块或者Infinite Scroll插件，但自己手搓的好处是——代码就像亲手捏的泥人，哪儿不合适随手就能掰一块下来重捏。