如何在WordPress导航菜单每个li标签后新增div（不使用jQuery方案）

两种原生实现方案可选，均不需要前端JS操作： #

方案1：自定义菜单Walker（推荐，灵活度最高） #

WordPress的wp_nav_menu接口支持传入自定义Walker类，可完全控制菜单的输出结构，是官方推荐的菜单结构定制方案：

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

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    // 重写每个菜单项结束节点的输出逻辑
    public function end_el( &$output, $item, $depth = 0, $args = array() ) {
        // 输出默认的li闭合标签
        $output .= "</li>\n";
        // 追加你需要的div，可自定义类名、内容、属性
        $output .= "<div class=\"menu-item-suffix\"></div>\n";
    }
}

如果需要div和当前菜单项关联，可直接调用$item对象的属性获取菜单信息，比如获取菜单ID作为自定义属性：
$output .= "<div class=\"menu-item-suffix\" data-menu-id=\"{$item->ID}\"></div>\n";
2. 修改你原有的菜单调用代码，新增walker参数：

<?php  
   $argsM = array(
      'theme_location'  => 'menu-principal',
      'items_wrap'      => '<ul class="sf-menu nav navbar-nav %2$s">%3$s</ul>',
      // 传入自定义的Walker实例
      'walker'          => new Custom_Walker_Nav_Menu(),
   );
   wp_nav_menu( $argsM );
?>

方案2：使用过滤器批量替换（轻量场景首选） #

如果只是需要简单追加固定结构的div，不需要复杂定制，可以直接用wp_nav_menu_items钩子对菜单输出内容做批量替换，同样添加到主题functions.php即可：

add_filter( 'wp_nav_menu_items', 'add_suffix_div_after_menu_li', 10, 2 );
function add_suffix_div_after_menu_li( $items, $args ) {
    // 限定只对指定位置的菜单生效，避免影响其他菜单
    if ( $args->theme_location === 'menu-principal' ) {
        // 把所有li闭合标签替换为"li闭合+自定义div"
        $items = str_replace( '</li>', '</li><div class="menu-item-suffix"></div>', $items );
    }
    return $items;
}

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