如何修改WordPress Ajax筛选脚本：将下拉框改为按钮

没问题，我帮你把下拉筛选改成按钮形式，其实核心就是调整前端的触发逻辑和值的获取方式，后端PHP代码完全不用动，咱们一步步来：

把原来的下拉选择框替换成按钮组，每个按钮对应一个分类，用data-category属性存储分类ID，方便JS获取：

<div class="filter-wrap">
    <div class="category">
        <?php $get_categories = get_categories(array('hide_empty' => 0)); ?>
        <!-- 默认选中的"全部"按钮 -->
        <button class="js-category-btn active" data-category="all">alles</button>
        <?php if ( $get_categories ) : foreach ( $get_categories as $cat ) : ?>
            <button class="js-category-btn" data-category="<?php echo $cat->term_id; ?>">
                <?php echo $cat->name; ?>
            </button>
        <?php endforeach; endif; ?>
    </div>
</div>
<div class="filtered-posts">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
        get_template_part( 'includes/content-post' );
    endwhile; endif; ?>
</div>

给选中的按钮加高亮样式，让用户能直观看到当前筛选的分类，在主题的CSS文件里添加：

.js-category-btn {
    padding: 8px 16px;
    margin: 0 4px 8px 0;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
.js-category-btn.active {
    background: #0073aa; /* 可以换成你的主题主色调 */
    color: #fff;
    border-color: #0073aa;
}
.js-category-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

把原来监听下拉框change事件的逻辑，改成监听按钮的click事件，同时从按钮的data-category属性取值，还要处理按钮的选中状态：

jQuery(document).ready(function($) {
    // 监听分类按钮点击
    $(document).on("click", ".js-category-btn", function() {
        // 更新按钮选中状态
        $('.js-category-btn').removeClass('active');
        $(this).addClass('active');
        
        // 获取当前选中的分类ID
        var category = $(this).data('category');
        // 如果保留日期筛选，这里按原来的方式取值即可；如果日期也改按钮，逻辑和分类一致
        var date = $('.js-date').val();
        
        // 构造AJAX请求数据
        const data = {
            'action': 'filterposts',
            'category': category,
            'date': date
        };
        
        // 发送请求（这部分和原逻辑基本一致）
        $.ajax({
            url: ajaxurl,
            data: data,
            type: 'POST',
            beforeSend: function() {
                $('.filtered-posts').html('Laden...');
                // 禁用所有按钮防止重复点击
                $('.js-category-btn').attr('disabled', 'disabled');
                $('.js-date').attr('disabled', 'disabled');
            },
            success: function(data) {
                if (data?.projecten) {
                    $('.filtered-posts').html(data.projecten);
                } else {
                    $('.filtered-posts').html('Helaas, er zijn geen projecten gevonden.');
                }
                // 恢复按钮可用状态
                $('.js-category-btn').removeAttr('disabled');
                $('.js-date').removeAttr('disabled');
            }
        });
    });
});

你尝试用input:radio时失效，大概率是因为取值逻辑不对——原代码直接用$('.js-category').val()，但radio需要定位到被选中的那个选项才能拿到值，正确写法应该是$('.js-category:checked').val()。相比之下，用按钮+data属性的方式更直观，也更容易处理选中状态的视觉反馈。

如果你的日期筛选也想换成按钮形式，逻辑和分类完全一致：

• 把日期下拉改成按钮组，每个按钮添加data-date="new"或data-date="old"属性
• JS里改成监听.js-date-btn的点击事件，用$(this).data('date')获取值，同时处理active状态

你的functions.php里的代码完全不用动，因为后端只关心category参数的取值，不管这个值是从下拉、radio还是按钮传过来的，只要值正确就能正常筛选。

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