Wordpressにブートストラップメニューを登録するには？

Question

ここで私は間違いをしましたか？ WordpressのNavメニューは、HTML Bootstrapのナビゲーションメニューとは異なります。

私はこれを使用し、HTML文書と同じ結果を得ていませんでした。

<?php 
wp_nav_menu(array(
    'theme_location' => 'primary', 
    'container' => 'nav', 
    'container_class' => 'navbar-collapse collapse', 
    'menu_class' => 'nav navbar-nav' 
)); 
?> 

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li><a href="services.html">Services</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="steelandfire.html">Steel and fire doors</a></li> 
       <li><a href="stainless.html">Stainless steel doors</a></li> 
       <li><a href="acoustic.html">Acoustic doors</a></li> 
       <li><a href="sliding.html">Sliding doors</a></li> 
       <li><a href="revolving.html">Revolving doors</a></li> 
       <li><a href="roller.html">Roller shutters</a></li> 
       <li><a href="curtains.html">Fire curtains</a></li> 
       <li><a href="gates.html">Gates</a></li> 
       <li><a href="rapid.html">Rapid doors</a></li> 
       <li><a href="access.html">Access control</a></li> 
       <li><a href="accessories.html">Accessories</a></li> 
       <li class="divider"></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Industry <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Medical</a></li> 
       <li><a href="#">Office and Residential</a></li> 
       <li><a href="#">Industrial</a></li> 
       <li><a href="#">Education</a></li> 
       <li><a href="#">Retail</a></li> 
       <li><a href="#">Shopping Mall</a></li> 
       <li><a href="#">Transportation</a></li> 
       <li><a href="#">Warehouse and Logistics</a></li> 
       <li class="divider"></li> 
      </ul> 
     </li> 
     <li><a href="projects.html">Projects</a></li> 
     <li><a href="contact.html">Contacts</a></li> 
    </ul> 
</div> 

Answer 1

ブートストラップナビウォーカー機能を使用できます。 ブートストラップナビウォーカーファイルをダウンロードし、テーマのルートディレクトリにアップロードします。 https://github.com/twittem/wp-bootstrap-navwalker。

<?php 

          wp_nav_menu(array(

           'menu'    => 'primary', 

           'theme_location' => 'primary', 

           'depth'    => 2, 

           'container'   => 'div', 

           'container_class' => 'collapse navbar-collapse', 

           'container_id'  => 'b3-navigation', 

           'menu_class'  => 'nav navbar-nav navbar-right', 

           'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 

           'walker'   => new wp_bootstrap_navwalker()) 

         ); 

         ?> 

ブートストラップのようなメニューを実装するのは非常に簡単です。
私はこれがあなたのために働くことを願っています。

Answer 2

あなたは

class WPSE_78121_Sublevel_Walker extends Walker_Nav_Menu { 

function start_lvl(&$output, $depth = 0, $args = array()) { 
    $indent = str_repeat("\t", $depth); 
    $output .= "\n$indent<ul class='dropdown-menu'>\n"; 
} 

function end_lvl(&$output, $depth = 0, $args = array()) { 
    $indent = str_repeat("\t", $depth); 
    $output .= "$indent</ul>\n"; 
} 

} 

Wordpressのウォーカークラスを適用する必要があるかもしれませんサブメニューでは、以下のコード

wp_nav_menu(
    array(
    'menu' => 'main navigation', 
    'container' => 'div', 
    'container_class' => 'collapse navbar-collapse', 
    'container_id' => 'bs-example-navbar-collapse-1', 
    'theme_location' => 'main navigation', 
    'walker' => new WPSE_78121_Sublevel_Walker 
     ) 
); 

を適用することができるが、それは願っていますが...

を支援