使用 Yoast SEO 和 ACF 自定义 WordPress 产品页面的面包屑导航

发表于 分类于
本文介绍如何使用 Yoast SEO 和 ACF 自定义 WordPress 产品页面的面包屑导航，包括产品详情页和分类页的面包屑定制方法。

在 WordPress 外贸独立站或自定义产品网站中，我们经常需要在产品详情页和分类页显示清晰的面包屑导航（Breadcrumb），以提升用户体验和 SEO。默认情况下，Yoast SEO 提供的面包屑功能很方便，但如果你的产品使用 ACF 自定义文章类型 和自定义分类（taxonomy），就需要做一些调整。本文将介绍如何为 ACF 产品详情页和产品分类页自定义面包屑，并统一 URL 路径结构。

1. 项目需求

假设我们有一个自定义文章类型 wproduct，以及自定义分类 wproduct-category。我们的目标是：

  1. 产品详情页的面包屑显示如下：

    1
    Home / Products / Category / Product

  2. 产品分类页的面包屑显示如下：

    1
    Home / Products / Category

  3. 统一产品分类 URL 为 /products/分类名，而不是默认的 /product-category/分类名。

2. 修改产品详情页面包屑

通过 wpseo_breadcrumb_links 过滤器，我们可以重写 Yoast SEO 的面包屑结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
add_filter('wpseo_breadcrumb_links', function ($links) {
    if (is_singular('wproduct')) {

        $new_links = [];

        // Home
        $new_links[] = $links[0];

        // Products 页面
        $new_links[] = [
            'url'  => home_url('/products/'),
            'text' => 'Products',
        ];

        // 获取第一个产品分类
        $terms = get_the_terms(get_the_ID(), 'wproduct-category');

        if (!empty($terms) && !is_wp_error($terms)) {
            $term = array_shift($terms);

            // 支持多级分类
            $ancestors = array_reverse(get_ancestors($term->term_id, 'wproduct-category'));

            foreach ($ancestors as $ancestor_id) {
                $ancestor = get_term($ancestor_id, 'wproduct-category');
                $new_links[] = [
                    'url'  => get_term_link($ancestor),
                    'text' => $ancestor->name,
                ];
            }

            // 当前分类
            $new_links[] = [
                'url'  => get_term_link($term),
                'text' => $term->name,
            ];
        }

        // 产品标题
        $new_links[] = end($links);

        return $new_links;
    }

    return $links;
});

说明：

  • is_singular('wproduct') 判断当前是否为产品详情页。
  • get_the_terms() 获取产品所属分类。
  • get_ancestors() 支持多级分类显示。
  • 将 Products 页面固定插入面包屑中。

3. 修改产品分类 URL

默认 WordPress 会将自定义分类 URL 生成为 /product-category/分类名。为了统一风格，我们可以在注册分类时修改 rewrite：

1
2
3
4
5
6
7
8
9
10
11
12
13
add_action('init', function () {
    register_taxonomy('wproduct-category', ['product'], [
        'label'        => 'Product Categories',
        'public'       => true,
        'hierarchical' => true,
        'show_in_rest' => true,
        'rewrite'      => [
            'slug'         => 'products',  // 修改为 /products/
            'with_front'   => false,
            'hierarchical' => true,
        ],
    ]);
}, 20);

这样分类页 URL 就会变为：

1
/products/冰箱/

而不是：

1
/product-category/冰箱/

4. 产品分类页面包屑

为了让产品分类页的面包屑也显示 Products 层级，可以再使用一次 wpseo_breadcrumb_links 过滤器：

1
2
3
4
5
6
7
8
9
10
11
12
add_filter('wpseo_breadcrumb_links', function ($links) {
    if (is_tax('wproduct-category')) {
        $products_page = [
            'url'  => home_url('/products/'),
            'text' => 'Products',
        ];

        // 插入到 Home 后面
        array_splice($links, 1, 0, [$products_page]);
    }
    return $links;
});

效果：

1
Home / Products / Category

5. 总结

通过以上三步，我们实现了：

  1. 产品详情页和分类页面包屑统一显示 Home / Products / Category / Product。
  2. 产品分类 URL 统一为 /products/分类名。
  3. 支持多级分类显示，SEO 和用户体验双提升。

这种方法对使用 ACF 自定义产品类型的 WordPress 外贸站特别适用。只需在主题的 functions.php 或自定义插件中添加以上代码即可。