如何在WordPress显示自定义文章类型时高亮前端分类菜单

我之前也碰到过完全一样的需求，核心就是要让WordPress“意识到”当前的Project详情页和Portfolio分类法是关联的，从而给主菜单里的Portfolio项加上高亮的CSS类（默认是current-menu-item）。下面给你两种经过验证的实现方法：

方法一：用nav_menu_css_class过滤器修改菜单类 #

这是最常用的方案，通过钩子来动态判断页面状态，给对应菜单项添加高亮类。直接把代码放到主题的functions.php文件里就行：

add_filter('nav_menu_css_class', 'highlight_portfolio_menu_on_project_single', 10, 4);
function highlight_portfolio_menu_on_project_single($classes, $item, $args, $depth) {
    // 先判断当前是否是Project自定义文章类型的详情页
    if (is_singular('project')) {
        // 获取当前Project关联的Portfolio分类（这里的'portfolio'是你的分类法slug，要对应上）
        $linked_portfolios = get_the_terms(get_the_ID(), 'portfolio');
        
        if ($linked_portfolios && !is_wp_error($linked_portfolios)) {
            // 对比菜单项URL和Portfolio归档页的URL（就是你主菜单里Portfolio项指向的页面）
            if ($item->url === get_post_type_archive_link('project')) {
                // 添加WordPress默认的高亮类，大部分主题都会识别
                $classes[] = 'current-menu-item';
                // 有些主题会用current_page_parent，也可以加上
                $classes[] = 'current_page_parent';
            }
        }
    }
    return $classes;
}

小调整说明： #

如果你的Portfolio菜单项指向的是分类法归档页（比如某个具体Portfolio分类的列表页，而非Project的全局归档），那把代码里的get_post_type_archive_link('project')换成对应的分类链接就行，比如：

// 假设目标Portfolio分类的slug是'web-development'
$target_portfolio_url = get_term_link('web-development', 'portfolio');

方法二：自定义菜单Walker类（适合深度定制场景） #

如果你的主题用了自定义菜单输出逻辑，或者不想用过滤器，也可以直接修改菜单的Walker类。比如在主题的header.php或者专门的菜单模板里，自定义一个Walker来处理高亮判断：

class Custom_Portfolio_Menu_Walker extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        // 保留默认的菜单项类
        $item_classes = empty($item->classes) ? array() : (array)$item->classes;
        
        // 检查当前是否是Project详情页
        if (is_singular('project')) {
            $linked_portfolios = get_the_terms(get_the_ID(), 'portfolio');
            if ($linked_portfolios && !is_wp_error($linked_portfolios)) {
                // 匹配Portfolio菜单项的URL
                if ($item->url === get_post_type_archive_link('project')) {
                    $item_classes[] = 'current-menu-item';
                    $item_classes[] = 'current_page_parent';
                }
            }
        }
        
        // 把类转换成字符串
        $class_string = join(' ', apply_filters('nav_menu_css_class', array_filter($item_classes), $item, $args));
        $class_string = $class_string ? ' class="' . esc_attr($class_string) . '"' : '';
        
        // 输出菜单项的HTML结构（保留主题原有逻辑即可）
        $output .= '<li' . $class_string . '>';
        $output .= '<a href="' . esc_attr($item->url) . '">' . esc_html($item->title) . '</a>';
    }
}

然后调用菜单的时候指定这个Walker：

wp_nav_menu(array(
    'theme_location' => 'primary', // 你的主题主菜单位置
    'walker' => new Custom_Portfolio_Menu_Walker()
));

几个注意点 #

1. 确保自定义文章类型和分类法的slug完全正确，比如project和portfolio不要写错；
2. 修改后记得清空WordPress的缓存（包括主题缓存、插件缓存），不然可能看不到效果；
3. 如果你的主题用了自定义的高亮类名（比如active），把代码里的current-menu-item换成主题对应的类就行。

内容的提问来源于stack exchange，提问作者Jawaid