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

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

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

Este es un tutorial detallado. Le mostraremos el método de complemento para principiantes (sin codificación) y el método de codificación para nuestros usuarios más avanzados.

Al final de este tutorial, aprenderá cómo crear un menú emergente deslizante, un menú emergente desplegable y un menú emergente alternativo.

Listo? Empecemos.

Video tutorial

Regístrese en 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 fácil y recomendado para principiantes, ya que no requiere una codificación personalizada.

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

Demostración de plug-in de menú receptivo

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

Después de la activación, el complemento agregará un nuevo elemento de menú llamado “Menú receptivo” a su barra de administración de WordPress. Al hacer clic en él, se accede a la página de configuración del complemento.

Ajustes del menú receptivo

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

Después de eso, debe seleccionar el menú que desea usar para el 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ú sin respuesta actual. Esto permitirá que el complemento oculte su menú que no responde en pantallas más pequeñas.

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

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

Demostración de plug-in 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: agregue un menú de selección desplegable utilizando un complemento

Otra forma de agregar un menú receptivo es agregar un menú desplegable. 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 del menú de selección sensible. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

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

Seleccionar configuraciones de menú

Debes desplazarte hacia abajo hasta la sección “Habilitar ubicaciones de tema”. De forma predeterminada, el complemento está habilitado en todas las ubicaciones del tema. Puede cambiar esto activándolo selectivamente para ubicaciones temáticas específicas.

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

Ahora puede visitar el 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: cree un menú adaptable para dispositivos móviles con efecto de alternar

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

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

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

(función () {
var nav = document.getElementById (‘navegación del sitio’), botón, menú;
if (! nav) {
Devoluciones;
}

button = nav.getElementsByTagName (‘botón’) (0);
menu = nav.getElementsByTagName (‘ul’) (0);
if (botón!) {
Devoluciones;
}

// Ocultar botón si falta el menú o está vacío.
if (! menu ||! menu.childNodes.length) {
button.style.display = ‘ninguno’;
Devoluciones;
}

button.onclick = function () {
¿Qué pasa si (-1 === menu.className.indexOf (‘menú de navegación’)) {
menu.className = ‘menú de navegación’;
}

¿Qué pasa si (-1! == button.className.indexOf (‘alternate’)) {
button.className = button.className.replace (‘alternated’, ”);
menu.className = menu.className.replace (‘alternated’, ”);
} otro {
button.className + = ‘alternativo’;
menu.className + = ‘alternativo’;
}
};
}) (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 el directorio del tema con el directorio del tema actual. Si el directorio del tema no tiene una carpeta js, deberá crearlo.

Después de cargar el archivo JavaScript, el siguiente paso es asegurarse de que su sitio de WordPress cargue ese 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’, verdadero);

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.

Publicaciones relacionadas

Botón volver arriba