实现帖子总数达标时隐藏加载更多按钮的技术问题

方案1：直接在分类点击时传递总数到JavaScript #

你已经在PHP中计算出了每个分类的帖子总数，直接把这个数值作为参数传给filterPosts函数即可：

1. 修改PHP中的分类链接代码，把总数作为第二个参数传入：

<!-- 子分类 -->
<li :class="category == <?php echo $category->term_id; ?> ? 'child' : ''">
    <a class="child" @click="filterPosts(<?= $category->term_id; ?>, <?= $total_posts_child; ?>)">
        <?= esc_html($category->name); ?> (<?= $total_posts_child; ?>)
    </a>
</li>

<!-- 父分类 -->
<li :class="category == <?php echo $category->term_id; ?> ? 'parent' : ''">
    <a class="parent" @click="filterPosts(<?= $category->term_id; ?>, <?= $total_posts_parent; ?>)">
        <?= esc_html($category->name); ?> (<?= $total_posts_parent; ?>)
    </a>
</li>

2. 更新JavaScript中的filterPosts方法，接收总数参数并赋值：

filterPosts(id, total) {
    this.showDefault = false;
    this.showFiltered = true;
    this.category = id;
    this.offset = 0;
    this.total = total; // 使用传递过来的真实总数
    this.fetchPosts();
},

方案2：优化AJAX接口，让后端返回对应条件的总数（推荐） #

直接传递参数可能存在前端篡改风险，更可靠的方式是每次请求帖子时，让后端同时返回当前条件下的总帖子数：

1. 修改WordPress的AJAX处理函数（主题functions.php或自定义插件中）：

add_action('wp_ajax_filterPosts', 'filterPosts_callback');
add_action('wp_ajax_nopriv_filterPosts', 'filterPosts_callback');

function filterPosts_callback() {
    // 接收并验证前端参数
    $limit = isset($_POST['limit']) ? intval($_POST['limit']) : 6;
    $offset = isset($_POST['offset']) ? intval($_POST['offset']) : 0;
    $category = isset($_POST['category']) ? intval($_POST['category']) : 0;
    $post_type = isset($_POST['post_type_js']) ? sanitize_text_field($_POST['post_type_js']) : 'post';

    // 查询当前分页的帖子
    $post_args = array(
        'numberposts' => $limit,
        'offset' => $offset,
        'category' => $category,
        'post_type' => $post_type,
        'post_status' => 'publish'
    );
    $posts = get_posts($post_args);

    // 查询符合条件的总帖子数（仅取ID提高性能）
    $count_args = array(
        'numberposts' => -1,
        'category' => $category,
        'post_type' => $post_type,
        'post_status' => 'publish',
        'fields' => 'ids'
    );
    $total_posts = count(get_posts($count_args));

    // 返回JSON数据
    wp_send_json(array(
        'posts' => $posts,
        'total' => $total_posts
    ));
    wp_die();
}

2. 更新JavaScript的fetchPosts方法，接收后端返回的总数：

fetchPosts(append = false) {
    var formData = new FormData();
    formData.append("action", "filterPosts");
    formData.append("limit", this.limit);
    formData.append("post_type_js", this.post_type_js);
    formData.append("offset", this.offset); 

    if (this.category) {
        formData.append("category", this.category);
    }

    fetch(adminURL, {
        method: "POST",
        body: formData,
    })
    .then((res) => res.json())
    .then((res) => {
        this.total = res.total; // 更新总数
        if (append) {
            this.posts = this.posts.concat(res.posts);
        } else {
            this.posts = res.posts;
        }
        this.loading = false;
    });
},

3. 移除loadMore和filterPosts中的硬编码this.total = 8，确保总数始终来自后端。

修正加载更多按钮的显示逻辑 #

当前的x-show逻辑可以优化得更直观，直接判断已加载的帖子数是否小于总数：

<div @click="loadMore()" x-show="posts.length < total" class="text-center pt-4">
    <button class="border border-solid border-slate-700 text-slate-100 hover:bg-slate-800 px-4 py-2"> Load More </button>
</div>

额外优化 #

• 移除冗余的getTotal函数，因为现在每次fetchPosts都会返回总数，不需要单独请求。
• 初始化时直接调用fetchPosts()，即可获取初始状态的帖子和总数。

内容的提问来源于stack exchange，提问作者Beep