在 Wordpress 中更改类别中帖子的 CSS答案

【问题标题】：Change CSS of posts in a category in Wordpress在 Wordpress 中更改类别中帖子的 CSS
【发布时间】：2017-04-12 23:06:20
【问题描述】：

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

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

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

希望大家能帮帮我。

提前致谢。

【问题讨论】：

请在小提琴中发布一个链接或来自源代码（html/code）的东西。
您应该能够通过正文中的类来定位特定类别页面。假设您在主题中使用 body_class()。

标签： css wordpress

【解决方案1】：

WordPress 使您能够通过将其名称添加到样式表（通常是“category-x”）来定位类别，然后您可以唯一地定位 CSS 中的任何和所有类别。

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

一个例子可能是：

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

将 category-agriculture 作为您要定位的类，如下所示：

body.category-agriculture .site-branding {color: red;}

【讨论】：

【解决方案2】：

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

我将此过滤器添加到我的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%;
}

【讨论】：

【解决方案3】：

为此，您可能需要 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 文件的底部添加这个脚本。

【讨论】：

【解决方案4】：

为此，我认为您必须在 header.php 中添加一个 PHP 条件来检查当前帖子是否属于该特定类别，然后将另一个类添加到您的徽标标签以更改其位置。

应该是这样的：

<h1 class="site-branding <?php in_array( YOUR_CATEGORY_ID, get_the_category((get_the_ID()) ) ? ' new-posision' : '' ; ?>"></h1>

【讨论】：

【解决方案5】：

Wordpress 可以将类别作为类添加到正文标签。如果您的主题是这样，那么您可以为类别添加特定的 css 规则。

.category .site-branding {
    /* your css rules here */
}

【讨论】：