WordPress归档页Ajax滚动分页加载异常问题求助

问题原因 #

1. 当前AJAX代码仅替换了文章列表区域（.row.posts），但分页、加载更多的DOM元素及绑定的事件未同步更新。主题的加载更多功能是在页面初始加载时绑定的动态事件，AJAX替换内容后，新的加载更多按钮无法触发原有逻辑。
2. 从第二页进入时，浏览器URL带有page参数，点击标签时未清除该参数，会加载分类的对应页码而非第一页，导致分页逻辑混乱。

解决方案 #

1. 修改前端AJAX代码，完整替换内容并重新初始化加载更多 #

更新JS代码，确保切换分类时替换分页、加载更多区域，重新绑定事件，同时清除URL中的page参数：

jQuery(document).ready(function($) {
    // 封装加载更多初始化函数，支持重复调用
    function initLoadMore() {
        // 先解绑原有事件，避免重复绑定冲突
        $('#load-more-button').off('click').on('click', function() {
            var $btn = $(this);
            var activeCatHref = $('.tag-cattab a.active').attr('href');
            var urlObj = new URL(activeCatHref);
            var catId = urlObj.searchParams.get('cat');
            // 从分页区域提取当前页码，无数据则默认第一页
            var currentPage = parseInt($('.pagination .current').text()) || 1;
            var nextPage = currentPage + 1;

            $.ajax({
                url: ajaxurl, // WordPress全局AJAX地址，需确保主题已定义
                type: 'POST',
                data: {
                    action: 'azin_load_more', // 主题加载更多对应的AJAX动作名，需与主题一致
                    cat: catId,
                    page: nextPage
                },
                beforeSend: function() {
                    $('.infinite-scroll-request').show();
                    $btn.prop('disabled', true);
                },
                success: function(response) {
                    $('.infinite-scroll-request').hide();
                    $btn.prop('disabled', false);
                    if (response) {
                        $('.row.posts').append(response);
                        // 更新分页的当前页码显示
                        $('.pagination .current').text(nextPage);
                    } else {
                        $btn.hide(); // 无更多内容时隐藏按钮
                    }
                },
                error: function() {
                    $('.infinite-scroll-request').hide();
                    $btn.prop('disabled', false);
                }
            });
        });
    }

    // 页面初始化时执行一次加载更多绑定
    initLoadMore();

    $('.tag-cattab a').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.addClass('active').siblings().removeClass('active');
        
        // 处理URL，强制清除page参数，确保加载分类第一页
        var urlObj = new URL($this.attr('href'));
        urlObj.searchParams.delete('page');
        var tabLink = urlObj.toString();

        $.ajax({
            url: tabLink,
            type: 'GET',
            success: function(response) {
                var $response = $(response);
                // 完整替换文章列表、分页、加载更多区域
                $('.row.posts').html($response.find('.row.posts').html());
                $('.col-12.pagination').html($response.find('.col-12.pagination').html());
                $('.col-12.load-more').html($response.find('.col-12.load-more').html());
                
                // 重新初始化加载更多功能
                initLoadMore();
                
                // 更新浏览器URL，保持路由一致性
                history.pushState(null, null, tabLink);
            },
            error: function(error) {
                console.log('加载失败: ', error);
            }
        });
    });
});

2. 确保后端AJAX加载逻辑正确 #

检查主题functions.php中的azin_load_more处理函数，确保能正确接收cat和page参数并返回对应内容：

add_action('wp_ajax_azin_load_more', 'azin_load_more_posts');
add_action('wp_ajax_nopriv_azin_load_more', 'azin_load_more_posts');

function azin_load_more_posts() {
    $cat_id = isset($_POST['cat']) ? intval($_POST['cat']) : 0;
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;

    $args = array(
        'post_type' => 'post',
        'cat' => $cat_id,
        'paged' => $paged,
        'posts_per_page' => get_option('posts_per_page'),
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            azin_post_archive_content(get_the_ID(), $col); // 复用主题的文章内容模板
        }
        wp_reset_postdata();
    }

    die();
}

3. 可选优化：支持浏览器前进后退同步内容 #

添加popstate事件监听，实现浏览器前进后退时自动加载对应分类内容：

$(window).on('popstate', function() {
    var currentUrl = window.location.href;
    $('.tag-cattab a').each(function() {
        var linkUrl = new URL($(this).attr('href'));
        linkUrl.searchParams.delete('page');
        if (currentUrl.startsWith(linkUrl.toString().split('?')[0])) {
            $(this).click();
            return false;
        }
    });
});

内容的提问来源于stack exchange，提问作者Monoor