¿Quieres crear un menú de WordPress adaptable y listo para dispositivos móviles? Los usuarios de dispositivos móviles ya han superado a los usuarios de escritorio en muchos sitios web. Agregar un menú móvil receptivo facilita a los usuarios navegar por su sitio web. En este artículo, le mostraremos cómo crear fácilmente un menú de WordPress adaptable y listo para dispositivos móviles.
Este es un tutorial detallado. 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á cómo crear un menú móvil deslizable, un menú móvil desplegable y alternar el menú móvil. ¿Listo? Empecemos.
Video tutorial
Contents
Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo.
Este método es más simple y recomendado para principiantes porque no requiere ninguna codificación personalizada. En este método, vamos a crear un menú de hamburguesas que se desliza por la pantalla del móvil.
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ú titulado « 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.
Primero debe ingresar el ancho de la pantalla en cuyo punto el complemento comenzará a 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 crear uno visitando Apariencia »Menús. Consulte nuestra guía sobre cómo agregar un menú de navegación en WordPress para obtener instrucciones paso a paso. 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 olvide hacer clic en el botón «Opciones de actualización» 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 complemento de menú receptivo viene con muchas otras opciones que le permiten modificar 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.
Otra forma de agregar un menú receptivo es agregar un menú de selección desplegable. Este método no requiere habilidades de codificación, por lo que se recomienda para principiantes.
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 »Selección sensible para configurar los ajustes del complemento.
Debe desplazarse hacia abajo hasta la sección «Habilitar ubicaciones de temas». De forma predeterminada, el complemento está habilitado en todas las ubicaciones de temas. Puede cambiar esto habilitándolo selectivamente para ubicaciones de temas específicos. Recuerde 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 del navegador para ver el menú de selección receptivo en acción.
Uno de los métodos más comunes que se utilizan para mostrar un menú en las pantallas de los dispositivos móviles es utilizar el efecto de alternancia. Este método requiere que agregue código personalizado a sus archivos de WordPress. Si nunca lo ha hecho antes, consulte nuestra guía sobre cómo pegar fragmentos 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) {retorno;} botón = nav.getElementsByTagName (‘botón’)[0]; menu = nav.getElementsByTagName (‘ul’)[0]; if (! button) {volver; } // Ocultar botón si falta el menú o está vacío. if (! menu ||! menu.childNodes.length) {button.style.display = ‘none’; volver; } 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 (‘habilitado’, »); } else {button.className + = ‘habilitado’; menu.className + = ‘habilitado’; }}; }) (jQuery); Ahora debería guardar este archivo con el nombre navigation.js en su escritorio. Luego, 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-tema con el directorio de su tema actual. Si su directorio de temas no tiene una carpeta js, debe crearla. 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’, verdadero); Ahora necesitamos agregar el menú de navegación en nuestro tema de WordPress. El menú de navegación generalmente se agrega en el archivo header.php de un tema.
Suponemos que la ubicación del tema definida por su tema se llama principal. De lo contrario, use la ubicación del tema definida por su tema de WordPress. El último paso es agregar algo de CSS para que nuestro menú use las clases de CSS correctas para que el interruptor funcione cuando se ve en dispositivos móviles. / * Menú de navegación * / .main-navigation {margin-top: 24px; margen superior: 1.714285714rem; alineación de texto: centro; } .main-navigation li {margin-top: 24px; margen superior: 1.714285714rem; tamaño de fuente: 12px; tamaño de fuente: 0.857142857rem; altura de la fila: 1.42857143; } .main-navigation tiene {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 para usar en dispositivos móviles @ pantalla multimedia y (ancho mínimo: 600 px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu ul {border-bottom: 1px solid # ededed ; borde superior: 1px sólido # editado; pantalla: bloquear en línea! importante; alineación de texto: izquierda; ancho: 100%; } .main-navigation ul {margin: 0; sangría de texto: 0; } .main-navigation li a, .main-navigation li {display: inline-block; decoración de texto: ninguna; } .main-navigation li a {border-bottom: 0; color: # 6a6a6a; altura de la fila: 3.692307692; text-transform: mayúsculas; espacio en blanco: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: # 000; }. main-navigation li {margin: 0 40px 0 0; margen: 0 2.857142857rem 0 0; posición: relativa; } .main-navigation li ul {margen: 0; acolchado: 0; posición: absoluta; Top 100%; índice z: 1; altura: 1px; ancho: 1px; desbordamiento oculto; clip: rect (1px, 1px, 1px, 1px); }. main-navigation li ul ul {top: 0; izquierda: 100%; } .main-navigation ul li: hover ul, .main-navigation ul li: focus ul, .main-navigation .focus ul {border-left: 0; clip: heredar; desbordamiento: heredar; altura: heredar; ancho: heredar; } .main-navigation li ul li a {fondo: #efefef; borde inferior: 1px sólido # editado; bloque de visualización; tamaño de fuente: 11px; tamaño de fuente: 0.785714286rem; altura de la fila: 2.181818182; relleno: 8px 10px; acolchado: 0.571428571rem 0.714285714rem; ancho: 180px; ancho: 12.85714286rem; espacio en blanco: normal; } .main-navigation li ul li a: hover, .main-navigation li ul li a: focus {background: # e3e3e3; color: # 444; } .main-navigation .main-menu-item a, .main-navigation .current-menu-ancestor a, .main-navigation .current_page_item a, .main-navigation .current_page_ancestor a {color: # 636363; peso de fuente: 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 alternancia sensible en acción.
Solución de problemas: Dependiendo de su tema de WordPress, es posible que deba ajustar el CSS. Utilice la herramienta Inspeccionar elementos para determinar los conflictos de CSS con su tema.
Otra técnica común para agregar un menú móvil es usar un menú de panel deslizante (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 texto en blanco expediente. (función ($) {$ (‘# toggle’). toggle (function () {$ (‘# popout’). animate ({left: 0}, ‘slow’, function () {$ (‘# toggle’ ) .html (‘
‘); }); }, función () {$ (‘# ventana emergente’). animar ({izquierda: -250}, ‘lento’, función () …
