Cómo crear un menú de WordPress receptivo listo para dispositivos móviles

¿Desea crear un menú de WordPress sensible para dispositivos móviles? Los usuarios móviles ya han superado a los usuarios de escritorio en muchos sitios web. Agregar un menú móvil adaptable facilita a los usuarios navegar por su sitio web. En este artículo, le mostraremos cómo crear fácilmente un menú de WordPress receptivo listo para dispositivos móviles.

Crear un menú de WordPress adaptable a dispositivos móviles

Este es un tutorial en profundidad. Mostraremos tanto el método de complemento para principiantes (sin codificación) como el método de codificación para nuestros usuarios más avanzados.

Al final de este tutorial, aprenderá a crear un menú móvil deslizable, un menú móvil desplegable y un menú móvil de alternancia.

Listo? Empecemos.

Video Tutorial

Suscríbase a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Método 1: Agregue un menú receptivo en WordPress usando un complemento

Este método es más fácil y recomendado para principiantes ya que no requiere codificación personalizada.

En este método, crearemos un menú de hamburguesas que se desliza en la pantalla del móvil.

Demostración de plugin de menú receptivo

Lo primero que debe hacer es instalar y activar el complemento Responsive Menu. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, el complemento agregará un nuevo elemento de menú etiquetado como “Menú receptivo” a su barra de administración de WordPress. Al hacer clic en él, accederá a la página de configuración del complemento.

Ajustes del menú receptivo

Primero debe ingresar el ancho de la pantalla, en cuyo punto el complemento comenzará a mostrar un menú receptivo. El valor predeterminado es 800 px, que debería funcionar para la mayoría de los sitios web.

Después de eso, debe seleccionar el menú que desea utilizar para su menú receptivo. Si aún no ha creado un menú, puede crear uno visitando Apariencia »Menús. Consulte nuestra guía sobre cómo agregar el menú de navegación en WordPress para obtener instrucciones detalladas.

La última opción en la pantalla es proporcionar una clase CSS para su menú actual que no responde. Esto permitirá que el complemento oculte su menú que no responde en pantallas más pequeñas.

No olvides hacer clic en el “Opciones de actualización” botón para almacenar su configuración.

Ahora puede visitar su sitio web y cambiar el tamaño de la pantalla de su navegador para ver el menú receptivo en acción.

Demostración de plugin de menú receptivo

El complemento de menú receptivo viene con muchas otras opciones que le permiten cambiar el comportamiento y la apariencia de su menú receptivo. Puede explorar estas opciones en la página de configuración del complemento y ajustarlas según sea necesario.

Método 2: Agregar un menú de selección desplegable usando un complemento

Otra forma de agregar un menú receptivo es agregando un menú desplegable de selección. Este método no requiere ninguna habilidad de codificación, por lo que se recomienda para principiantes.

Menú de selección receptivo

Lo primero que debe hacer es instalar y activar el complemento Responsive Select Menu. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar Apariencia »Responsive Select para configurar los ajustes del complemento.

Seleccionar configuraciones de menú

Debe desplazarse hacia abajo hasta la sección “Activar ubicaciones de temas”. Por defecto, el complemento se activa en todas las ubicaciones de temas. Puede cambiar eso activándolo selectivamente para ubicaciones de temas específicos.

No olvide hacer clic en el botón Guardar todas las configuraciones para almacenar sus cambios.

Ahora puede visitar su sitio web y cambiar el tamaño de la pantalla del navegador para ver el menú de selección receptivo en acción.

Método 3: Crear un menú receptivo amigable para dispositivos móviles con efecto de alternancia

Uno de los métodos más utilizados para mostrar un menú en pantallas móviles es mediante el uso del efecto de alternancia.

Este método requiere que agregue código personalizado a sus archivos de WordPress. Si no ha hecho esto antes, eche un vistazo a nuestra guía sobre cómo pegar fragmentos de la web en WordPress.

Primero debe abrir un editor de texto como el bloc de notas y pegar este código.

( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav ) {
		return;
	}

	button = nav.getElementsByTagName( 'button' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button ) {
		return;
	}

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
			menu.className = 'nav-menu';
		}

		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )(jQuery);

Ahora necesita guardar este archivo como navigation.js en su escritorio.

A continuación, debe abrir un cliente FTP para cargar este archivo en la carpeta / wp-content / themes / your-theme-dir / js / en su sitio de WordPress.

Reemplace su directorio de tema con el directorio de su tema actual. Si su directorio de temas no tiene una carpeta js, entonces necesita crearlo.

Después de cargar el archivo JavaScript, el siguiente paso es asegurarse de que su sitio de WordPress cargue este JavaScript. Deberá agregar el siguiente código al archivo functions.php de su tema.

 
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

Ahora necesitamos agregar el menú de navegación a nuestro tema de WordPress. Por lo general, el menú de navegación se agrega al archivo header.php de un tema.



Asumimos que la ubicación del tema definida por su tema se llama primaria. Si no es así, utilice la ubicación del tema definida por su tema de WordPress.

El paso final es agregar CSS para que nuestro menú use las clases de CSS correctas para que funcione cuando se ve en dispositivos móviles.

/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
	color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
	display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover,
	.main-navigation li a:focus {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus > ul,
	.main-navigation .focus > ul {
		border-left: 0;
		clip: inherit;
		overflow: inherit;
		height: inherit;
		width: inherit;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover,
	.main-navigation li ul li a:focus {
		background: #e3e3e3;
		color: #444;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
	.menu-toggle {
		display: none;
	}
	
	}

Ahora puede visitar su sitio web y cambiar el tamaño de la pantalla de su navegador para ver su menú de respuesta en acción.

Alternar vista previa del menú

Solución de problemas: Dependiendo de su tema de WordPress, es posible que deba ajustar el CSS. Use la herramienta de inspección de elementos para descubrir los conflictos CSS con su tema.

Método 4: Agregue un menú móvil deslizable en WordPress

Otra técnica común para agregar un menú móvil es mediante el uso de un menú de panel deslizable (como se muestra en el Método 1).

El Método 4 requiere que agregue código a sus archivos de tema de WordPress, y es solo una forma diferente de lograr los mismos resultados que el Método 1.

Primero, debe abrir un editor de texto sin formato como el Bloc de notas y agregar el siguiente código a un archivo de texto en blanco.

(función ($) {
$ ('# alternar'). alternar (
    función () {
        $ ('# popout'). animate ({left: 0}, 'slow', function () {
            $ ('# alternar'). html ('cerca');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('cerrar');
        });
    }
);
}) (jQuery);

No olvide reemplazar example.com con su propio nombre de dominio y su tema con su directorio de temas real. Guarde este archivo como slidepanel.js en su escritorio.

Ahora necesitará una imagen que se utilizará como icono de menú. Un ícono de hamburguesa se usa más comúnmente como ícono de menú. Encontrará toneladas de imágenes de diferentes sitios web. Utilizaremos el ícono de menú de la biblioteca de Google Material Icons.

Una vez que encuentre una imagen que quiera usar, guárdela como menu.png.

A continuación, debe abrir un cliente cliente FTP y cargar el archivo slidepanel.js en la carpeta / wp-content / your-theme / js /.

Si su directorio de temas no tiene la carpeta JS, entonces necesita crear tit y luego cargar su archivo.

Después de eso, debe cargar el archivo menu.png en / wp-content / themes / your-theme / images / folder.

Una vez que se cargan los archivos, debemos asegurarnos de que su tema cargue el archivo JavaScript que acaba de agregar. Lo lograremos poniendo en cola el archivo JavaScript.

Agregue este código al archivo functions.php de su tema.

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

Ahora necesitamos agregar el código real en el archivo header.php de su tema para mostrar el menú de navegación. Debes buscar un código similar a este:

 'primary', 'menu_class' => 'nav-menu' ) ); ?>

Desea ajustar el menú de navegación existente con el código HTML para mostrar el menú del panel de diapositivas en pantallas más pequeñas.

mostrar
'primary', 'menu_class' => 'nav-menu')); ?>

Observe que el menú de navegación de su tema todavía está allí. Acabamos de envolverlo en HTML que necesitamos para activar el menú del panel deslizante.

El último paso es agregar CSS para ocultar el icono de la imagen del menú en pantallas más grandes. También deberá ajustar la posición del icono del menú.

Aquí hay un ejemplo de CSS que puede usar como punto de partida:

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

Dependiendo de su tema de WordPress, es posible que deba ajustar el CSS para evitar conflictos.

Así es como se veía en nuestro sitio web de demostración:

Menú deslizable receptivo en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo crear un menú de WordPress receptivo listo para dispositivos móviles. Es posible que también desee ver nuestra guía sobre cómo agregar un menú receptivo a pantalla completa en WordPress

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.