定位 Woocommerce 商店页面菜单

Question

我正在尝试 hide/swap Woocommerce 中的徽标和菜单项颜色，但无济于事。基本上我的大部分网站都使用标准导航，但我希望在所有与商店相关的页面上显示不同的徽标和不同的导航颜色。所以隐藏一个然后显示另一个，具体取决于页面。

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

is_product_category()

但不确定如何编写所有内容以定位这些页面以及 swap/hide 以上页面。我正在使用 Divi 主题。如有必要，我可以提供图片进行说明...

感谢 Wordpress 负责人的帮助！！谢谢

编辑 >

<?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

I know 2 ways to do it:

1) 条件标签：

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

示例: is_shop(), is_product_category(), is_product_tag(), is_product(), is_cart(), is_checkout() …

例如，您将能够有条件地向模板中的 html 标签添加 classes 或 ID。

用法示例：

<?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-shopclass到show/hide，进行更改...

也可以构建您的自定义条件函数…

2) CSS 类:

With CSS based on body CSS classes (和其他一些CSS classes)，特定于 woocommerce 页面。在您网站的 WooCommerce 前端页面中导航时，您可以使用浏览器的开发人员工具发现它们。

在特定于 WoocommerCe 商店页面的正文 class 中，您会得到这个 class 例如：

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

您可以在子主题的 style.css 文件中使用到 show/hide DOM 元素...

建议：最好使用儿童主题。

UPDATE BASED ON YOUR UPDATE

I have inserted the is_shop() conditional tag in your code

<?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 商店页面菜单

Targeting Woocommerce shop page menu

css

php

wordpress

conditional

woocommerce