WordPress无限滚动实现

1. 咱们先唠唠WordPress里那个无限滚动的玩意儿。你往下划拉页面，内容咔咔自动加载，根本不用点下一页——这玩意儿现在挺常见对吧？其实说白了就是靠JavaScript瞅着滚动条的位置，到底了就悄悄用AJAX去后台摸点新文章回来，再怼进页面里。别以为多玄乎，咱用jQuery搞个基础版也就几十行代码的事儿。

2. 首先得在主题里埋个钩子。打开你的functions.php，先声明这主题支持无限滚动（其实就走个形式），顺便把需要用的脚本挂上去：

   
   add_action('after_setup_theme', 'my_theme_support');
   function my_theme_support() {
   add_theme_support('infinite-scroll', array(
       'type'           => 'scroll',
       'footer_widgets' => false,
       'container'      => 'content',
       'render'         => 'my_render_posts',
       'posts_per_page' => get_option('posts_per_page')
   ));
   }

add_action('wp_enqueue_scripts', 'load_infinite_scripts'); function load_infinite_scripts() { wp_register_script('infinity', get_stylesheet_directory_uri() . '/js/infinity.js', array('jquery'), '1.0', true); wp_localize_script('infinity', 'ajaxObject', array( 'ajaxUrl' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('infinity_nonce') )); wp_enqueue_script('infinity'); }

3. 重点来了啊，得搞个AJAX处理器接客。还是同一个文件，接着往下写：
```php
add_action('wp_ajax_infinite_scroll', 'infinite_scroll_callback');
add_action('wp_ajax_nopriv_infinite_scroll', 'infinite_scroll_callback');
function infinite_scroll_callback() {
    check_ajax_referer('infinity_nonce', 'nonce');

    $paged = $_POST['page'] + 1;
    $query = new WP_Query(array(
        'post_type'      => 'post',
        'post_status'    => 'publish',
        'paged'          => $paged,
        'posts_per_page' => get_option('posts_per_page')
    ));

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            // 这里用你主题的文章结构模板
            get_template_part('content', get_post_format());
        }
    }
    wp_die();
}

4. 现在整个JavaScript监听器去触发加载。在主题js目录新建个infinity.js：

   jQuery(function($) {
   let loading = false;
   let page = 1;
   let maxPages = parseInt(infinitySettings.maxPages); // 事先用wp_localize_script传过来总页数
   
   $(window).scroll(function() {
       if (!loading && page < maxPages && $(window).scrollTop() > $(document).height() - $(window).height() - 600) {
           loading = true;
           $('#loading-spinner').show(); // 整个加载动画
   
           $.ajax({
               url: ajaxObject.ajaxUrl,
               type: 'POST',
               data: {
                   action: 'infinite_scroll',
                   page: page,
                   nonce: ajaxObject.nonce
               },
               success: function(response) {
                   if (response) {
                       $('#content').append(response);
                       page++;
                       loading = false;
                       $('#loading-spinner').hide();
                   }
               }
           });
       }
   });
   });

5. 注意几个容易翻车的地方：主题文章容器div的ID得和php里定义的container对上；总页数maxPages得提前通过wp_localize_script传给JS；CSS里记得给加载动画#loading-spinner写个样式。要是加载完没文章了，记得整个提示语比如“到底了别划拉了”。

6. 其实现在不少插件像Jetpack已经自带这功能，但自己手搓的好处是能完全定制加载动画和内容结构。比如可以在加载时随机显示骚话文案：“正在扒拉更多文章...”、“程序员正在疯狂敲键盘...”之类的，让等待过程没那么枯燥。

7. 最后提醒个SEO相关的事儿：无限滚动可能会让搜索引擎蜘蛛摸不着北，最好配套实现个分页导航的备用方案。可以用

8. 对了，移动端记得测试触摸滚动事件。有时候iOS的弹性滚动会干扰判断逻辑，可以在JS里加个touchmove事件监听，或者用requestAnimationFrame来优化滚动检测性能。代码差不多长这样：

   let ticking = false;
   $(window).on('scroll touchmove', function() {
   if (!ticking) {
       requestAnimationFrame(function() {
           checkScrollPosition();
           ticking = false;
       });
       ticking = true;
   }
   });

9. 总之这玩意儿就像嗑瓜子，用户一旦开始滚就停不下来。但别让加载延迟超过2秒，不然人家直接关页面走人了。实在性能不行可以考虑先预加载下一页文章，等用户快滚到底时直接渲染，速度体验能提升不少。

10. 要是懒得折腾，直接装个Ajax Load More插件也行。但自己懂原理最重要，哪天老板要加个“滚动到第三页自动弹出优惠券”的需求，你就知道怎么改代码了。完事。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。