根据类别页面更改 div 颜色

Question

我在我的 Wordpress 环境中使用 woo-commerce 插件，并且有一些类别页面，我需要根据您所在的类别更改 div 背景的颜色。

所以我喜欢在“archive-product.php”中找到顶部的横幅

div 被命名为'publicationsHeader'

当你是这样的类别页面时，我需要它来改变背景..

?product_cat=creative

我有点坚持最佳方法？

这是我的代码：

    <div class="publicationsHeader">
    <section>
        <div class="introLeft">
            <h2>Publications</h2>
                <h3 style="font-size: 1.2em;
color: #fff;
line-height: 28px;
padding-top: 20px">We write and produce current, practical and highly effective publications that teachers and pupils can use with immediate effect. All resources have been revised for the 2014/15 academic year.</h3>   
        </div>    
        <div class="introRight">  
            <a href="https://www.facebook.com/JaneConsidineEducation" target="_blank">
            <button style="background-image:url(img/facebookIcon.png)"></button>
            </a>        
            <a href="https://twitter.com/janeconsidine" target="_blank">
            <button style="background-image:url(img/twitterIcon.png)"></button>
            </a>    
        </div>
    </section>
</div>


.publicationsHeader{
    background-color: #e84b34;
    box-sizing:border-box;
    padding: 40px 0;
    height: auto;
    overflow:auto;
}

.publicationsHeader h2{
     font-size:3em; 
     color: #fff;
     text-shadow: 0px 4px 1px rgba(0, 0, 0, 0.3);
}

.publicationsHeaderLeft{
    background-color: #fff; 
    box-sizing: border-box; 
    padding:40px 20px; 
    float:left; 
    width: 50%;
}

.publicationsHeaderLeft input{
    border: solid #ccc thin;
    width:95%;
    font-size:16px;
    padding: 10px 5px;
    margin: 10px 0;
}

.publicationsHeaderLeft textarea{
    border: solid #ccc thin;
    width:95%;
    font-size:16px;
    padding: 10px 5px;
    margin: 10px 0;
    resize:vertical;
}

.publicationsHeadereft button{
    background-color: #ec4a2c;
    border: none;
    color: #fff;
    padding: 10px 20px 10px 20px;
    font-size:16px; 
}

.publicationsHeaderRight{
    background-color: #fff; 
    box-sizing: border-box; 
    padding:40px 20px 160px 20px; 
    float:right; 
    width: 50%; 
}

.publicationsHeaderRight li{
    padding: 5px 0;
}

Answer 1

为什么不直接使用body_class() 函数呢？它将一堆类名添加到您的 body 标签中，以反映当前页面；在 WooCommerce 的情况下，它将为 .woocommerce、tax-product_cat 添加类以及标识该特定类别的类，例如：.term-my-product-cat。

使用这些您可以非常简单地设置所有样式：

.publicationsHeader{
    background-color: #e84b34; /* Default colour */
}
.term-product-cat-1 .publicationsHeader {
    background-color: red; /* Change background for header for category 1 only */
}
.term-product-cat-2 .pulicationsHeader {
    background-color:blue; /* Change background for category 2 */
}

你可以read more about body_class() here.

Answer 2

您可以执行以下操作：检查当前显示的类别并相应地为 $background 变量指定颜色。像这样：

if(is_product_category('creative')){
$background = "#ffffff";
}

然后在你的div的stylesetting中调用$background，像这样：

<div id="publicationsHeader" style="background-color: <?php echo $background; ?>">Content goes here</div>

Answer 3

您可以 grep 参数 $_GET["product_cat"] 并将其包装在 if 子句中，以通过 javaScript 设置 publicationHeader 的 css 类。

Answer 4

首先在一个带有一些默认值的变量中获取获取数据：

$pcat = empty($_GET['product_cat']) ? 'default' : $_GET['product_cat'];

然后让你的 div 像这样：

<div id="publicationsHeader" class="<?php echo $pcat;?>">
</div>

像这样在你的 css 文件中定义一个类：

.creative {
    background: url(images/creative.png);
}
.default {
    background: url(images/default.png);
}