如何在WordPress文章循环中通过AJAX实现点击加载下一页功能？

1. 修改archive.php代码 #

替换你当前的archive.php代码为如下内容：

<?php 
get_header(); 
global $wp_query;
?>
<main class="main-content">
    <div class="inner">
        <?php if(have_posts()): ?>
        <ul class="product-list">
            <?php while(have_posts()):the_post(); 
            global $product; // 补充产品变量声明
            ?>
            <li class="list-product">
                <a href="<?php the_permalink(); ?>">
                    <div class="product-thumbnail">
                        <img class="lazyload" data-src="<?php the_post_thumbnail_url(); ?>" />
                    </div>
                    <h2 class="product-title"><?php the_title(); ?></h2>
                    <span class="product-price">
                        <?php 
                        if($product->is_type('variable')){
                            echo variable_price_html();
                        }elseif($product->is_type('simple')){
                            echo simple_price_html();
                        } 
                        ?>
                    </span>
                </a>
            </li>
            <?php endwhile; ?>
        </ul>
        <!-- 加载更多按钮 只有存在多页时显示 -->
        <?php if ($wp_query->max_num_pages > 1) : ?>
        <div class="load-more-wrapper">
            <button id="load-more-btn" 
                    data-max-page="<?php echo $wp_query->max_num_pages; ?>"
                    data-current-page="1"
                    data-nonce="<?php echo wp_create_nonce('load_more_products_nonce'); ?>"
            >
                加载更多
            </button>
        </div>
        <?php endif; ?>
        <?php endif; ?>
    </div>
</main>
<?php get_footer(); ?>

2. 向主题functions.php添加AJAX处理逻辑 #

将以下代码添加到你当前主题的functions.php文件末尾：

// AJAX加载更多产品处理
add_action('wp_ajax_load_more_products', 'load_more_products_callback');
add_action('wp_ajax_nopriv_load_more_products', 'load_more_products_callback');
function load_more_products_callback() {
    // 验证请求合法性
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'load_more_products_nonce')) {
        wp_send_json_error('非法请求');
    }
    $paged = $_POST['page'] + 1;
    // 复用归档页主查询参数
    $args = array(
        'post_type' => 'product',
        'post_status' => 'publish',
        'paged' => $paged,
        'posts_per_page' => get_option('posts_per_page'), // 和前台每页显示数量一致
    );
    $query = new WP_Query($args);
    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) : $query->the_post();
            global $product;
        ?>
        <li class="list-product">
            <a href="<?php the_permalink(); ?>">
                <div class="product-thumbnail">
                    <img class="lazyload" data-src="<?php the_post_thumbnail_url(); ?>" />
                </div>
                <h2 class="product-title"><?php the_title(); ?></h2>
                <span class="product-price">
                    <?php 
                    if($product->is_type('variable')){
                        echo variable_price_html();
                    }elseif($product->is_type('simple')){
                        echo simple_price_html();
                    } 
                    ?>
                </span>
            </a>
        </li>
        <?php
        endwhile;
        $html = ob_get_clean();
        wp_send_json_success($html);
    } else {
        wp_send_json_error('没有更多内容');
    }
    wp_die();
}

3. 加入JS交互代码 #

将以下代码添加到主题footer.php文件的<?php wp_footer(); ?>之前即可：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const loadMoreBtn = document.getElementById('load-more-btn');
    if (!loadMoreBtn) return;
    const productList = document.querySelector('.product-list');
    let currentPage = parseInt(loadMoreBtn.dataset.currentPage);
    const maxPage = parseInt(loadMoreBtn.dataset.maxPage);
    const nonce = loadMoreBtn.dataset.nonce;
    loadMoreBtn.addEventListener('click', function() {
        // 加载中状态
        loadMoreBtn.textContent = '加载中...';
        loadMoreBtn.disabled = true;
        // 构造请求参数
        const formData = new FormData();
        formData.append('action', 'load_more_products');
        formData.append('page', currentPage);
        formData.append('nonce', nonce);
        // 发送请求
        fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(res => {
            if (res.success) {
                // 追加内容
                productList.insertAdjacentHTML('beforeend', res.data);
                currentPage++;
                loadMoreBtn.dataset.currentPage = currentPage;
                // 恢复按钮状态
                loadMoreBtn.textContent = '加载更多';
                loadMoreBtn.disabled = false;
                // 没有更多内容时隐藏按钮
                if (currentPage >= maxPage) {
                    loadMoreBtn.style.display = 'none';
                }
                // 兼容懒加载
                if (window.lazyLoadInstance) {
                    lazyLoadInstance.update();
                }
            } else {
                loadMoreBtn.textContent = '没有更多内容';
                loadMoreBtn.disabled = true;
            }
        })
        .catch(err => {
            console.error(err);
            loadMoreBtn.textContent = '加载失败 点击重试';
            loadMoreBtn.disabled = false;
        });
    });
});
</script>

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