Cómo crear un menú responsivo en WordPress usando Bootstrap Nav Walker

¿Estás buscando una manera de empezar con un menú de navegación responsivo usando Bootstrap? Mientras que probablemente hay un plugin para esto, hemos creado un fragmento de código rápido que puede utilizar para crear completamente un menú de WordPress sensible usando Bootstrap nav walker en WordPress.

Instrucciones:

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

Después de eso, es necesario agregar este código al archivo functions.php de su tema o en un plugin específico del sitio:

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

A continuación, debes crear un menú Bootstrap y añadir 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 sustituir el parámetro ‘menu’ por el nombre de tu menú Bootstrap.

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

Si te ha gustado este fragmento de código, por favor, considere la posibilidad de comprobar hacia fuera nuestros otros artículos en el sitio como: 50+ best responsive WordPress themes to create a mobile ready site y cómo crear un formulario de solicitud de empleo en WordPress.