Cómo resaltar la página actual en el menú de navegación de WordPress

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

Ultima actualización en por Debjit Saha

Extractos de IsItWP

¿Está buscando una forma de comenzar con un menú de navegación receptivo usando Bootstrap? Si bien es probable que haya un complemento para esto, hemos creado un fragmento de código rápido que puede usar para crear completamente un menú de WordPress receptivo usando Bootstrap nav walker en WordPress.

Instrucciones:

Primero debe descargar el archivo wp_bootstrap_navwalker.php de aquí y descárguelo en la carpeta wp-content / themes / your-theme.

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



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


A continuación, debe crear un menú Bootstrap y agregar el siguiente código al archivo header.php de su 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úrese de reemplazar la configuración del “menú” con el nombre de su menú Bootstrap.

Notar: Si esta es la primera vez que agrega fragmentos en WordPress, consulte nuestra guía sobre cómo agregar fragmentos correctamente en WordPress, para que no rompa accidentalmente su sitio.

Si le gustó este fragmento de código, consulte nuestros otros artículos en el sitio, tales como: Más de 50 temas de WordPress con mejor respuesta para crear un sitio listo para dispositivos móviles y Cómo crear un formulario de solicitud de empleo en WordPress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba