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

本教程详细阐述了如何在 wordpress 中实现 ajax “加载更多”功能，并解决常见的文章重复问题。核心在于避免使用 `query_posts()`，转而采用 `wp_query` 进行自定义查询，同时优化分页逻辑和前端 javascript 处理。文章将提供完整的后端 php 代码和前端 javascript 代码示例，并强调了数据安全、性能优化及用户体验的最佳实践，确保实现流畅且无重复内容的无限加载体验。

在现代网站设计中，AJAX “加载更多”功能因其能提供流畅的用户体验而广受欢迎。它允许用户在不刷新页面的情况下动态加载更多内容，尤其适用于博客、产品列表等场景。然而，在 WordPress 中实现这一功能时，开发者常会遇到一个棘手的问题：加载的文章出现重复。本文将深入探讨导致这一问题的原因，并提供一套基于 WP_Query 的健壮解决方案，包括后端 PHP 和前端 JavaScript 的完整实现。

核心问题：query_posts() 的陷阱与 WP_Query 的优势

许多开发者在 WordPress 中进行自定义查询时，习惯性地使用 query_posts() 函数。然而，query_posts() 的设计初衷是用于修改主查询，而非创建独立的次级查询。当你在 AJAX 加载等场景中使用它时，它会覆盖 WordPress 的主查询，导致全局 $wp_query 对象被更改，进而影响到分页、条件标签（如 is_archive()）以及其他依赖于主查询的 WordPress 功能。这正是导致 AJAX 加载时出现文章重复的主要原因之一，因为它可能与 WordPress 内部的分页机制产生冲突。

相比之下，WP_Query 是一个功能强大且灵活的类，用于创建全新的、独立的 WordPress 数据库查询。它不会干扰主查询，使得开发者可以安全地在任何地方执行自定义查询，而无需担心副作用。因此，在实现 AJAX “加载更多”功能时，强烈建议使用 WP_Query。

后端实现：WordPress AJAX 回调函数 (functions.php)

在 functions.php 文件中，我们将注册一个 AJAX 动作，并定义一个回调函数来处理前端的请求。

1. 注册 AJAX 动作

WordPress 提供了 wp_ajax_ 和 wp_ajax_nopriv_ 钩子，分别用于处理登录用户和未登录用户的 AJAX 请求。

CA.LA

第一款时尚产品在线设计平台，服装设计系统

下载

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

2. 定义 loadmore_get_posts 回调函数

这个函数将负责从数据库中获取文章，并以 JSON 格式返回给前端。

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 请求
}

代码说明：

• 数据验证与清理： 在处理任何用户输入前，务必使用 intval()、sanitize_text_field() 等函数进行验证和清理，以防止安全漏洞。
• 页码递增： 在查询前将 $paged 递增，是为了获取下一页的文章。例如，如果前端发送 paged=1，我们实际上查询的是第二页的文章。
• WP_Query： 使用 new WP_Query($args) 创建一个独立的查询实例。
• 输出缓冲： 使用 ob_start() 和 ob_get_clean() 捕获 get_template_part() 输出的 HTML 内容，以便将其作为字符串包含在 JSON 响应中。
• wp_reset_postdata()： 在自定义循环之后调用此函数至关重要，它将全局 $post 对象重置回主查询的状态，避免对其他部分造成影响。
• JSON 响应： wp_send_json() 是 WordPress 提供的便捷函数，用于以 JSON 格式发送响应，并自动设置 Content-Type 头。我们返回了 HTML 内容、总文章数、下一页码以及一个 has_more 标志，方便前端逻辑判断。

前端实现：JavaScript AJAX 请求

前端 JavaScript 代码将负责触发 AJAX 请求、处理响应并更新页面内容。

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

    // 初始加载时检查是否需要显示加载更多按钮
    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; // 更新当前