Wordpress 如何添加引导菜单，自定义css的子菜单？

我正在使用bootsatrap开发wordpress主题。我的html结构类似于：

<div class="collapse navbar-collapse inner_collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav inner">
      <li><a href="brushes.html">BRUSHES</a></li>
      <li><a href="body.html">BODY</a></li>
      <li class="dropdown">
          <a href="blades.html" class="dropdown-toggle">BLADES</a>
          <ul class="dropdown-menu">
            <li><a href="#">Men</a></li>
            <li><a href="#">Woman</a></li>
          </ul>
      </li>
      <li><a href="beauty.html">BEAUTY</a></li>
      <li><a href="baby.html">BABY</a></li>
      <li><a href="pet.html">PET</a></li>
  </ul>


</div><!-- /.navbar-collapse -->

我的问题是我想添加子菜单和子菜单相关类，如：

<li class="dropdown">
   <a href="blades.html" class="dropdown-toggle">BLADES</a>
   <ul class="dropdown-menu">
     <li><a href="#">Men</a></li>
     <li><a href="#">Woman</a></li>
   </ul>
</li>

我的代码正在生成以下代码：

<div class="collapse navbar-collapse inner_collapse" id="bs-example-navbar-collapse-1">
   <ul id="menu-main-menu" class="nav navbar-nav inner">
                                      <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a title="Brushes" href="http://localhost/bassWorking/brushes/">Brushes</a></li>
                                      <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a title="Body" href="http://localhost/bassWorking/body/">Body</a></li>
                                      <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-29 current_page_item menu-item-has-children menu-item-43 dropdown active"><a title="Blades" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Blades <span class="caret"></span></a>
                                            <ul role="menu" class=" dropdown-menu">
                                                <li id="menu-item-342" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-342"><a title="Men" href="#">Men</a></li>
                                                <li id="menu-item-343" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-343"><a title="Women" href="#">Women</a></li>
                                            </ul>
                                      </li>
                            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a title="Beauty" href="http://localhost/bassWorking/beauty/">Beauty</a></li>
                            <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a title="Baby" href="http://localhost/bassWorking/baby/">Baby</a></li>
                            <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a title="Pet" href="http://localhost/bassWorking/pet/">Pet</a></li>
   </ul>                                      
</div><!-- /.navbar-collapse -->

---

有什么想法吗？

有两种方法

1） 只需使用第三方开发的代码（也是免费的）

2） 如果你想在没有任何插件的情况下创建自己的插件，那么你必须编写如下代码：， 步骤1：在父页面CSS类中添加一个额外的CSS类（下拉列表） 你可以在这里添加额外的CSS类外观->菜单：在那里你可以找到CSS类（可选） 如果您当时没有找到它，请单击右上角的屏幕选项（帮助附近），在那里您可以启用CSS类、说明等

第二步：真正的代码在这里

<nav class="navbar navbar-inverse logoname" role="navigation">
    <div class="navbar-header title">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
  <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
    <?php 
    $menu_args = array(
      'menu'            => 'Main Menu', 
      'container'       => 'container', 
      'container_class' => 'container_class', 
      'container_id'    => 'container_id',
      'menu_class'      => 'nav navbar-nav',
      'menu_id'         => 'menu_id',
      'echo'            => true);
    ?>
    <?php wp_nav_menu($menu_args);?>
    </div>
</nav>

步骤3：在页脚中包括以下内容

<script>
  $('.sub-menu').addClass('dropdown-menu'); 
</script>

$（'.sub-menu'）.addClass（'dropdown-menu'）；

最后，不要忘记包含必要的引导CSS、js和jquery

---

PS：我希望你会选择第一种方法

我已经使用了第一个选项，但我有一些问题。此代码没有在子菜单部分生成。我希望你理解我的问题。你们有解决方案吗？看来你们生成的html代码是完美的，它有所有必要的类和html标记，这有什么错吗？是的，它是完美的。我只是忘了添加类内部。现在开始工作了。非常感谢。对于我定制的链接wp_bootstrap_navwalker.php.Great，非常感谢@ArunThe method 1非常完美！谢谢

<script>
  $('.sub-menu').addClass('dropdown-menu'); 
</script>