定位 Woocommerce 商店页面菜单答案

【问题标题】：Targeting Woocommerce shop page menu定位 Woocommerce 商店页面菜单
【发布时间】：2017-04-30 00:23:12
【问题描述】：

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

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

is_product_category()

但不确定如何将其全部写入以针对这些页面并交换/隐藏上述内容。我正在使用 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
}   
?>

【问题讨论】：

标签： php css wordpress woocommerce conditional

【解决方案1】：

我知道两种方法：

1) 条件标签：

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

示例：is_shop()、is_product_category()、is_product_tag()、@ 987654327@, 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 类：

使用 基于 body 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
}   
?>

参考资料：

【讨论】：

非常感谢您的帮助 Loic。我使用儿童主题，所以我在那里很好。我的问题是我不熟悉 php，但设法摆弄了这段代码（虽然它没有用！）
嘿 Loic，CSS 不是正确定位此页面的问题，这对我来说非常具有挑战性。还是谢谢
感谢您的帮助 Loic... 我已经修改了代码，如果我将它放在 tn funtions.php 中，它会破坏我的网站。但是，当我在 header.php 中使用上面示例 1 中的初始代码时，它会出现在所有页面上，但不确定如何定位 divi 徽标，隐藏它，并在每个 woocommerce 页面上显示一个新的！
我需要它！我很感激..我会尽快加你。 :)