Cómo crear un menú móvil adaptable de WordPress

 

¿Quieres crear un menú de WordPress móvil y receptivo? Los usuarios de dispositivos móviles ya han superado a los usuarios de escritorio en muchos sitios web. Agregar un menú de usuario receptivo hace que sea más fácil para los usuarios navegar por su sitio web. En este artículo, le mostraremos cómo crear fácilmente un menú de WordPress compatible con dispositivos móviles.

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

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

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

Listo? Vamos a empezar.

Video tutorial

Suscríbete a WPBeginner

Si no le gusta el video o necesita más instrucciones, siga leyendo.

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

Este método es más simple y se recomienda para principiantes, ya que no requiere codificación personalizada.

En este método, creamos un menú de hamburguesa que se mostrará en la pantalla del móvil.

Demostración del complemento de menú receptivo

Lo primero que debe hacer es instalar y activar Menú de respuesta Enchufar. Para obtener más información, consulte nuestra guía paso a paso sobre la instalación de un complemento de WordPress.

Después de la activación, el complemento agrega un nuevo elemento de menú llamado «Menú de respuesta» a la barra de administración de WordPress. Al hacer clic en él, accederá a la página de configuración del complemento.

Configuración de menú receptivo

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

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

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

No olvides hacer clic en eso ‘Opciones de actualización’ Guarde su botón de configuración.

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

Demostración del complemento de menú receptivo

El complemento Responsive Menu tiene muchas más opciones que puede usar para cambiar el comportamiento y la apariencia de su menú Responsive. 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ú desplegable usando un complemento

Otra forma de agregar un menú receptivo es agregar un menú desplegable. Este método no requiere ningún conocimiento de programación y, por lo tanto, se recomienda para principiantes.

Menú de selección receptivo

Lo primero que debe hacer es instalar y activar ese Menú de selección receptivo Enchufar. Para obtener más información, consulte nuestra guía paso a paso sobre la instalación de un complemento de WordPress.

Después de la activación, debe visitar Apariencia »Selección receptiva para configurar los ajustes del complemento.

Seleccione la configuración del menú

Debe desplazarse hacia abajo hasta la sección «Habilitar posiciones de tema». De forma predeterminada, el complemento está activado en todas las ubicaciones de los sujetos. Puede cambiar esto activándolo de forma selectiva para determinadas posiciones de tema.

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

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

Método 3: cree un menú de reacción optimizado para dispositivos móviles con un efecto de alternancia

Una de las formas más comunes de mostrar un menú en las pantallas de los dispositivos móviles es utilizar el efecto de alternancia.

Este método implica agregar código personalizado a sus archivos de WordPress. Si aún no lo ha hecho, consulte nuestra guía sobre cómo insertar 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 tu escritorio.

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

Reemplace su directorio de temas con el directorio de su tema actual. Si su directorio de temas no tiene una carpeta js, deberá crear una.

Después de cargar el archivo JavaScript, el siguiente paso es asegurarse de que su sitio de WordPress cargue este JavaScript. Necesita 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, se agrega un menú de navegación a un tema. header.php Archivo.

<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle">Menu</button>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

Suponemos que la ubicación del tema definida por su tema está designada como principal. Si no es así, use la ubicación del tema definida por su tema de WordPress.

El paso final es agregar CSS para que nuestro menú use las clases CSS correctas para alternar cuando se muestran 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 alternancia sensible 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. Utilice la herramienta Inspeccionar elemento para descubrir los conflictos de 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 usar un menú deslizante (como se muestra en el Método 1).

El método 4 implica agregar código a sus archivos de tema de WordPress. Esta es solo otra forma de obtener 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.

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

No olvide reemplazar example.com con su propio nombre de dominio y your-theme con su directorio de temas actual. Guarde este archivo como slidepanel.js en tu escritorio.

Ahora necesita una imagen que se utilizará como icono de menú. Un icono de hamburguesa se utiliza más comúnmente como icono de menú. Puede encontrar toneladas de imágenes de este tipo en varios sitios web. Usaremos el icono de menú de Iconos de material de Google Biblioteca.

Cuando encuentre una imagen que desee utilizar, guárdela como menu.png.

A continuación, debe abrir un cliente FTP y cargarlo. slidepanel.js Archivo /wp-content/your-theme/js/ Carpeta.

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

Entonces tienes que subir el archivo menu.png a /wp-content/themes/your-theme/images/ Carpeta.

Una vez que se cargan los archivos, debemos asegurarnos de que su diseño cargue el archivo JavaScript que acabamos de agregar. Hacemos esto poniendo en cola el archivo JavaScript.

Agrega este código al archivo functions.php de tu tema.

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

Ahora necesitamos pegar 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:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

Desea envolver el menú de navegación existente en el HTML para mostrar su menú de diapositivas en pantallas más pequeñas.

<div id="toggle">
<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Tenga en cuenta que el menú de navegación de su tema todavía está allí. Simplemente lo envolvimos en el HTML que necesitamos para activar el menú del panel deslizante.

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

Aquí hay un CSS de muestra 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 modificar el CSS para evitar conflictos.

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

Menú deslizante receptivo en WordPress

Esperamos que este artículo le haya ayudado a aprender a crear un menú móvil adaptable de WordPress. Es posible que también desee consultar nuestra guía sobre cómo agregar un menú de respuesta de pantalla completa en WordPress