web-dev-qa-db-fra.com

Convertir la barre de navigation Bootstrap au menu WordPress

Je sais qu'il y a beaucoup de sujets à ce sujet sur le net mais je les trouve très compliqués. En gros, je veux convertir un menu de navigation Bootstrap en un menu WordPress.

Disons que j'ai la Bootbar Navbar par défaut:

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

Normalement, je lierais cette barre de navigation à mes pages WordPress au lieu d’énumérer manuellement chaque <li> j’utiliserais ce qui suit:

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

La sortie de ceci listerait toutes mes pages que j'ai créées 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>

Tout va bien car je peux ajouter une page et elle est incluse dans mon menu comme prévu.

Le problème

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

<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 pourrais-je intégrer cela à WordPress afin que la prochaine fois, si je veux ajouter une nouvelle liste déroulante, je puisse facilement le faire de la même manière que les éléments de menu normaux?

Je vous en serais reconnaissant si vous ne fournissiez pas de liens vers des sites Web WordPress codex ni d’autres didacticiels, car j’ai déjà essayé beaucoup de choses.

phphtmlcsswordpresstwitter-bootstrap
10
user3574492

Vous devez utiliser ce fichier https://github.com/twittem/wp-bootstrap-navwalker , ajouter le fichier de navigation et suivre les instructions. Voici un exemple tiré d'un site aléatoire que j'ai créé. Je ne l'adapte pas à votre propre site, car vous devrez apprendre cela pour tous vos futurs développements WP. C'est incroyablement facile, allez voir:

    <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 peut-être remarqué, vous devez fondamentalement remplacer ce qui se trouve après votre code. 

 <!-- 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 le tour est joué

18
Devin

Vous pouvez remplacer l'élément ul à l'intérieur de la div de class collapse navbar-collapse avec wp_nav_menu comme exemple suivant.

                <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>
0
John Pluto Solutions