如何在WordPress导航生成的ul列表前添加自定义div元素

有两种实现方式，优先推荐第一种，操作更简单不需要额外自定义Walker类。

方案1：修改wp_nav_menu的items_wrap参数 #

你调用导航的代码一般位于主题的header.php文件中，找到原有wp_nav_menu调用代码，新增items_wrap参数即可直接在ul前插入自定义内容：

wp_nav_menu( array(
    'theme_location'  => 'primary', // 对应你注册的导航位置名，保持原有配置不变
    'menu_id'         => 'primary-menu',
    'menu_class'      => 'menu',
    'container'       => 'div',
    'container_class' => 'menu-all-pages-container',
    // 新增以下行，在ul前插入你需要的两个div
    'items_wrap'      => '<div id="mydiv"></div><div class="button"></div><ul id="%1$s" class="%2$s">%3$s</ul>',
) );

items_wrap参数的%1$s会自动替换为你配置的menu_id，%2$s替换为menu_class，%3$s替换为生成的菜单项列表，完全兼容原有配置。

方案2：使用自定义Walker实现 #

如果你同时还有其他导航自定义需求需要用到Walker，可以按以下步骤操作：

1. 首先在主题的functions.php文件中添加自定义Walker类：

class Custom_Primary_Menu_Walker extends Walker_Nav_Menu {
    // 重写start_lvl方法，在ul标签输出前插入内容
    public function start_lvl( &$output, $depth = 0, $args = null ) {
        // 仅在最外层主菜单前插入内容，避免子菜单也重复插入
        if ( $depth === 0 ) {
            $output .= '<div id="mydiv"></div><div class="button"></div>';
        }
        // 调用父类方法保留原有ul生成逻辑
        parent::start_lvl( $output, $depth, $args );
    }
}

2. 再修改header.php中的wp_nav_menu调用代码，指定使用自定义Walker：

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'menu_id'         => 'primary-menu',
    'menu_class'      => 'menu',
    'container'       => 'div',
    'container_class' => 'menu-all-pages-container',
    // 新增以下行指定自定义Walker
    'walker'          => new Custom_Primary_Menu_Walker(),
) );

两种方案都可以直接实现你需要的输出效果，无需修改其他核心代码。

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