Sage 8 : Navigation Bootstrap

Pour générer un menu de navigation bootstrap avec Sage 8, vous aurez besoin de passer par un Navwalker pour obtenir le rendu HTML attendu.

Pour ce faire, vous devez télécharger le fichier class-wp-bootstrap-navwalker.php puis le déposer le dans le répertoire /lib de votre thème.

Ensuite, il suffit de loader le fichier à partir de functions.php :

$sage_includes = [
  'lib/cpt.php',       // CPT
  'lib/assets.php',    // Scripts and stylesheets
  'lib/extras.php',    // Custom functions
  'lib/setup.php',     // Theme setup
  'lib/titles.php',    // Page titles
  'lib/wrapper.php',   // Theme wrapper class
  'lib/customizer.php', // Theme customizer
  'lib/class-wp-bootstrap-navwalker.php'
];

Modifier le fichier templates/header.php pour appeler le nouveau walker :

<header class="banner">
  <nav class="navbar navbar-expand-lg navbar-dark navbar-uwinpronos fixed-top">
    <a class="brand navbar-brand" href="<?= esc_url(home_url('/')); ?>" alt="<?php bloginfo('name'); ?>">BRAND NAME</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarMenu">
      <?php
        if (has_nav_menu('primary_navigation')) :
          wp_nav_menu([
          'theme_location'  => 'primary_navigation', 
          'walker'          => new WP_Bootstrap_Navwalker(), 
          'menu_class'      => 'nav navbar-nav ml-auto',
          ]);
        endif;
      ?>
    </div>
  </nav>
</header>

Vous avez un projet ?