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 responsive en utilisant Bootstrap ? Bien qu’il y ait 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 responsive en utilisant Bootstrap nav walker dans WordPress.

Instructions :

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

Ensuite, vous devez ajouter ce code au fichier functions.php de votre thème ou dans un plugin spécifique à votre 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 -->


?>

Veillez à 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 la manière d’ajouter correctement des extraits de code dans WordPress, afin de ne pas endommager accidentellement votre site.

Si vous avez aimé cet extrait de code, n’hésitez pas à consulter nos autres articles sur le site comme : 50+ meilleurs thèmes WordPress responsive pour créer un site mobile et comment créer un formulaire de demande d’emploi sur WordPress.