通过WordPress functions.php按文章分类设置Elementor内容背景色

核心思路是给Elementor渲染的文章容器添加分类专属CSS类，再通过自定义CSS匹配类名设置背景色，新增文章只要属于目标分类就会自动应用规则。

1. 添加分类标识类（functions.php） #

将以下代码添加到主题的functions.php文件中：

// 为Elementor文章模块添加分类专属CSS类
add_action( 'elementor/frontend/post/class_names', 'add_category_bkg_class_to_elementor_post', 10, 3 );
function add_category_bkg_class_to_elementor_post( $class_names, $post, $settings ) {
    $categories = get_the_category( $post->ID );
    if ( empty( $categories ) ) return $class_names;

    foreach ( $categories as $category ) {
        // 替换为你实际的分类别名（slug）
        switch ( $category->slug ) {
            case 'red-cat':
                $class_names[] = 'category-red-bkg';
                break;
            case 'green-cat':
                $class_names[] = 'category-green-bkg';
                break;
            case 'blue-cat':
                $class_names[] = 'category-blue-bkg';
                break;
        }
    }
    return $class_names;
}

// 为单篇文章页面的body添加分类类（适配Elementor编辑的单页）
add_filter( 'body_class', 'add_category_bkg_class_to_single_post_body' );
function add_category_bkg_class_to_single_post_body( $classes ) {
    if ( is_single() && get_post_type() === 'post' ) {
        $categories = get_the_category();
        if ( ! empty( $categories ) ) {
            foreach ( $categories as $category ) {
                switch ( $category->slug ) {
                    case 'red-cat':
                        $classes[] = 'single-post-red-bkg';
                        break;
                    case 'green-cat':
                        $classes[] = 'single-post-green-bkg';
                        break;
                    case 'blue-cat':
                        $classes[] = 'single-post-blue-bkg';
                        break;
                }
            }
        }
    }
    return $classes;
}

注意：代码中的slug需要替换成你WordPress后台对应分类的实际别名（比如RED Cat的slug可能是red-cat，在分类编辑页面可查看）。

2. 添加背景色样式 #

将以下CSS添加到主题的自定义CSS面板（或style.css文件）：

/* Elementor文章列表模块的内容背景 */
.category-red-bkg .elementor-post__content {
    background-color: #ff4444;
    padding: 15px; /* 可选，避免内容贴边 */
}

.category-green-bkg .elementor-post__content {
    background-color: #4CAF50;
    padding: 15px;
}

.category-blue-bkg .elementor-post__content {
    background-color: #2196F3;
    padding: 15px;
}

/* 单篇文章页面的内容背景（Elementor编辑的页面） */
.single-post-red-bkg .elementor-widget-post-content {
    background-color: #ff4444;
    padding: 20px;
}

.single-post-green-bkg .elementor-widget-post-content {
    background-color: #4CAF50;
    padding: 20px;
}

.single-post-blue-bkg .elementor-widget-post-content {
    background-color: #2196F3;
    padding: 20px;
}

补充说明 #

• 若你的Elementor模块结构不同，可通过浏览器开发者工具查看内容容器的类名，替换CSS中的选择器。
• 颜色值可根据需求自定义（十六进制、RGB、颜色名称均可）。
• 新增文章只要分配到目标分类，会自动触发规则，无需额外配置。

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