Question

我在我的Wordpress环境中使用了woo-commerce插件，我需要根据您所在的类别更改div背景的颜色。

所以我喜欢在顶部找到一个横幅，它位于＆＃39; archive-product.php＆＃39;

div命名为＆＃39; publicationsHeader＆＃39;

当你是类似页面时，我需要它来改变背景..

?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

首先使用默认值获取变量中的get数据：

$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 2

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

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

然后在您的div的$background设置中调用style，如下所示：

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

Answer 3

为什么不使用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 4

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

根据类别页面更改div颜色

4 个答案: