WordPress自定义文章类型：将分类法转为CSS类用于筛选咨询

嘿，我看你已经搭建好了Portfolio自定义文章类型，还配置了portfolio_categories和portfolio_sector两个分类法，现在想把portfolio_categories的分类项提取出来作为CSS类，用来实现筛选功能对吧？我帮你把代码补全，并且拆解关键步骤，确保能用得顺手～

首先，先确认你的自定义文章类型查询是正确的，比如你需要先构建查询对象：

// 构建Portfolio文章的查询
$the_query = new WP_Query( array(
    'post_type'      => 'portfolio',
    'posts_per_page' => -1, // 显示所有Portfolio文章，按需调整
) );

接下来是你原来的循环部分，我帮你补全并优化，确保能安全地把分类slug转成CSS类：

<?php if ( $the_query->have_posts() ) : ?>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
        // 获取当前文章关联的portfolio_categories分类
        $termsArray = get_the_terms( $post->ID, 'portfolio_categories' );
        
        // 初始化CSS类字符串
        $category_classes = '';
        
        // 检查分类是否有效，避免触发WP错误
        if ( $termsArray && ! is_wp_error( $termsArray ) ) {
            // 快速提取所有分类的slug，用wp_list_pluck比手动循环更高效
            $term_slugs = wp_list_pluck( $termsArray, 'slug' );
            // 把slug用空格拼接成CSS类格式
            $category_classes = implode( ' ', $term_slugs );
        }
    ?>

    <!-- 输出带分类CSS类的文章容器 -->
    <div class="portfolio-item <?php echo esc_attr( $category_classes ); ?>">
        <!-- 这里放你的Portfolio内容，比如标题、缩略图、简介等 -->
        <h3><?php the_title(); ?></h3>
        <?php the_post_thumbnail( 'medium' ); ?>
        <div class="portfolio-excerpt"><?php the_excerpt(); ?></div>
    </div>

    <?php endwhile; ?>
    <!-- 必须重置post数据，恢复全局$post变量，避免后续查询出问题 -->
    <?php wp_reset_postdata(); ?>
<?php else : ?>
    <p>暂无Portfolio内容</p>
<?php endif; ?>

关键细节说明： #

• wp_list_pluck()：这个函数可以直接从分类对象数组中提取slug字段，比手动写foreach循环简洁多了
• esc_attr()：一定要用这个函数转义输出的CSS类，避免出现特殊字符或者XSS安全问题
• wp_reset_postdata()：循环结束后必须调用，不然全局的$post变量会停在最后一篇文章，影响后续的WordPress功能

如果你还需要做前端的筛选按钮，这里也给你一段代码，用来输出所有portfolio_categories分类作为筛选选项：

<!-- 筛选按钮区域 -->
<div class="portfolio-filters">
    <button class="filter-btn active" data-filter="*">全部作品</button>
    <?php
    // 获取所有有文章的portfolio_categories分类
    $filter_categories = get_terms( array(
        'taxonomy'   => 'portfolio_categories',
        'hide_empty' => true, // 只显示包含文章的分类
    ) );
    
    if ( $filter_categories && ! is_wp_error( $filter_categories ) ) {
        foreach ( $filter_categories as $cat ) {
            echo '<button class="filter-btn" data-filter=".'.$cat->slug.'">'.$cat->name.'</button>';
        }
    }
    ?>
</div>

这样前端就可以配合简单的JavaScript（或者用Isotope这类库）来实现点击筛选的功能啦，后端的分类转CSS类部分已经完全处理好咯～

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