Woocommerce 仅使用 css 定位商店页面

Posted 2023-03-06

【中文标题】Woocommerce 仅使用 css 定位商店页面

【英文标题】：Woocommerce targeting the shop page only with css

【发布时间】：2016-10-01 09:14:08

【问题描述】：

这是我需要做的：

仅

使用 css（我创建的特定自定义类，如下所述）定位主商店页面。

这是我迄今为止所做和尝试过的：

我的子主题中有一个覆盖模板 archive-product.php。 在这个覆盖模板中，我在产品循环开始之前添加了一个带有自定义类 custom-shop-class 的 div，因为我想专门针对循环的产品。 我尝试使用 page-id-4 类进行定位，因为如果我将鼠标悬停在 wp-admin 中的“商店”页面上，它会给我 http://.../post.php?post=4&action=edit

我遇到的问题如下：

据我发现，相同的archive-product.php 模板正在其他各种商店页面中使用，而不仅仅是在主“商店”页面中（如果我错了，请纠正我），所以当我定位我的 custom-shop-class 使用 CSS，它会影响使用相同模板文件的所有其他商店页面，而且一定不会。 没有专门用于商店页面的唯一标识符或类，例如 body 标签中的 page-id-?? 类（就像在通常的 WP 页面中一样）。

关于最佳方法/解决方案的任何建议？

提前致谢， 马里奥。

【参考方案1】：

设置一个条件语句来检查主要商店页面，如果该语句的计算结果为真，则回显有问题的 div。

主商店页面的 WooCommerce 条件标签：

is_shop()

示例

if (is_shop()) 
echo "<div class='custom-shop-class'></div>";
 else 
echo "<div class='custom-product-category-class'></div>";

或者：

<?php if (is_shop()):?>
<div class="custom-shop-class"></div>
<?php else: ?>
<div class="custom-product-category-class"></div>
<?php endif;?>

Conditional Tags | WooThemes Documentation

【讨论】：

漂亮！一个伟大的（简单的）解决方案，并且合乎逻辑！只是一个简单的问题，什么是“is_shop”？它是一个变量还是一个函数，在 WC 方案中我在哪里可以找到它？

太棒了！很高兴你来对了。 WooCommerce 可以通过这种方式轻松挂钩自定义操作和过滤器。如果您认为此答案为您提供了您正在寻找的解决方案，请随时将其标记为正确答案。

别介意我的问题。我现在才看到您附加的有关“条件标签”的链接。太棒了，谢谢！

为了回答您的问题，is_shop() 只是一个条件查询标签，与 Wordpress 模板层次结构有着密切的工作关系。欲了解更多信息，请查看：codex.wordpress.org/Conditional_Tags

非常感谢您的回复。我有一些阅读要做，非常感谢。

【参考方案2】：

要在此处提供的答案的基础上再接再厉，我该如何进一步根据活动的 WPML 语言向商店页面添加唯一标识符？ （我基本上只是在尝试减少德语版商店页面上的字体大小 - 事实证明这很难做到）

【参考方案3】：

使用带有is_shop 条件的过滤器body_class，您可以定位WooCommerce 商店的主页面。

add_filter( 'body_class', 'woo_shop_class' );
// Add WooCommerce Shop Page CSS Class
function woo_shop_class( $classes ) 
  if ( is_shop() )  // Set conditional
    $classes[] = 'woo-shop'; // Add Class
return $classes;

代码在您的主题functions.php 文件中。

【讨论】：

非常方便。这样，无需使用模板文件即可获得相同的最终结果。可以通过functions.php来实现，这正是我所需要的。谢谢。