Change CSS of posts in a category in Wordpress

2019-08-26 20:12发布

站内问答 / HTML/CSS
715 5 5

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.

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%);

Hope you guys can help me out.

Thanks in advance.

标签： css wordpress
举报
5条回答
趁早两清
2楼-- · 2019-08-26 20:50

You will likely need Javascript and Jquery for this.

So if this is your URL structure: 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%)'
    });
}
});

Assuming you are running a child theme on your wordpress instance (which if you are not, you definitely should) you can add this script at the bottom of your header.php file.

查看更多
0人赞 添加讨论(0) 举报
干净又极端
3楼-- · 2019-08-26 20:52

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

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' );

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

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

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%;
}
查看更多
0人赞 添加讨论(0) 举报
欢心
4楼-- · 2019-08-26 20:53

WordPress gives you the ability to target the category by adding its name to your stylesheet (usually "category-x") and then you can uniquely target any and all categories in your css.

Here's a great step by step article for targeting this class in your css.

An example might be: 

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

With category-agriculture being the class you want to target like so: 

body.category-agriculture .site-branding {color: red;}
查看更多
0人赞 添加讨论(0) 举报
走好不送
5楼-- · 2019-08-26 20:54

For that I think you will have to add a PHP conditional in your header.php that checks if the current post is in that specific category, and then add another class to your logo tag that changes it's position.

Would be something like this:

<h1 class="site-branding <?php in_array( YOUR_CATEGORY_ID, get_the_category((get_the_ID()) ) ? ' new-posision' : '' ; ?>"></h1>
查看更多
0人赞 添加讨论(0) 举报
做自己的国王
6楼-- · 2019-08-26 21:14

Wordpress may add category as a class to body tag. If it is so for your theme than you may add specific css rule for category.

.category .site-branding {
    /* your css rules here */
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)