本教程详细阐述了如何在 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 请求。
// 登录用户和未登录用户都可以访问
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 = '<?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; // 更新当前 
