WordPress AJAX 无限加载（Load More）防重复文章教程

// 登录用户和未登录用户都可以访问
add_action('wp_ajax_loadmore', 'loadmore_get_posts');
add_action('wp_ajax_nopriv_loadmore', 'loadmore_get_posts');

function loadmore_get_posts() {
    // 确保请求方法为 POST
    if ( $_SERVER['REQUEST_METHOD'] !== 'POST' ) {
        wp_send_json_error( 'Invalid request method.' );
        die();
    }

    // 验证并清理输入数据
    $paged = ! empty( $_POST['paged'] ) ? intval( $_POST['paged'] ) : 1;
    $posts_per_page = ! empty( $_POST['posts_per_page'] ) ? intval( $_POST['posts_per_page'] ) : 9;
    $cats = ! empty( $_POST['cats'] ) ? sanitize_text_field( $_POST['cats'] ) : '';

    // 为了获取下一页内容，将当前页码递增
    $paged++;

    // 构建 WP_Query 查询参数
    $args = array(
        'paged'          => $paged,
        'posts_per_page' => $posts_per_page,
        'post_type'      => 'post',
        'post_status'    => 'publish',
        'cat'            => $cats,
        // 确保不会忽略粘性文章，或者根据需求进行调整
        'ignore_sticky_posts' => true, 
    );

    // 实例化 WP_Query
    $data = new WP_Query( $args );
    $count_posts = $data->found_posts; // 获取总文章数

    $posts_html = '';
    if ( $data->have_posts() ) {
        ob_start(); // 开启输出缓冲
        while ( $data->have_posts() ) : $data->the_post();
            // 假设你的文章模板部分位于 'template-parts/content-post.php' 或类似路径
            // 请根据你的实际模板路径修改 'this is template'
            get_template_part( 'this is template' );    
        endwhile;
        $posts_html = ob_get_clean(); // 获取缓冲内容
    }

    // 重置文章数据，避免影响后续查询
    wp_reset_postdata();

    // 以 JSON 格式返回数据
    wp_send_json( array(
        'html'        => $posts_html,
        'found_posts' => $count_posts,
        'next_paged'  => $paged, // 返回下一页的页码，方便前端同步
        'has_more'    => ( $count_posts > ( $paged * $posts_per_page ) ) // 判断是否还有更多文章
    ) );

    die; // 终止 AJAX 请求
}

document.addEventListener('DOMContentLoaded', function() {
    let ajaxurl = '<?php echo admin_url('admin-ajax.php') ?>';
    let currentPage = 1; // 当前已加载的页码
    const postsPerPage = 9; // 每页加载的文章数
    const articleFeedTemplate = document.querySelector('.articlefeed_template'); // 文章容器
    const loadMoreButton = document.getElementById('load-more-button'); // 假设有一个加载更多按钮
    let totalPosts = <?php echo json_encode(wp_count_posts('post')->publish); ?>; // 初始总文章数，可根据实际情况获取
    // 假设 get_selected_cats() 返回当前选中的分类ID
    const selectedCats = <?php print json_encode(get_selected_cats()); ?>; 

    // 初始加载时检查是否需要显示加载更多按钮
    if (totalPosts <= postsPerPage) {
        if (loadMoreButton) {
            loadMoreButton.style.display = 'none';
        }
    }

    // 定义加载文章的函数
    function loadMorePosts() {
        if (!articleFeedTemplate) {
            console.error('Article feed container not found.');
            return;
        }

        // 禁用按钮并显示加载状态
        if (loadMoreButton) {
            loadMoreButton.disabled = true;
            loadMoreButton.textContent = '加载中...';
        }

        let postData = new FormData();
        postData.append('action', 'loadmore');
        postData.append('paged', currentPage); // 发送当前已加载的页码，后端会在此基础上递增
        postData.append('posts_per_page', postsPerPage);
        postData.append('cats', selectedCats);

        const xhr = new XMLHttpRequest();
        xhr.open('POST', ajaxurl);

        xhr.onload = function() {
            if (xhr.status === 200) {
                try {
                    const response = JSON.parse(xhr.responseText);
                    if (response.html) {
                        articleFeedTemplate.innerHTML += response.html;
                        currentPage = response.next_paged - 1; // 更新当前