Question

我试图在Woocommerce中隐藏/交换徽标和菜单项颜色，但无济于事。基本上我的大多数网站都使用标准导航，但我想在所有商店相关页面上显示不同的徽标和不同的导航颜色。所以隐藏一个，然后显示另一个，具体取决于页面。

由于我的导航是透明的，我只想在商店页面上这样做。我知道我可以通过条件标签来定位页面（例如

is_product_category()

但不确定如何将所有内容全部写入以定位这些页面并交换/隐藏上述内容。我正在使用Divi主题。如有必要，我可以提供图像以供澄清......

感谢Wordpress头的帮助!!感谢

修改＆gt;

<?php
    // This is targeting the front page as set in Dashboard => Settings => Reading and uses the logo as setup in Divi Options.
    if ( is_front_page( )) {    

 ?>
    <?php
        $logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
            ? $user_logo
            : $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
    ?>
        <div class="logo_container">
            <span class="logo_helper"></span>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
            </a>
        </div> 

 <?php
     //This is targeting the page with the slug page-name-slug.
    } elseif ( is_page( 'botanical-collection' ) ) {    
?>

    <div class="logo_container">
        <span class="logo_helper"></span>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img class="custom-logo" src="/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
        </a>
    </div> 

<?php
     //This is targeting the page with the id 724.
    } elseif ( is_page( '724' ) ) { //can use page id or slug
?>

    <div class="logo_container">
        <span class="logo_helper"></span>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img class="custom-logo" src="https://www.example.com/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
        </a>
    </div> 

<?php
     //This is what we show if previous conditions are not met. In this case, it defaults back to the logo as set in Divi options.

} else { 
?>
<?php
    $logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
        ? $user_logo
        : $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
?>
    <div class="logo_container">
        <span class="logo_helper"></span>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
        </a>
    </div> 

<?php
}   
?>

Answer 1

我知道有两种方法可以做到：

1）条件标签：

使用wordpress和woocommerce条件标签，您将在挂钩功能（在您的活动主题的function.php文件中）或直接在wordpress或woocommerce模板中使用。

示例： is_shop() ， is_product_category() ， is_product_tag( ）， is_product() ， is_cart() ， is_checkout() ......

例如，您可以有条件地将类或ID添加到模板中的html标记。

用法示例：

<?php
// Shop page
if (is_shop()) 
    $class = ' the-shop';

// single products
if (is_product())
    $class = ' single-product';

// Cart page
if (is_cart())
    $class = ' the-cart';
?>

<div class="some-class<?php $class; ?>">
    <a href="/some-link">Click me</a>
</div>

然后，例如，对于商店页面，您将获得此生成的代码：

<div class="some-class the-shop">
    <a href="/some-link">Click me</a>
</div>

然后，您就可以在CSS文件中使用 the-shop 类来显示/隐藏，进行更改......

也可以构建自定义条件函数...

2）CSS类：

使用 CSS基于正文CSS类 （以及其他一些CSS类），这些特定于woocommerce页面。当您在网站的WooCommerce前端页面中导航时，您可以使用浏览器的开发人员工具发现它们。

在特定于WoocommerCe商店页面的正文类中，您将获得此类，例如：

<body class="archive post-type-archive post-type-archive-product woocommerce woocommerce-page">

您可以在子主题的 style.css 文件中使用来显示/隐藏DOM元素......

建议：使用儿童主题要好得多。

根据您的更新更新

我已在您的代码中插入 is_shop() 条件标记

<?php
    // This is targeting the front page as set in Dashboard => Settings => Reading and uses the logo as setup in Divi Options.
    if ( is_front_page( )) {    

 ?>
    <?php
        $logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
            ? $user_logo
            : $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
    ?>
        <div class="logo_container">
            <span class="logo_helper"></span>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
            </a>
        </div> 

 <?php
     // ### HERE ==> THE WOOCOMMERCE SHOP PAGE (YOU CAN EDIT THE CODE BELOW)
    } elseif ( is_shop() ) {    
?>

    <div class="logo_container">
        <span class="logo_helper"></span>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img class="custom-logo" src="/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
        </a>
    </div> 

 <?php
     //This is targeting the page with the slug page-name-slug.
    } elseif ( is_page( 'botanical-collection' ) ) {    
?>

    <div class="logo_container">
        <span class="logo_helper"></span>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img class="custom-logo" src="/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
        </a>
    </div> 

<?php
     //This is targeting the page with the id 724.
    } elseif ( is_page( '724' ) ) { //can use page id or slug
?>

    <div class="logo_container">
        <span class="logo_helper"></span>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img class="custom-logo" src="https://www.example.com/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
        </a>
    </div> 

<?php
     //This is what we show if previous conditions are not met. In this case, it defaults back to the logo as set in Divi options.

} else { 
?>
<?php
    $logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
        ? $user_logo
        : $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
?>
    <div class="logo_container">
        <span class="logo_helper"></span>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
        </a>
    </div> 

<?php
}   
?>

参考文献：

定位Woocommerce商店页面菜单

1 个答案: