定位Woocommerce商店页面菜单

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

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

is_product_category()

但不确定如何编写所有内容以针对这些页面并交换/隐藏上述内容。我正在使用迪维主题。如有必要，我可以提供图像进行澄清...

感谢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
}   
?>

我知道 2 种方法：

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

<小时 />

参考资料：

伍商务条件标签
模板结构 + 通过主题覆盖模板

相关内容

最新更新

热门标签：