讲师中心 微信公众号
AI工具推荐 视频效率加速

为 WordPress 自定义分类法中的每个分类设置独立背景色

阿浩大大_6594

阿浩大大_6594

发布时间:2026-02-09 19:41:59

|

886人浏览过

|

来源于php中文网

原创

为 WordPress 自定义分类法中的每个分类设置独立背景色

本文详解如何在 wordpress 中动态获取文章所属分类的 slug 作为 css 类名,结合 css 实现每个分类拥有独特背景色,并正确显示分类名称,避免 `get_the_terms()` 返回空数组或索引错误。

在 WordPress 主题开发中,常需为不同分类(如自定义分类法 product_type 或默认分类 category)赋予视觉差异化样式——例如用不同背景色高亮显示文章所属类别。核心思路是:将分类的 slug 动态输出为 HTML 元素的 class 名,再通过 CSS 为每个 slug 定义专属样式。但直接使用 get_the_terms() 时易出现两个常见问题:

  • 未指定分类法参数导致返回空或错误数据;
  • 直接访问 $terms[0] 而未校验数组是否存在,引发 PHP 警告(如 Undefined offset)。

✅ 正确做法如下:

word报告自动生成神器
word报告自动生成神器

Word报告自动生成神器。自动生成专业Word文档报告,支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。

下载

1. 安全获取分类数据并遍历输出

<?php
// 指定文章 ID 和目标分类法(如 'category'、'topic' 或自定义分类法名)
$terms = get_the_terms( get_the_ID(), 'category' );

// 安全检查:确保有分类且无错误
if ( ! is_wp_error( $terms ) && ! empty( $terms ) ) :
    // 构建唯一类名前缀 + 所有分类 slug(支持多分类)
    $slug_classes = array();
    foreach ( $terms as $term ) {
        $slug_classes[] = sanitize_html_class( $term->slug );
    }
    $class_attr = 'post-category-badge ' . implode( ' ', $slug_classes );
    ?>
    <span class="<?php echo esc_attr( $class_attr ); ?>">
        Categories: 
        <?php 
        $names = array();
        foreach ( $terms as $term ) {
            $names[] = esc_html( $term->name );
        }
        echo implode( ', ', $names );
        ?>
    </span>
<?php endif; ?>
? 关键改进说明: 显式传入 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 类(如
  • 默认分类法名为 'category',若使用自定义分类法(如 product_tag),请替换 get_the_terms() 第二个参数;
  • 不要依赖 $post_terms[0]->cat_name —— cat_name 是旧版 WP_Query 的字段,标准分类对象属性应为 ->name;
  • 如需限制只显示首个分类,可在循环中 break,但推荐展示全部以提升信息完整性。

通过以上结构化实现,你既能安全输出动态类名,又能灵活扩展样式,真正实现“一分类一色彩”的专业视觉表达。

热门AI工具

更多
Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
java中break的作用
java中break的作用

本专题整合了java中break的用法教程,阅读专题下面的文章了解更多详细内容。

2960

2025.10.15

java break和continue
java break和continue

本专题整合了java break和continue的区别相关内容,阅读专题下面的文章了解更多详细内容。

807

2025.10.24

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

4176

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

306

2025.12.06

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

12105

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

5527

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

2516

2025.12.25

wordpress seo
wordpress seo

WordPress网站SEO优化方法有:1、选择一个SEO友好的主题,具有清晰的代码结构,快速的加载速度和响应式设计;2、使用SEO插件,优化你的标题标签,元描述,关键字,XML站点地图等;3、优化你的内容,内容是SEO优化的核心;4、优化你的网站速度;5、创建友好的URL;6、使用内部链接;7、优化图像;8、使用社交媒体;9、定期更新你的网站;10、监控和分析你的网站等等。

6115

2023.09.18

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何在 Windows 11 上安装 XAMPP
如何在 Windows 11 上安装 XAMPP

共1课时 | 223人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 12万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn