本文详解如何在 wordpress 中动态获取文章所属分类的 slug 作为 css 类名，结合 css 实现每个分类拥有独特背景色，并正确显示分类名称，避免 `get_the_terms()` 返回空数组或索引错误。
在 WordPress 主题开发中，常需为不同分类（如自定义分类法 product_type 或默认分类 category）赋予视觉差异化样式——例如用不同背景色高亮显示文章所属类别。核心思路是：将分类的 slug 动态输出为 HTML 元素的 class 名，再通过 CSS 为每个 slug 定义专属样式。但直接使用 get_the_terms() 时易出现两个常见问题：
- 未指定分类法参数导致返回空或错误数据；
- 直接访问 $terms[0] 而未校验数组是否存在，引发 PHP 警告（如 Undefined offset）。
✅ 正确做法如下：
1. 安全获取分类数据并遍历输出
slug );
}
$class_attr = 'post-category-badge ' . implode( ' ', $slug_classes );
?>
Categories:
name );
}
echo implode( ', ', $names );
?>
? 关键改进说明： 显式传入 get_the_ID() 和分类法名称（不可省略），避免依赖全局 $post； 使用 is_wp_error() 和 ! empty() 双重校验，防止致命错误； 用 sanitize_html_class() 处理 slug，确保生成合法 CSS 类名（如 my-category-name → my-category-name，而非含空格/特殊字符）； esc_attr() 和 esc_html() 分别用于属性值与文本内容，保障 XSS 安全。
2. CSS 部分：为每个分类 slug 定义背景色
.post-category-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 4px;
font-size: 0.85em;
font-weight: 600;
color: white;
margin-right: 6px;
}
/* 为各分类单独设置背景色 */
.post-category-badge.news { background-color: #3498db; }
.post-category-badge.tutorial { background-color: #2ecc71; }
.post-category-badge.tip { background-color: #e67e22; }
.post-category-badge.announcement { background-color: #e74c3c; }
/* 支持多分类时的叠加效果（可选）*/
.post-category-badge.news.tutorial { background-color: #9b59b6; } /* 紫色混合 */⚠️ 注意事项
- 若文章属于多个分类，上述代码会同时添加多个 slug 类（如 ），CSS 层叠规则下后声明的类优先级更高，建议按业务逻辑设计覆盖关系；
- 默认分类法名为 'category'，若使用自定义分类法（如 product_tag），请替换 get_the_terms() 第二个参数；
- 不要依赖 $post_terms[0]->cat_name —— cat_name 是旧版 WP_Query 的字段，标准分类对象属性应为 ->name；
- 如需限制只显示首个分类，可在循环中 break，但推荐展示全部以提升信息完整性。
通过以上结构化实现，你既能安全输出动态类名，又能灵活扩展样式，真正实现“一分类一色彩”的专业视觉表达。
