更改 Wordpress 中某个类别中帖子的 CSS [英] Change CSS of posts in a category in Wordpress

问题描述

我是 Wordpress 和 CSS 的新手，希望你们能帮助我.我想更改特定类别下所有帖子的 sitelogo .site-branding 的位置.

I'm kinda new to Wordpress and CSS, I hope you guys can help me out. I want to change the position of the sitelogo .site-branding of all the posts under a specific category.

我可以根据自己的喜好更改 style.css 中的 site-branding，但这会影响整个网站，包括所有页面、帖子和类别.

I can change the site-branding in my style.css to my liking but it effects the whole site including all pages, posts and category's.

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

希望大家帮帮我.

提前致谢.

推荐答案

感谢您的努力，但我得到了一些帮助并解决了问题.

Thanks for the effort, but I have had a little help and fixed the problem.

我将此过滤器添加到我的functions.php

I added this filter to my 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 中.

That filter will add the category name as a class to the body on single posts.

例如，如果类别名为 News，它会将 category-news 作为单个帖子的类添加到正文中.

For example, if the category is called News, it will add category-news to the body as a class on single posts.

完成后，您可以使用该正文类仅针对新闻"类别中的单个帖子定位 .site-branding，如下所示:

Once that’s done, you can use that body class to only target .site-branding on single posts in the News category like this:

.single.category-news .site-branding {
left: 20%;
}

这篇关于更改 Wordpress 中某个类别中帖子的 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！