Как LESS классы в таблице стилей Wordpress CSS - PullRequest
Новая
       8

Как LESS классы в таблице стилей Wordpress CSS

0 голосов
/ 11 октября 2018

Мне интересно, как сгруппировать или LESS классы в CSS WordPress, например, у меня есть много страниц, чтобы добавить следующий стиль, и это занимает очень много времени, чтобы скопировать и вставить конечные части классов:

.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;
    }
}

Это позволяет мне эффективно добавлять идентификаторы страниц.

Оцените ваши входные данные.

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Добавьте следующий или подобный код в ваш файл functions.php.Затем будет добавлен класс к тегу <body> для страницы, когда идентификатор сообщения находится в массиве $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 {
    // ...
}
0 голосов
/ 11 октября 2018

Не можете ли вы применить класс ко всем сообщениям / страницам, которые вы хотели бы стилизовать?

Что-то общее, например .main

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

или если вы не против применитьэтот стиль во всех .header_bottom тогда просто 

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