如何在WordPress现有AJAX加载更多功能中添加AJAX分类筛选
2026-5-7
解决WordPress分类筛选与AJAX加载更多协同工作问题
我来帮你搞定这个问题，核心思路是让分类筛选触发AJAX请求更新文章列表，同时同步更新加载更多的查询参数，这样筛选后加载更多就能基于当前分类继续请求内容了。下面是具体的修改步骤：
1. 修改分类筛选链接（停止跳转，添加分类ID标记）
先把你we_title_filters函数里的分类链接改成不跳转的形式，同时给每个链接加上分类ID的data属性，方便前端获取：
function we_title_filters() { if(is_home()): ?> <div class="title-filters"> <h3 class="widget-title" style="display:inline-block;">Latest News</h3> <div class="filters"> <?php $include = array(3651, 7, 2828, 2829, 2172); $categories = get_categories( array( 'orderby' => 'name', 'parent' => 0, 'include' => $include ) ); // 顶部筛选链接 foreach ( $categories as $category ) { printf( '<a href="javascript:void(0)" data-category-id="%1$s" class="single-filter">%2$s</a>', esc_attr( $category->term_id ), esc_html( $category->name ) ); } ?> <div class="dropdown" style="float:right;"> <span class="dropbtn">More</span> <ul class="more-list"> <?php // 下拉菜单里的筛选链接（复用已获取的分类数据，不用重复查询） foreach ( $categories as $category ) { printf( '<li><a href="javascript:void(0)" data-category-id="%1$s" class="single-filter">%2$s</a></li>', esc_attr( $category->term_id ), esc_html( $category->name ) ); } ?> </ul> </div> </div> </div> <?php endif; }
2. 修改后端AJAX处理函数（支持分类参数，返回总页数）
更新sn_infinite_scroll_ajax函数，让它能接收分类ID参数，同时计算并返回当前分类下的总可加载页数，方便前端判断是否还有更多内容：
add_action( 'wp_ajax_sn_infinite_scroll_ajax', 'sn_infinite_scroll_ajax' ); add_action( 'wp_ajax_nopriv_sn_infinite_scroll_ajax', 'sn_infinite_scroll_ajax' ); function sn_infinite_scroll_ajax() { if ( ! is_singular() ) { check_ajax_referer( 'be-load-more-nonce', 'nonce' ); $excluded_ids = get_field('top_stories', 'option'); // 修复option的引号问题 $args = isset( $_POST['query'] ) ? array_map( 'esc_attr', $_POST['query'] ) : array(); $args['post_type'] = isset( $args['post_type'] ) ? esc_attr( $args['post_type'] ) : 'post'; $args['paged'] = esc_attr( $_POST['page'] ); $args['post_status'] = 'publish'; $args['post__not_in'] = $excluded_ids; // 新增：处理分类筛选参数 if ( isset( $args['category'] ) && ! empty( $args['category'] ) ) { $args['cat'] = esc_attr( $args['category'] ); } $pageType = esc_attr( $_POST['pageType'] ); if ( $pageType == "is-home" ) { $initial = 30; $ppp = 30; $columns = 3; } else { $initial = 30; $ppp = 30; $columns = 3; } $args['posts_per_page'] = $ppp; $args['offset'] = $initial + ( $ppp * ( $_POST['page'] ) ); ob_start(); $loop = new WP_Query( $args ); if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post(); sn_post_summary( $loop->current_post, $columns ); endwhile; endif; wp_reset_postdata(); $data = ob_get_clean(); // 计算总可加载页数（基于offset和每页数量） $total_posts = $loop->found_posts; $posts_after_initial = $total_posts - $initial; $maxpage = $posts_after_initial > 0 ? ceil( $posts_after_initial / $ppp ) : 0; // 返回文章HTML和总页数 wp_send_json_success( array( 'data' => $data, 'maxpage' => $maxpage ) ); } wp_die(); }
3. 更新前端JS（处理筛选点击，同步加载更多参数）
修改你的load-more.js，添加分类筛选的AJAX逻辑，同时更新加载更多的参数，确保筛选后加载更多基于当前分类请求：
jQuery(document).ready(function() { // 初始化当前页码 beloadmore.currentPage = 0; // 分类筛选点击事件 jQuery(document).on('click', '.single-filter', function(e) { e.preventDefault(); const categoryId = jQuery(this).data('category-id'); const $postContainer = jQuery('.your-post-container'); // 替换成你实际的文章容器选择器 const $loadMoreBtn = jQuery('.load-more-btn'); // 替换成你的加载更多按钮选择器 // 添加加载状态 $postContainer.addClass('loading'); $loadMoreBtn.hide(); // 发送AJAX请求获取分类文章 jQuery.ajax({ url: beloadmore.url, type: 'POST', data: { action: 'sn_infinite_scroll_ajax', nonce: beloadmore.nonce, query: { category: categoryId, post_type: 'post' }, page: 0, pageType: 'is-home' }, success: function(response) { if (response.success) { // 替换现有文章列表 $postContainer.html(response.data); // 更新全局查询参数（关键！让加载更多用这个分类） beloadmore.query = { category: categoryId, post_type: 'post' }; // 重置页码和总页数 beloadmore.currentPage = 0; beloadmore.maxpage = response.maxpage; // 控制加载更多按钮显示 if (beloadmore.currentPage < beloadmore.maxpage) { $loadMoreBtn.show().text('Load More').prop('disabled', false); } else { $loadMoreBtn.hide().text('No more posts'); } } $postContainer.removeClass('loading'); }, error: function() { $postContainer.removeClass('loading'); alert('Failed to load posts.'); } }); }); // 加载更多点击事件（更新为使用全局参数） jQuery(document).on('click', '.load-more-btn', function(e) { e.preventDefault(); const $btn = jQuery(this); const nextPage = beloadmore.currentPage + 1; // 判断是否还有更多页 if (nextPage >= beloadmore.maxpage) { $btn.text('No more posts').prop('disabled', true); return; } $btn.text('Loading...').prop('disabled', true); jQuery.ajax({ url: beloadmore.url, type: 'POST', data: { action: 'sn_infinite_scroll_ajax', nonce: beloadmore.nonce, query: beloadmore.query, // 使用更新后的查询参数 page: nextPage, pageType: 'is-home' }, success: function(response) { if (response.success) { // 追加新文章 jQuery('.your-post-container').append(response.data); // 更新当前页码 beloadmore.currentPage = nextPage; // 更新按钮状态 if (beloadmore.currentPage >= beloadmore.maxpage - 1) { $btn.text('No more posts').prop('disabled', true); } else { $btn.text('Load More').prop('disabled', false); } } else { $btn.text('Load More').prop('disabled', false); alert('Failed to load posts.'); } }, error: function() { $btn.text('Load More').prop('disabled', false); alert('Failed to load posts.'); } }); }); });
4. 关键注意事项
- 替换JS中的
.your-post-container为你实际存放文章的容器选择器（比如你的文章列表放在<div class="post-grid">里，就改成.post-grid） - 替换
.load-more-btn为你加载更多按钮的实际类名 - 如果你的首页初始文章数量不是30，要同步修改
$initial和$ppp的值，确保前后端逻辑一致
这样修改后，用户点击分类时会通过AJAX加载对应分类的文章，加载更多按钮会自动适配当前分类，继续加载该分类下的下一页内容，完美实现二者协同工作！
内容的提问来源于stack exchange，提问作者user2115227
相关产品推荐
相关产品推荐
