WordPress导航Walker实现不同子菜单按钮差异化输出问题

首先得说清楚为什么你用$depth判断不生效：因为这两个子菜单都是主菜单的直接子菜单，它们的$depth值都是1，所以条件判断自然没法区分开二者。要实现不同子菜单输出不同按钮，我们得基于父菜单项的唯一标识来做判断，比如父菜单项的ID、slug或者标题。

下面是具体的实现方案，我们通过自定义Walker类来记录当前父菜单项的信息，然后在生成子菜单开头时根据这个信息输出对应按钮：

修改后的自定义Walker类代码（functions.php） #

class m2o_walker_nav_menu extends Walker_Nav_Menu {
    // 新增私有属性，用来存储当前要生成子菜单的父菜单项ID
    private $current_parent_id;

    // 重写start_el方法，记录父菜单项的ID
    public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        // 先调用父类的start_el方法，保证原有菜单的HTML结构正常生成
        parent::start_el($output, $item, $depth, $args, $id);
        
        // 只针对主菜单的项（depth=0），且该菜单项有子菜单时，记录它的ID
        if ($depth === 0 && in_array('menu-item-has-children', $item->classes)) {
            $this->current_parent_id = $item->ID;
        }
    }

    // 修改start_lvl方法，根据父菜单项ID输出不同按钮
    public function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        
        // 根据父菜单项ID判断输出对应按钮
        if ($this->current_parent_id === 123) { // 替换成第一个子菜单的父菜单项ID
            $output .= "\n$indent<button @click=\"function1\">First Button</button><ul class=\"sub-menu\">\n";
        } elseif ($this->current_parent_id === 456) { // 替换成第二个子菜单的父菜单项ID
            $output .= "\n$indent<button @click=\"function2\">Second Button</button><ul class=\"sub-menu\">\n";
        } else {
            // 其他子菜单的默认输出（如果有的话）
            $output .= "\n$indent<ul class=\"sub-menu\">\n";
        }
    }

    public function end_lvl( &$output, $depth) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n";
    }
}

如何获取父菜单项的ID？ #

你可以通过两种方式找到父菜单项的ID：

• 在WordPress后台的「外观-菜单」页面，鼠标悬停在目标菜单项上，浏览器状态栏会显示类似post=123的链接参数，其中的数字就是菜单项ID；
• 查看前端页面的菜单HTML代码，每个菜单项都会有menu-item-xxx的class，xxx就是菜单项ID。

可选：用菜单项slug替代ID判断 #

如果你觉得记ID麻烦，也可以用菜单项的slug（别名）来判断，只需要修改start_el和start_lvl里的代码：

// 在类里替换属性为$current_parent_slug
private $current_parent_slug;

// start_el里的记录代码改成
if ($depth === 0 && in_array('menu-item-has-children', $item->classes)) {
    $this->current_parent_slug = $item->post_name; // post_name就是菜单项的slug
}

// start_lvl里的判断改成
if ($this->current_parent_slug === 'first-main-menu') { // 替换成第一个父菜单项的slug
    // 输出function1的按钮
} elseif ($this->current_parent_slug === 'second-main-menu') { // 替换成第二个父菜单项的slug
    // 输出function2的按钮
}

这样就能精准区分不同的子菜单，输出对应的功能按钮了。

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