Cómo crear un menú de WordPress adaptable usando Bootstrap Nav Walker

¿Estás buscando una forma de empezar con un menú de navegación adaptable usando Bootstrap? Si bien probablemente haya un plugin para esto, hemos creado un fragmento de código rápido que puedes usar para crear completamente un menú de WordPress adaptable usando el nav walker de Bootstrap en WordPress.

Instrucciones:

Primero, necesitas descargar el archivo wp_bootstrap_navwalker.php desde aquí y subirlo a la carpeta wp-content/themes/tu-tema.

Después de eso, necesitas agregar este código al archivo functions.php de tu tema o a un plugin específico del sitio:

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

A continuación, necesitas crear un menú de Bootstrap y agregar el siguiente código al archivo header.php de tu tema.

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


?>

Asegúrate de reemplazar el parámetro 'menu' con el nombre de tu menú de Bootstrap.

Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo agregar fragmentos de código correctamente en WordPress, para que no rompas accidentalmente tu sitio.

Si te gustó este fragmento de código, considera revisar nuestros otros artículos en el sitio como: Más de 50 de los mejores temas adaptables de WordPress para crear un sitio listo para móviles y cómo crear un formulario de solicitud de empleo en WordPress.