更改格颜色取决于类别页面上

Question

我用我的WordPress的环境中宇商贸插件，还有许多事情需要根据其类别更改DIV背景的颜色类别页面是你进来。

所以，我有喜欢在顶部的一面旗帜这是在“归档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

首先提取获取数据的变量与一些默认：

$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); 
} 

Answer 3

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

Answer 4

您可以执行以下操作：检查当前正在显示哪个类别，并相应地给0123'变量一个颜色。像这样：

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

然后调用在style设置你的div的$background，像这样：

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