Convertir Bootstrap barre de navigation pour WordPress menu

Je sais qu'il y a beaucoup de sujets à ce propos sur le net, mais je les trouve très compliqué. Fondamentalement, je veux convertir un fichier d'amorce menu de navigation pour un WordPress Menu.

Dire que j'ai le défaut de Bootstrap barre de navigation:

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

La façon dont je le ferais normalement le lien entre cette barre de navigation avec mes pages de WordPress est qu'au lieu de lister manuellement chaque <li> je voudrais utiliser le suivant:

    <ul class="nav navbar-nav">
<?php wp_list_pages('title_li=');?>
</ul>

La sortie de cette liste toutes mes pages que j'ai créé dans WordPress:

 <ul class="nav navbar-nav">
<li class="page_item page-item-9"><a href="...">About</a></li>
<li class="page_item page-item-2"><a href="...">Sample Page</a></li>
</ul>

C'est toute fine, je peux ajouter une page et il est inclus dans mon menu comme prévu.

Le problème

Le problème est que je ne sais pas comment inclure un élément de la liste déroulante dans la barre de menu et de l'intégrer dans WordPress, par exemple le menu item:

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>

Comment aurais-je l'intégrer à WordPress donc, la prochaine fois, si je veux ajouter une nouvelle liste déroulante, je peux facilement faire la même façon que les éléments de menu?

Je vous serais reconnaissant si vous n'avez pas de fournir des liens vers WordPress codex sites web et autres tutoriels que j'ai déjà essayé beaucoup de choses

OriginalL'auteur user3574492 | 2014-08-15

Vous avez besoin pour utiliser cette https://github.com/twittem/wp-bootstrap-navwalker , ajouter de la valeur liquidative walker fichier et suivez les instructions. Voici un exemple à partir d'un site au hasard que j'ai fait, je ne suis pas de l'ajuster à votre propre site, car vous aurez besoin d'apprendre pour tous vos futures WP développements. Il est incroyablement facile, check it out:

    <div id="nav">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php bloginfo('url'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a>
</div>
<?php
wp_nav_menu( array(
'menu'              => 'primary',
'depth'             => 2,
'container'         => 'div',
'container_class'   => 'navbar-collapse collapse',
'menu_class'        => 'nav navbar-nav',
'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
'walker'            => new wp_bootstrap_navwalker())
);
?>
</div><!-- /.container-fluid -->
</nav>
</div><!-- #nav -->

Comme vous l'avez remarqué, fondamentalement, vous devez remplacer ce qui est après votre code de

 <!-- Collect the nav links, forms, and other content for toggling -->

avec

<?php
wp_nav_menu( array(
'menu'              => 'primary',
'depth'             => 2,
'container'         => 'div',
'container_class'   => 'navbar-collapse collapse',
'menu_class'        => 'nav navbar-nav',
'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
'walker'            => new wp_bootstrap_navwalker())
);
?>

et voila

Quel est le bootstrap navwalker faire? met-il une option dans l'Apparence > Menus pour ajouter des listes déroulantes?
non, il ajoute juste un "pont" pour utiliser WP avec Bootstrap, vous allez utiliser Wp comme d'habitude, que nav walker va prendre soin de tout, de la conversion de votre WP menus à menus Bootstrap
Alors comment aurais-je ajouter de la liste déroulante dans le menu?
attendez, je suis confus. il semble que vous vous demandez comment utiliser WP, ce n'est pas lié à la méthode Bootstrap. Si c'est le cas, dans votre Menu > section Apparence, il suffit de placer vos sous-pages de la page principale, puis faites-les glisser vers la droite pour les faire agir à titre de sous-menus. C'est de base de WP de connaissances, de sorte que vous ne savez pas si c'est ce que vous me demandez
Non, je ne sais comment faire, j'ai mal compris ton post. Grand que de faire le travail. Merci

OriginalL'auteur Devin

Vous pouvez remplacer l'élément ul à l'intérieur de la div de effondrement de la classe navbar-effondrement avec wp_nave_menu que suivre l'exemple.

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right'))
?>
</div>

OriginalL'auteur John Pluto Solutions

Vous devez vous connecter pour publier un commentaire.