Comment créer un menu WordPress réactif à l'aide de Bootstrap Nav Walker

Vous cherchez un moyen de commencer avec un menu de navigation réactif en utilisant Bootstrap ? Bien qu'il existe probablement un plugin pour cela, nous avons créé un extrait de code rapide que vous pouvez utiliser pour créer complètement un menu WordPress réactif en utilisant le nav walker Bootstrap dans WordPress.

Instructions :

Tout d'abord, vous devez télécharger le fichier wp_bootstrap_navwalker.php depuis ici et le téléverser dans le dossier wp-content/themes/votre-thème.

Après cela, vous devez ajouter ce code au fichier functions.php de votre thème ou dans un plugin spécifique au site :

// Register Custom Navigation Walker for function.php
require_once('wp_bootstrap_navwalker.php');

Ensuite, vous devez créer un menu Bootstrap et ajouter le code suivant au fichier header.php de votre thème.

// Create navigation
<div class="navbar " role="navigation">
            <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>
	        </div>
	
		    <div class="navbar-collapse collapse ">
				<?php  /* menu */
			       	wp_nav_menu( array(
							    'menu'              => 'primary-menu',
			       				'theme_location'    => 'primary-menu',
				        		'depth'             => 5,
				        		'container'         => 'div',
				        		'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse ',
				        		'menu_class'        => 'nav navbar-nav  ',
				        		'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
				        		'walker'            => new wp_bootstrap_navwalker())
					); 
				 ?>
           	</div>
		</div><!--	Navigation -->


?>

Assurez-vous de remplacer le paramètre 'menu' par le nom de votre menu Bootstrap.

Note : Si c'est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez consulter notre guide sur comment ajouter correctement des extraits de code dans WordPress, afin de ne pas casser accidentellement votre site.

Si vous avez aimé cet extrait de code, veuillez envisager de consulter nos autres articles sur le site comme : 50+ meilleurs thèmes WordPress réactifs pour créer un site prêt pour mobile et comment créer un formulaire de candidature dans WordPress.