如何在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菜单？

回答

相关问题