WooCommerce 产品标签自定义循环与过滤教程

本教程旨在详细指导如何在 wordpress woocommerce 中创建自定义产品标签循环，以便实现产品按标签过滤的功能。文章将涵盖如何获取所有产品标签、构建动态的标签链接列表，并进一步讲解如何从循环中排除特定标签，从而为用户提供灵活的产品筛选体验。

一、理解 WooCommerce 产品标签及其作用

在 WooCommerce 中，产品标签（Product Tags）是一种分类法，类似于 WordPress 的文章标签，用于对产品进行更细粒度的描述和分组。它们有助于用户快速找到相关产品，提升网站的用户体验。本教程的目标是创建一个自定义的标签列表，允许用户点击标签来过滤显示相应的产品。

二、获取所有 WooCommerce 产品标签

要创建自定义标签循环，首先需要获取所有已使用的产品标签。WordPress 提供了 get_terms() 函数，可以用来检索指定分类法的所有术语（terms）。对于 WooCommerce 产品标签，其分类法名称是 product_tag。

以下代码片段展示了如何获取所有产品标签：

$product_tags = get_terms( 'product_tag', array(
    'hide_empty' => true // 仅获取有产品关联的标签
) );

代码解释：

• get_terms('product_tag'): 这是核心函数调用，指定要获取的分类法为 product_tag。
• 'hide_empty' => true: 这是一个可选参数，用于确保只获取那些至少关联了一个产品的标签。如果不需要显示空标签，强烈建议使用此参数，以避免显示无效链接。

三、构建自定义产品标签循环

获取到产品标签数组后，我们可以遍历这个数组，为每个标签生成一个链接，从而创建一个可点击的标签列表。

Dora

创建令人惊叹的3D动画网站，无需编写一行代码。

下载

$product_tags = get_terms( 'product_tag', array(
    'hide_empty' => true
) );

$html = '<div class="filter-bar__tags-filter">';

if ( ! empty( $product_tags ) && ! is_wp_error( $product_tags ) ) {
    foreach ( $product_tags as $tag ) {
        $tag_link = get_term_link( $tag->term_id, 'product_tag' ); // 获取标签的链接
        if ( ! is_wp_error( $tag_link ) ) {
            $html .= "<a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>{$tag->name}</a>";
        }
    }
}

$html .= '</div>';
echo $html;

代码解释：

• $html = '
  ';: 初始化一个 HTML 字符串，并用一个容器 div 包裹，方便后续样式控制。
• if ( ! empty( $product_tags ) && ! is_wp_error( $product_tags ) ): 这是一个重要的检查，确保 $product_tags 变量不为空且没有错误，以防止在没有标签或发生错误时代码中断。
• foreach ( $product_tags as $tag ): 遍历获取到的每个标签对象。
• get_term_link( $tag->term_id, 'product_tag' ): 根据标签的 ID 和分类法名称获取该标签的永久链接。
• if ( ! is_wp_error( $tag_link ) ): 再次检查 get_term_link 是否返回错误。
• $html .= "{$tag->name}";: 构建每个标签的 链接。title 属性用于提供鼠标悬停时的提示，class 属性使用标签的 slug，便于通过 CSS 进行个性化样式设置。
• echo $html;: 输出生成的 HTML 标签列表。

四、从循环中排除特定标签

在某些情况下，你可能希望从生成的标签列表中排除一个或多个特定标签，例如，一个内部使用的标签或不希望公开展示的标签。这可以通过在 foreach 循环内部添加条件判断来实现。

$product_tags = get_terms( 'product_tag', array(
    'hide_empty' => true
) );

$html = '<div class="filter-bar__tags-filter">';

// 定义要排除的标签的 slug 数组
$excluded_tags_slugs = array( 'hidden-tag', 'internal-use-only' ); 

if ( ! empty( $product_tags ) && ! is_wp_error( $product_tags ) ) {
    foreach ( $product_tags as $tag ) {
        // 检查当前标签的 slug 是否在排除列表中
        if ( in_array( $tag->slug, $excluded_tags_slugs ) ) {
            continue; // 如果是，则跳过当前循环迭代，不生成此标签
        }

        $tag_link = get_term_link( $tag->term_id, 'product_tag' );
        if ( ! is_wp_error( $tag_link ) ) {
            $html .= "<a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>{$tag->name}</a>";
        }
    }
}

$html .= '</div>';
echo $html;

代码解释：

• $excluded_tags_slugs = array( 'hidden-tag', 'internal-use-only' );: 创建一个数组，包含你希望排除的标签的 slug。你可以根据需要添加更多 slug。
• if ( in_array( $tag->slug, $excluded_tags_slugs ) ) { continue; }: 在生成链接之前，检查当前标签的 slug 是否存在于 $excluded_tags_slugs 数组中。如果存在，continue 语句将跳过当前循环的剩余部分，直接进入下一次迭代，从而有效地排除该标签。

五、注意事项与最佳实践

1. 代码放置位置： 这些代码通常放置在以下位置：
   • 主题的 functions.php 文件： 如果是为特定主题添加功能，可以在此文件中创建一个自定义函数，并在需要显示标签列表的模板文件中调用它。
   • 自定义插件： 对于更复杂或需要在多个主题中重用的功能，创建自定义插件是更好的选择。
   • WooCommerce 模板文件： 如果你正在自定义 WooCommerce 的特定页面（如产品存档页），可以直接将代码插入到相应的模板文件中。
2. 样式设计： 生成的 HTML 结构需要通过 CSS 进行美化，以适应你的网站设计。你可以利用 filter-bar__tags-filter 类和每个标签链接的 {$tag->slug} 类来编写样式规则。
3. 缓存： 如果你的网站有大量产品标签，并且这个标签列表在每个页面都显示，考虑使用 WordPress 的转瞬即逝 API（Transients API）来缓存生成的 HTML，以减少数据库查询和提高页面加载速度。
4. 国际化： 如果你的网站支持多语言，标签名称通常由 WooCommerce 自动处理。但如果你在其他地方硬编码文本，请使用 __() 或 _e() 函数进行国际化。
5. 安全性： get_terms() 和 get_term_link() 函数已经对输出进行了适当的清理和转义，因此在生成链接时，通常无需额外的安全处理。

总结

通过本教程，你已经学会了如何在 WooCommerce 中创建和管理自定义产品标签循环。从获取所有产品标签到构建动态链接列表，再到精确地排除特定标签，这些技术为你提供了强大的灵活性来定制产品过滤体验。合理运用这些方法，将有助于提升你的 WooCommerce 商店的用户导航和整体可用性。