更改格顏色取決於類別頁面上

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>