WordPress后台全部产品列表增加标签筛选链接

原创已于 2026-01-30 16:14:22 修改 · 187 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#android

于 2026-01-30 16:13:42 首次发布

网站开发同时被 2 个专栏收录

2 篇文章

订阅专栏

WrodPress开发

1 篇文章

订阅专栏

功能简介

在后台“产品 → 所有产品”列表顶部添加“标签快捷筛选”导航，点击即可过滤该标签下的产品。
导航自动插入到“筛选”按钮之后，保持原有控件不换行。
提供“全部产品”“更多标签”入口；支持热门标签展示与当前标签高亮。

适用前提

WordPress + WooCommerce 已安装并启用。
使用子主题（建议），具备后台编辑权限（编辑产品）。
产品已使用 WooCommerce 标签（product_tag）。

快速安装（复用到下个项目）

将以下代码加入到子主题的 functions.php（或自定义功能插件）：

add_action('restrict_manage_posts', function($post_type){
    if (!is_admin()) return;
    if ($post_type !== 'product') return;
    if (!current_user_can('edit_products')) return;
    $active = isset($_GET['product_tag']) ? sanitize_text_field(wp_unslash($_GET['product_tag'])) : '';
    $terms = get_terms(array(
        'taxonomy'   => 'product_tag',
        'hide_empty' => true,
        'orderby'    => 'count',
        'order'      => 'DESC',
        'number'     => 20,
    ));
    if (is_wp_error($terms) || empty($terms)) return;
    $base = add_query_arg(array('post_type' => 'product'), admin_url('edit.php'));
    echo '<div id="dy-admin-tag-filters" class="dy-admin-tag-filters" style="margin-left:8px; display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; white-space:normal;">';
    echo '<span class="dy-admin-tag-label" style="color:#666;">按产品标签筛选：</span>';
    foreach ($terms as $t) {
        $url   = add_query_arg('product_tag', $t->slug, $base);
        $class = 'dy-admin-tag-link' . ($active === $t->slug ? ' current' : '');
        echo '<a class="'.esc_attr($class).'" href="'.esc_url($url).'" style="padding:2px 8px; border:1px solid #ccd0d4; border-radius:3px; text-decoration:none;'.($active === $t->slug ? 'background:#2271b1;color:#fff;border-color:#2271b1;' : '').'">'.esc_html($t->name).'</a>';
    }
    $reset = $base;
    $more  = admin_url('edit-tags.php?taxonomy=product_tag&post_type=product');
    echo '<a class="dy-admin-tag-link reset" href="'.esc_url($reset).'" style="padding:2px 8px; border:1px solid #ccd0d4; border-radius:3px; text-decoration:none;">全部产品</a>';
    echo '<a class="dy-admin-tag-link more" href="'.esc_url($more).'" style="padding:2px 8px; border:1px solid #ccd0d4; border-radius:3px; text-decoration:none;">更多标签</a>';
    echo '</div>';
}, 20);

add_action('pre_get_posts', function($query){
    if (!is_admin() || !$query->is_main_query()) return;
    $pt = $query->get('post_type');
    if ($pt && $pt !== 'product') return;
    $tag = isset($_GET['product_tag']) ? sanitize_text_field(wp_unslash($_GET['product_tag'])) : '';
    if ($tag) {
        $tax_query = (array) $query->get('tax_query');
        $tax_query[] = array(
            'taxonomy' => 'product_tag',
            'field'    => 'slug',
            'terms'    => array($tag),
        );
        $query->set('tax_query', $tax_query);
    }
}, 10);

add_action('admin_head-edit.php', function(){
    $pt = isset($_GET['post_type']) ? sanitize_text_field(wp_unslash($_GET['post_type'])) : '';
    if ($pt !== 'product') return;
    echo '<style>
    .dy-admin-tag-filters .dy-admin-tag-link{transition:all .15s ease}
    .dy-admin-tag-filters .dy-admin-tag-link:hover{border-color:#2271b1;color:#2271b1}
    .dy-admin-tag-filters .dy-admin-tag-link.current{background:#2271b1;color:#fff;border-color:#2271b1}
    </style>';
});

add_action('admin_print_footer_scripts-edit.php', function(){
    $pt = isset($_GET['post_type']) ? sanitize_text_field(wp_unslash($_GET['post_type'])) : '';
    if ($pt !== 'product') return;
    echo '<script>
    (function(){
        var el     = document.getElementById("dy-admin-tag-filters");
        var submit = document.querySelector(".tablenav.top .actions #post-query-submit");
        var wrap   = document.querySelector(".tablenav.top .actions");
        if (el && submit && submit.parentNode) {
            submit.parentNode.insertBefore(el, submit.nextSibling);
        } else if (wrap && el) {
            wrap.appendChild(el);
        }
    })();
    </script>';
});