Изменить CSS постов в категории в Wordpress

Я новичок в Wordpress и CSS, надеюсь, вы, ребята, сможете мне помочь. Я хочу изменить положение сайта .site-branding из всех сообщений в определенной категории.

Я могу изменить site-branding в моем стиле. Мне нравится, но это влияет на весь сайт, включая все страницы, сообщения и категории.

.site-branding {
    left: 50%;
    position: absolute;
    top: 40%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

Надеюсь, вы, ребята, можете мне помочь.

Заранее спасибо.

Источник

5 ответов

Спасибо за усилия, но я немного помог и решил проблему.

Я добавил этот фильтр в мои functions.php

function pn_body_class_add_categories( $classes ) {

// Only proceed if we're on a single post page
if ( !is_single() )
    return $classes;

// Get the categories that are assigned to this post
$post_categories = get_the_category();

// Loop over each category in the $categories array
foreach( $post_categories as $current_category ) {

    // Add the current category's slug to the $body_classes array
    $classes[] = 'category-' . $current_category->slug;

}

// Finally, return the $body_classes array
return $classes;
}
add_filter( 'body_class', 'pn_body_class_add_categories' );

Этот фильтр добавит имя категории в качестве класса к body на отдельных постах.

Например, если категория называется Новости, она добавит category-news к телу как класс на отдельных постах.

Как только это будет сделано, вы можете использовать этот класс тела только для цели .site-branding на отдельные сообщения в категории новостей, как это:

.single.category-news .site-branding {
left: 20%;
}
Источник

WordPress дает вам возможность настроить таргетинг на категорию, добавив ее имя в таблицу стилей (обычно "category-x"), и тогда вы сможете уникальным образом настроить таргетинг на любую и все категории в вашем CSS.

Вот отличная пошаговая статья для нацеливания этого класса в вашем CSS.

Примером может быть:

<body class="archive category category-agriculture category-40">

С категорией сельское хозяйство является тем классом, на который вы хотите нацелиться следующим образом:

body.category-agriculture .site-branding {color: red;}
Источник

Wordpress может добавить категорию как класс к тегу body. Если это так для вашей темы, то вы можете добавить специальное правило CSS для категории.

.category .site-branding {
    /* your css rules here */
}
Источник

Для этого, я думаю, вам нужно будет добавить условное выражение PHP в ваш header.php, который проверяет, относится ли текущая публикация к этой конкретной категории, а затем добавить еще один класс к тегу логотипа, который меняет его положение.

Было бы что-то вроде этого:

<h1 class="site-branding <?php in_array( YOUR_CATEGORY_ID, get_the_category((get_the_ID()) ) ? ' new-posision' : '' ; ?>"></h1>
Источник

Для этого вам, скорее всего, понадобятся Javascript и Jquery.

Так что, если это ваша структура URL: www.mysite.com/home/category/,

(function($){
var $pathArray = window.location.pathname.split('/');
var $location = pathArray[2]
var $branding = $(".site-branding")
if ($location == 'cat1' || $location == 'cat2') {
    $branding.css({
        'left' : '50%',
        'position' : 'absolute',
        'top' : '40%',
        '-webkit-transform' : 'translate(-50%, -50%)',
        '-ms-transform' : 'translate(-50%, -50%)',
        'transform' : 'translate(-50%, -50%)'
    });
}
});

Предполагая, что вы запускаете дочернюю тему в своем экземпляре WordPress (а если нет, вам определенно следует), вы можете добавить этот скрипт в конец файла header.php.

Источник
Другие вопросы по тегам