本教程详细阐述了如何在 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 = ''; 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; // 更新当前
以上就是WordPress AJAX 无限加载（Load More）防重复文章教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1340176.html
微信扫一扫 
支付宝扫一扫 
