如何为WordPress主题实现对应静态HTML代码的动态导航菜单？

问题分析 #

你的静态菜单包含三层结构：外层容器main-menu-wrap style1、菜单关闭按钮、包裹菜单列表的div#menu，以及带has-children类的父菜单项和sub-menu list-style类的子菜单。当前的wp_nav_menu配置存在几个问题：无法生成菜单关闭按钮、错误使用了不存在的add_li_class参数、子菜单类未匹配静态结构。

调整后的代码实现 #

1. 主题模板中的菜单代码

替换你当前的wp_nav_menu调用，手动保留菜单关闭按钮，并调整参数匹配静态结构：

<div class="main-menu-wrap style1">
    <div class="menu-close xl-none">
        <a href="javascript:void(0)"><i class="las la-times"></i></a>
    </div>
    <?php
    wp_nav_menu(
        array(
            'menu'             => 'primary',
            'container'        => 'div',
            'container_id'     => 'menu',
            'menu_class'       => 'main-menu list-style',
            'submenu_class'    => 'sub-menu list-style',
            'echo'             => true,
        )
    );
    ?>
</div>

2. 主题functions.php中的过滤器函数

WordPress不会自动给有子菜单的菜单项添加has-children类，需要添加以下代码实现：

function add_has_children_class_to_menu_items($items) {
    $parent_ids = array();
    // 收集所有包含子菜单的父项ID
    foreach ($items as $item) {
        if ($item->menu_item_parent) {
            $parent_ids[] = $item->menu_item_parent;
        }
    }
    // 给父菜单项添加has-children类
    foreach ($items as $item) {
        if (in_array($item->ID, $parent_ids)) {
            $item->classes[] = 'has-children';
        }
    }
    return $items;
}
add_filter('wp_nav_menu_objects', 'add_has_children_class_to_menu_items');

关键调整说明 #

• 保留菜单关闭按钮：该元素不属于导航菜单的核心结构，需手动写入模板，无法通过wp_nav_menu生成。
• 容器参数调整：将container_id设为menu，对应静态结构中包裹菜单列表的div#menu；menu_class和submenu_class直接匹配静态HTML中的类名，确保样式继承。
• 添加父项类名：通过wp_nav_menu_objects过滤器遍历菜单项，自动给包含子菜单的父li标签添加has-children类，无需手动设置。

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