时间戳

首页 > 解决方案 > 如何在 Wordpress CSS 样式表中减少类

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

问题描述

我想知道如何在 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。

感谢您的投入。

标签： csswordpressless

解决方案

将以下或类似的代码添加到您的functions.php文件中。<body>然后，当帖子 ID 在$ids数组中时，这将为页面的标签添加一个类。

或者，您可以修改它以针对具有特定自定义元属性或类别等的帖子/页面。

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 {
    // ...
}

推荐阅读