如何在WordPress中註冊Bootstrap菜單？

我在哪裏犯了一個錯誤？ Wordpress中的導航菜單與HTML Bootstrap導航菜單看起來不同。如何在WordPress中註冊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>

來源

2017-01-30 becky

您可以使用引導程序nav walker功能。下載bootstrap nav walker文件並上傳到您的主題根目錄。 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()) 

         ); 

         ?>

這很容易實現類似bootstrap的菜單。
我希望這會爲你工作。

來源

2017-01-30 12:04:21

您可以運用下列代碼

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 
     ) 
);

對於子菜單，你可能需要申請WordPress的學步車類

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"; 
} 

}

希望它會幫助你...

來源

2017-01-30 12:08:58

如何在WordPress中註冊Bootstrap菜單？

回答

相關問題