如何在 Wordpress CSS 样式表中减少类

Question

我想知道如何在 wordpress CSS 中分组或 LESS 类，例如，我有很多页面要添加以下样式，而且必须非常耗时复制并粘贴类:

的末尾部分

.page-id-16592 .header_bottom, 
.page-id-16663 .header_bottom, 
.page-id-16664 .header_bottom, 
.page-id-16665 .header_bottom, 
.page-id-16666 .header_bottom,
.page-id-16601 .header_bottom,
.postid-16728 .header_bottom,
.postid-16722 .header_bottom,
.postid-16725 .header_bottom,
.postid-16727 .header_bottom {
    background-color: #222 !important;
}

我尝试过以下操作但没有成功：

.page-id-16592, .page-id-16663, 
.page-id-16664, .page-id-16665, 
.page-id-16666, .page-id-16601, 
.postid-16728, .postid-16722, 
.postid-16725, .postid-16727 {
    .header_bottom {
        background-color: #222 !important;
    }
}

这让我可以高效地添加页面 ID。

感谢您的意见。

Answer 1

你不能对所有 posts/pages 想要设置样式的人应用 class 吗？

像 .main

这样的通用词

.main .header_bottom {
    background-color: #222 !important;
}

或者如果您不介意在所有 .header_bottom 中应用此样式，那么只需

.header_bottom {
    background-color: #222 !important;
}

Answer 2

将以下或类似代码添加到您的 functions.php 文件中。当 post ID 在 $ids 数组中时，这将向页面的 <body> 标记添加一个 class。

或者，您可以将其修改为 post/pages 具有特定自定义元属性或类别等的目标

add_filter('body_class', function (array $classes) {
    // Prepare your target ids
    $ids = [16592, 16663, 16664, 16665, 16666, 16601, 16728, 16722, 16725, 16727];

    if (in_array(get_the_ID(), $ids)) {
        $classes[] = 'my-custom-class';
    }

    return $classes;
});

然后在您的 CSS 中，您可以使用以下方法定位那些特定页面：

.my-custom-class .header_bottom {
    // ...
}

如何在 Wordpress CSS 样式表中减少类

How to LESS classes in a Wordpress CSS stylesheet

css

wordpress

less

如何在 Wordpress CSS 样式表中减少 类

How to LESS classes in a Wordpress CSS stylesheet

css

wordpress

less

如何在 Wordpress CSS 样式表中减少类