Cómo crear un menú de WordPress con capacidad de respuesta para dispositivos móviles

¿Quieres crear un menú de WordPress que responda a las necesidades del móvil? Los usuarios móviles ya han superado a los usuarios de escritorio en muchos sitios web. Agregar un menú de respuesta móvil facilita a los usuarios la navegación en su sitio web. En este artículo, le mostraremos cómo crear fácilmente un menú de WordPress con capacidad de respuesta para móviles.

Este es un tutorial en profundidad. Mostraremos tanto el método de plugin 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 de diapositivas, un menú móvil desplegable y un menú móvil de conmutación.

¿Listo? Vamos a empezar.

Video Tutorial

Suscribirse a AprenderWP

Si no te gusta el video o necesitas más instrucciones, entonces continúa leyendo.

Método 1: Añadir un menú de respuesta en WordPress usando un plugin

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

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

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

Al activarlo, el plugin agregará un nuevo elemento de menú llamadoResponsive Menu a la barra de administración de WordPress. Al hacer clic en él, accederá a la página de configuración del plugin.

Primero debe introducir el ancho de la pantalla, momento en el que el plugin comenzará a mostrar el menú de respuesta. El valor por defecto es 800px que debería funcionar para la mayoría de los sitios web.

Después de eso, necesita seleccionar el menú que le gustaría usar para su menú de respuesta. Si aún no ha creado un menú, puede crear uno visitando Apariencia " Menús . Vea 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 plugin oculte el menú que no responde en pantallas más pequeñas.

No olvide hacer clic en el botón Actualizar opciones para guardar su 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.

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

Método 2: Añadir un menú desplegable de selección usando un plugin

Otra forma de añadir un menú sensible es añadiendo un menú desplegable de selección. Este método no requiere ninguna habilidad de codificación, por lo que se recomienda para principiantes.

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

Tras la activación, debe visitar Apariencia " Responsive Select para configurar la configuración del plugin.

Necesitas desplazarte hacia abajo hasta la secciónActivar ubicaciones de temas. Por defecto, el plugin se activa en todas las ubicaciones de los temas. Puede cambiarlo encendiéndolo selectivamente para ubicaciones de temas específicos.

No olvide hacer clic en el botón Guardar todos los ajustes para guardar los cambios.

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

Método 3: Creación de un menú de respuesta móvil con efecto Toggle

Uno de los métodos más comunes para mostrar un menú en las pantallas de los móviles es usando el efecto Toggle.

Este método requiere que añada código personalizado a sus archivos de WordPress. Si no lo has hecho antes, echa un vistazo a nuestra guía para pegar fragmentos de la web en WordPress.

Primero necesita abrir un editor de texto como notepad y pegar este código.

12345678910111213141415161717181920212223242526272829303132( function() { varnav = document.getElementById( site-navigation), botón, menú; if(! nav ) { return; } botón = nav.getElementsByTagName(botón)[0]; menú = nav.getElementsByTagName(ul)[0]; if( ! botón ) { return; }     // 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, necesita abrir un cliente FTP para subir este archivo a la carpeta /wp-content/themes/your-theme-dir/js/ de su sitio WordPress.

Reemplace su directorio temático por el directorio de su tema actual. Si su directorio temático no tiene una carpeta js, entonces necesita crearla.

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

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

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

1234 "site-navigation "role="navigation">>Menu ` primary, ` menu_class=>nav-menu) ); ?>

Estamos asumiendo que la ubicación del tema definida por su tema se llama primaria. Si no lo es, entonces usa la ubicación del tema definida por tu tema de WordPress.

El paso final es añadir CSS para que nuestro menú utilice las clases CSS correctas para que el conmutador funcione cuando se vea en dispositivos móviles.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121/* Menú de navegación */.navegación principal { margin-navigation: 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: #5e5e5e5e;}.navegacion principal a:hover,.navegacion principal 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 para usar en dispositivos móviles @media screenand (min-width: 600px) { .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul { border-bottom: 1pxsolid#ededed; border-top: 1pxsolid#eded; 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: #6a6a6a6a; línea-altura: 3.692307692; texto-transforma: mayúsculas; espacio en blanco: nowrap; } .navegación principal li a:hover, .navegación principal li a:focus { color: #000; }.main-navigation li { margen: 040px00; margen: 02.857142857rem 00; posición: relativa; }.main-navigation li ul { margen: 0; relleno: 0; posición: absoluta; arriba: 100%; índice Z: 1; altura: 1px; anchura: 1px; desbordamiento: oculto; clip: rect(1px, 1px, 1px, 1px, 1px); } .main-navigation li ul { top: 0; izquierda: 100%; } .main-navigation ul li:hover> ul, .main-navigation ul li:focus> ul, .main-navigation .focus> ul,.main-navigation .focus> ul { border-left: 0; clip: inherit; overflow: inherit; height: inherit; width: inherit; } .main-navigation li li li li a { background: #efefefefef; border-bottom: 1pxsolid#ededed; pantalla: bloque; tamaño de fuente: 11px; tamaño de fuente: 0.785714286rem; altura de línea: 2.18181818182; acolchado: 8px10px; acolchado: 0.571428571rem 0.714285714rem; anchura: 180px; anchura: 12.85714286rem; espacio en blanco: normal; } .main-navigation li li li li a:hover, .main-navigation li li li a:focus { background: #e3e3e3; color: #444; } .navegacion principal .actual-menu-item> a, .navegacion principal .navegacion principal .actual-menu-ancestor> a, .navegacion principal .actual_pagina_item> a, .navegacion principal .navegacion principal .actual_pagina_ancestor> a { color: #636363; font-weight: negrita; } .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 conmutación sensible en acción.

Solución de problemas: Dependiendo de su tema de WordPress puede que necesite ajustar el CSS. Utilice la herramienta inspeccionar elemento para averiguar los conflictos de CSS con su tema.

Método 4: Añadir un menú móvil Slide-In en WordPress

Otra técnica común para añadir un menú móvil es utilizar un menú de panel deslizante (como se muestra en el Método 1).

El método 4 requiere que añada código a sus archivos de tema de WordPress, y es sólo una forma diferente de lograr los mismos resultados que el método 1.

Primero, necesita abrir un editor de texto plano como el Bloc de notas y añadir el siguiente código a un archivo de texto en blanco.

1234567891011121314(function($) {$(#toggle).toggle( function() { $(#popout).animate({ left: 0 }, `low, function() { $(#toggle).html( ); }); }, function() { $(#popout).animate({ izquierda: -250 }, `lento, function() { $(#toggle).html( ); }); })(jQuery);

No olvide reemplazar example.com con su propio nombre de dominio y su tema con su directorio temático actual. Guarde este archivo como slidepanel.js en su escritorio.

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

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

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

Si su directorio temático no tiene la carpeta JS, entonces necesita crear tit y luego subir su archivo.

Después de eso, necesita subir el archivo menu.png a la carpeta /wp-content/themes/your-theme/images/.

Una vez cargados los archivos, debemos asegurarnos de que el tema cargue el archivo JavaScript que acaba de añadir. Esto lo lograremos haciendo cola en el archivo JavaScript.

Añada este código al archivo functions.php de su tema.

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

Ahora necesitamos añadir el código real en el archivo header.php de tu tema para mostrar el menú de navegación. Deberías buscar un código similar a este:

1 ` primario, menu_class=> nav-menu) ); ?>

Usted quiere envolver el menú de navegación existente con el código HTML para mostrar el menú de su panel de diapositivas en pantallas más pequeñas.

12345 "toggle"> "popout"> ` primary, ` menu_class=> ` nav-menu)); ?>

Observe que el menú de navegación de su tema sigue allí. Acabamos de envolverlo en HTML que necesitamos para activar el menú del panel de diapositivas.

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

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

123456789101112131414151617181920212223242526272829303132333435363738394041424344454647@media screenand (min-width: 769px) { #toggle {display:none;} }  @media screenand (max-width: 768px) { #popout {position: fixed;height: 100%;width: 250px;background: rgb(25, 25, 25, 25);background: rgba(25, 25, 25, 25, .9);color: white;top: 0px;izquierda: -250px;overflow:auto;}  #toggle {float: right;position: fixed;top: 60px;right: 45px;width: 28px;height: 24px; } .nav-menu li { border-bottom:1pxsolid#eee; padding:20px;width:100%;} .nav-menu li:hover { background:#CCC;} .nav-menu li a { color:#FFF;text-decoration:none;width:100%;}}}.

Dependiendo del tema de WordPress, puede ser necesario ajustar el CSS para evitar conflictos.

Aquí está cómo se veía en nuestro sitio web de demostración:

Esperamos que este artículo le haya ayudado a aprender a crear un menú WordPress con capacidad de respuesta para dispositivos móviles. También puede ver nuestra guía sobre cómo añadir un menú de respuesta a pantalla completa en WordPress

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.