
本教程旨在详细指导如何在 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' =youjiankuohaophpcn true: 这是一个可选参数,用于确保只获取那些至少关联了一个产品的标签。如果不需要显示空标签,强烈建议使用此参数,以避免显示无效链接。
三、构建自定义产品标签循环
获取到产品标签数组后,我们可以遍历这个数组,为每个标签生成一个链接,从而创建一个可点击的标签列表。
$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 = '<div class="filter-bar__tags-filter">';: 初始化一个 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 .= "<a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>{$tag->name}</a>";: 构建每个标签的 <a> 链接。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 语句将跳过当前循环的剩余部分,直接进入下一次迭代,从而有效地排除该标签。
五、注意事项与最佳实践
-
代码放置位置: 这些代码通常放置在以下位置:
- 主题的 functions.php 文件: 如果是为特定主题添加功能,可以在此文件中创建一个自定义函数,并在需要显示标签列表的模板文件中调用它。
- 自定义插件: 对于更复杂或需要在多个主题中重用的功能,创建自定义插件是更好的选择。
- WooCommerce 模板文件: 如果你正在自定义 WooCommerce 的特定页面(如产品存档页),可以直接将代码插入到相应的模板文件中。
- 样式设计: 生成的 HTML 结构需要通过 CSS 进行美化,以适应你的网站设计。你可以利用 filter-bar__tags-filter 类和每个标签链接的 {$tag->slug} 类来编写样式规则。
- 缓存: 如果你的网站有大量产品标签,并且这个标签列表在每个页面都显示,考虑使用 WordPress 的转瞬即逝 API(Transients API)来缓存生成的 HTML,以减少数据库查询和提高页面加载速度。
- 国际化: 如果你的网站支持多语言,标签名称通常由 WooCommerce 自动处理。但如果你在其他地方硬编码文本,请使用 __() 或 _e() 函数进行国际化。
- 安全性: get_terms() 和 get_term_link() 函数已经对输出进行了适当的清理和转义,因此在生成链接时,通常无需额外的安全处理。
总结
通过本教程,你已经学会了如何在 WooCommerce 中创建和管理自定义产品标签循环。从获取所有产品标签到构建动态链接列表,再到精确地排除特定标签,这些技术为你提供了强大的灵活性来定制产品过滤体验。合理运用这些方法,将有助于提升你的 WooCommerce 商店的用户导航和整体可用性。










