WordPress三级导航自定义Walker开发：子菜单并排布局需求

需求说明 #

需要开发一个三级导航菜单，让第三层级子菜单与第二层级子菜单并排展示，期望的结构如下：

菜单项 >> 二级子菜单项 >> 三级子菜单项
         二级子菜单项    三级子菜单项
         二级子菜单项    三级子菜单项

期望的HTML结构 #

<nav id="nav-primary" class="mobile-menu">
    <div id="menu-test-menu" class="menu genesis-nav-menu menu-primary js-superfish">
        <div id="menu-item-25937" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-25937">
            <a href="https://example.com/">Products</a>
        </div>
        <div class="sub-menu sub-menu-level-2">
            <div id="menu-item-25932" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25932">
                <a href="https://example.com/test-page/">phone system overview</a>
            </div>
            <div id="menu-item-25931" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25931">
                <a href="https://example.com/test-page/">phone system features</a>
            </div>
            <div id="menu-item-26230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-26230">
                <a href="https://example.com/" aria-current="page">delivery options</a>
            </div>
            <div class="sub-menu sub-menu-level-3">
                <div id="menu-item-26234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item menu-item-26234">
                    <a href="https://example.com/" aria-current="page">CLOUD PHONE SYSTEM</a>
                </div>
                <div id="menu-item-26235" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item menu-item-26235">
                    <a href="https://example.com/" aria-current="page">MANAGED SIP TRUNKING</a>
                </div>
            </div>
        </div>
    </div>
</nav>

当前已实现的PHP代码 #

function register_additional_menu() {
    register_nav_menu( 'third-menu' ,__( 'Third Navigation Menu' ));
}
add_action( 'init', 'register_additional_menu' );

add_action( 'genesis_header', 'add_third_nav_genesis' ); 
function add_third_nav_genesis() {
    wp_nav_menu( array( 
        'theme_location' => 'third-menu',
        'menu'           => '',
        'container'      => 'nav',
        'container_id'   => 'nav-primary',
        'container_class'=> 'mobile-menu',
        'items_wrap'     => '<div id="menu-test-menu" class="menu genesis-nav-menu menu-primary js-superfish">%3$s</div>',
        'item_spacing'   => 'discard',
        'depth'          => 3,
        'walker'         => new My_Custom_Nav_Walker 
    ) );
}

解决方案 #

1. 自定义Nav Walker类 #

将以下代码添加到主题的functions.php中，调整菜单的输出结构，让三级菜单与二级菜单处于同一父容器内：

class My_Custom_Nav_Walker extends Walker_Nav_Menu {
    // 开始输出子菜单容器
    function start_lvl(&$output, $depth = 0, $args = null) {
        $indent = str_repeat("\t", $depth);
        if ($depth == 0) {
            $output .= "\n$indent<div class=\"sub-menu sub-menu-level-2\">\n";
        } elseif ($depth == 1) {
            $output .= "\n$indent<div class=\"sub-menu sub-menu-level-3\">\n";
        }
    }

    // 结束输出子菜单容器
    function end_lvl(&$output, $depth = 0, $args = null) {
        $indent = str_repeat("\t", $depth);
        if ($depth == 0) {
            $output .= "$indent</div>\n";
        } elseif ($depth == 1) {
            $output .= "$indent</div>\n";
        }
    }

    // 输出单个菜单项
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
        
        $classes = empty($item->classes) ? array() : (array)$item->classes;
        $classes[] = 'menu-item-' . $item->ID;
        if ($depth == 1 && in_array('menu-item-has-children', $classes)) {
            $classes[] = 'has-third-level';
        }

        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';

        $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
        $id = $id ? ' id="' . esc_attr($id) . '"' : '';

        $output .= $indent . '<div' . $id . $class_names . '>';

        $atts = array();
        $atts['title']  = ! empty($item->attr_title) ? $item->attr_title : '';
        $atts['target'] = ! empty($item->target) ? $item->target : '';
        $atts['rel']    = ! empty($item->xfn) ? $item->xfn : '';
        $atts['href']   = ! empty($item->url) ? $item->url : '';

        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args);

        $attributes = '';
        foreach ($atts as $attr => $value) {
            if (!empty($value)) {
                $value = ('href' === $attr) ? esc_url($value) : esc_attr($value);
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }

    function end_el(&$output, $item, $depth = 0, $args = null) {
        $output .= "</div>\n";
    }
}

2. 添加CSS样式实现并排布局 #

将以下样式添加到主题的样式文件（如style.css）中：

/* 二级菜单容器设置为flex布局，实现并排 */
.sub-menu-level-2 {
    display: flex;
    gap: 2rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
}

/* 固定二级菜单项宽度 */
.sub-menu-level-2 .menu-item {
    flex: 0 0 220px;
}

/* 三级菜单容器占据剩余空间 */
.sub-menu-level-3 {
    flex: 1;
    background-color: #ffffff;
    padding: 1rem;
    border-left: 1px solid #e9ecef;
    display: none;
}

/* 三级菜单项间距 */
.sub-menu-level-3 .menu-item {
    margin-bottom: 0.8rem;
}

/* 鼠标悬停时显示对应三级菜单 */
.sub-menu-level-2 .menu-item.has-third-level:hover + .sub-menu-level-3,
.sub-menu-level-3:hover {
    display: block;
}

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