WordPress自定义作品集分类筛选功能故障排查求助

看起来你的作品集筛选功能失效主要是几个关键代码逻辑和结构的问题，我帮你拆解并修正：

核心问题分析 #

• 分类获取逻辑错误：你用wp_get_post_terms($post->ID, $taxonomy)获取分类，这只会拿到当前页面（比如你放这段代码的页面）所属的casestudy-cates分类，而不是所有的作品集分类，导致筛选按钮显示不全或者错误。
• HTML结构混乱：筛选按钮区域混了<li>和<button>标签，没有统一结构，而且data-filter的值缺少类选择器前缀（比如.slug），大多数筛选插件（如Isotope）需要这种格式来匹配元素。
• 重复输出内容：你代码里先输出了全部作品集，又循环分类输出对应作品，导致页面内容重复，筛选逻辑完全混乱。
• 分类法名称拼写错误：Tax Query里写的'taxonomy' => 'casestudy_cates'，但你注册的分类法是casestudy-cates（连字符），导致分类查询失效。
• 不规范的查询函数：使用query_posts()会干扰WordPress主查询，推荐用WP_Query替代。

修正后的完整代码 #

自定义文章类型与分类法（小优化，核心逻辑不变） #

/**Case Study Custom Post Type**/
function casestudy_posttype() {
    $args = array(
        'public' => true,
        'label' => __( 'Case Study', 'text-domain' ), // 增加文本域便于国际化
        'menu_icon' => 'dashicons-category',
        'supports' => array( 'title', 'editor', 'thumbnail' ), // 用array()写法更规范
        'has_archive' => true, // 可选：开启作品集归档页面
    );
    register_post_type( 'casestudy', $args );
}
add_action( 'init', 'casestudy_posttype' );

function casestudy_cates() {
    $args = array(
        'label' => __( 'Case Study Categories', 'text-domain' ),
        'rewrite' => array( 'slug' => 'casestudy-category' ),
        'hierarchical' => true,
        'show_admin_column' => true, // 可选：在文章列表页显示分类列
    );
    register_taxonomy( 'casestudy-cates', 'casestudy', $args );
}
add_action( 'init', 'casestudy_cates' );
/**END CUSTOM POST TYPE FOR case study **/

页面展示与筛选代码（重点修正） #

<!-- case_study_area -->
<div class="case_study_area case_page">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="portfolio-menu text-center">
                    <?php 
                    $taxonomy = 'casestudy-cates';
                    // 获取所有非空的作品集分类
                    $terms = get_terms( array(
                        'taxonomy' => $taxonomy,
                        'hide_empty' => true,
                    ) );
                    if ( $terms && !is_wp_error( $terms ) ) : ?>
                        <button class="active" data-filter="*">All</button>
                        <?php foreach ( $terms as $term ) : ?>
                            <button data-filter=".<?php echo esc_attr( $term->slug ); ?>"><?php echo esc_html( $term->name ); ?></button>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <div class="row grid">
            <?php 
            // 使用WP_Query替代query_posts，避免干扰主查询
            $case_query = new WP_Query( array(
                'post_type' => 'casestudy',
                'order' => 'ASC',
                'posts_per_page' => -1, // 显示所有作品，可按需调整数量
            ) );
            if ( $case_query->have_posts() ) : 
                while ( $case_query->have_posts() ) : $case_query->the_post(); 
                    // 获取当前作品的所有分类slug，用于添加到元素类中
                    $term_slugs = wp_list_pluck( wp_get_post_terms( get_the_ID(), 'casestudy-cates' ), 'slug' );
                    $item_classes = 'col-xl-4 grid-item ' . implode( ' ', $term_slugs );
                ?>
                    <div class="<?php echo esc_attr( $item_classes ); ?>">
                        <div class="single_case">
                            <div class="case_thumb">
                                <?php the_post_thumbnail(); ?>
                            </div>
                            <div class="case_heading">
                                <?php 
                                $terms = wp_get_post_terms( get_the_ID(), 'casestudy-cates' );
                                if ( $terms && !is_wp_error( $terms ) ) : ?>
                                    <?php foreach ( $terms as $serv_term ) : ?>
                                        <span><?php echo esc_html( $serv_term->name ); ?></span>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                            </div>
                        </div>
                    </div>
                <?php 
                endwhile; 
                wp_reset_postdata(); // 重置查询，恢复主查询状态
            else : ?>
                <p><?php _e( 'No case studies found.', 'text-domain' ); ?></p>
            <?php endif; ?>
        </div>
    </div>
</div>
<!-- /case_study_area -->

额外说明 #

1. 筛选功能的JS依赖：上面的HTML结构适配常见的筛选插件（比如Isotope），你需要确保页面引入对应JS库，并添加初始化代码（可放在主题JS文件中）：

jQuery(document).ready(function($){
    // 初始化Isotope筛选
    var $grid = $('.grid').isotope({
        itemSelector: '.grid-item',
        layoutMode: 'fitRows'
    });
    // 筛选按钮点击事件
    $('.portfolio-menu button').on('click', function(){
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
        // 切换激活状态样式
        $('.portfolio-menu button').removeClass('active');
        $(this).addClass('active');
    });
});

2. 安全优化：使用esc_attr()和esc_html()转义输出内容，避免XSS漏洞。
3. 文本域：添加text-domain便于主题国际化，不需要的话可以直接移除。

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