¿Quieres crear un menú de WordPress adaptable y listo para dispositivos móviles? Los usuarios móviles ya han superado a los usuarios de escritorio en muchos sitios web. Agregar un menú receptivo para dispositivos móviles 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á a crear un menú móvil deslizable, un menú móvil desplegable y un menú móvil alternativo.
Listo? Empecemos.
Método 1: agregar 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 hacia afuera en 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ú con la etiqueta ‘Menú receptivo’ a la barra de administración de WordPress. Al hacer clic en él, accederá a la página de configuración del complemento.
Primero debe ingresar el ancho de la pantalla, momento en el que el complemento comenzará a mostrar un menú receptivo. 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 le gustaría 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 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 olvide hacer clic en el botón ‘Opciones de actualizació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ú de respuesta en acción.
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 mediante un complemento
Otra forma de agregar un menú receptivo es agregando 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 receptiva para configurar los ajustes del complemento.
Debe desplazarse hacia abajo hasta la sección ‘Activar ubicaciones de temas’. De forma predeterminada, el complemento está activado en todas las ubicaciones de temas. Puede cambiar eso encendié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: Creación de un menú receptivo compatible con dispositivos móviles con efecto de palanca
Uno de los métodos más comunes para mostrar un menú en las pantallas de los dispositivos móviles es el 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.jsen su escritorio.
A continuación, debe abrir un cliente FTP para cargar este archivo en la /wp-content/themes/your-theme-dir/js/carpeta de su sitio de WordPress.
Reemplace your-theme-directory con el directorio de su tema actual. Si su directorio de temas no tiene una carpeta js, entonces 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', 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 header.phparchivo de un tema .
<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 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 la alternancia 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 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 elemento para descubrir los conflictos de CSS con su tema.
Método 4: agregar un menú móvil deslizable en WordPress
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 archivo de texto en blanco.
(function($) {$('#toggle').toggle( function() { $('#popout').animate({ left: 0 }, 'slow', function() { $('#toggle').html('<img src="https://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />'); }); }, function() { $('#popout').animate({ left: -250 }, 'slow', function() { $('#toggle').html('<img src="https://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-themecon su directorio de temas real. Guarde este archivo slidepanel.jsen su escritorio.
Ahora necesitará una imagen que se utilizará como icono de menú. El icono de una hamburguesa se utiliza más comúnmente como icono de menú. Encontrará toneladas de imágenes de este tipo en diferentes sitios web. Usaremos el icono de menú de la biblioteca de iconos de materiales de Google .
Una vez que encuentre una imagen que desee usar, guárdela como menu.png.
A continuación, debe abrir un cliente FTP y cargar el slidepanel.jsarchivo en la /wp-content/your-theme/js/carpeta.
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 la /wp-content/themes/your-theme/images/carpeta.
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.
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 agregar el código real en el archivo header.php de su tema para mostrar el menú de navegación. Debería buscar un código similar a este:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
Desea envolver el menú de navegación existente con el código HTML para mostrar el menú del panel deslizante 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>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 ícono de la imagen del menú en pantallas más grandes. También deberá 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 ajustar el CSS para evitar conflictos.
Así es como se veía en nuestro sitio web de demostración:
Esperamos que este artículo le haya ayudado a aprender a crear un menú de WordPress adaptable y listo para dispositivos móviles. Es posible que también desee ver nuestra guía sobre cómo agregar un menú receptivo de pantalla completa en WordPress
FAQ: Preguntas y respuestas esenciales
¿Cómo puedes hacer que tu sitio web de WordPress sea compatible con dispositivos móviles?
Para hacer que tu sitio web de WordPress sea compatible con dispositivos móviles, puedes seguir los siguientes pasos: 1. Comprime tus archivos: La compresión de archivos como CSS, HTML y JavaScript ayudará a que tu página se cargue más rápido en dispositivos móviles. WordPress.com se encarga de la compresión automática. 2. Simplifica tu navegación: Asegúrate de que la navegación de tu sitio web sea sencilla y fácil de usar en dispositivos móviles. Utiliza menús desplegables o iconos intuitivos para simplificar la experiencia de usuario. 3. Escribe una copia web para dispositivos móviles: Adaptar tu contenido para dispositivos móviles implica utilizar un lenguaje claro y conciso, evitando bloque de texto largo o complicado de leer en pantallas pequeñas. 4. Utiliza un diseño responsive: Asegúrate de que tu sitio web esté diseñado de forma responsive, lo que significa que se adapte automáticamente al tamaño de pantalla de cada dispositivo. Esto permitirá que tu página se vea bien tanto en computadoras de escritorio como en dispositivos móviles. Estos son cuatro pasos básicos para hacer que tu sitio web de WordPress sea más compatible con dispositivos móviles. Recuerda seguir buenas prácticas de diseño y optimización para lograr una mejor experiencia para tus usuarios móviles.
¿Cómo hacer un menú Responsive en WordPress?
Para hacer un menú responsive en WordPress, existen varias opciones. Puedes utilizar un tema de WordPress responsive que ya incluya esta funcionalidad. También puedes usar un plugin como Responsive Menu o Max Mega Menu para agregar un menú responsive a tu sitio. Además, otra alternativa es añadir código CSS personalizado para ajustar el estilo del menú a diferentes tamaños de pantalla.
¿Cómo hacer un menú interactivo en WordPress?
Para hacer un menú interactivo en WordPress, sigue estos pasos: 1. Ve al Escritorio de WordPress y selecciona Apariencia > Menús. 2. Haz clic en ‘Crear un nuevo menú’ en la parte superior de la pantalla. 3. Ingresa el nombre del menú y haz clic en ‘Crear menú’. 4. A partir de ahí, podrás administrar la estructura del menú, añadiendo elementos como páginas, categorías, enlaces personalizados, etc. 5. Para hacer el menú interactivo, simplemente arrastra los elementos y organízalos según tu preferencia. 6. Guarda los cambios y verifica cómo se muestra el menú en tu sitio web en tiempo real. Recuerda que también puedes personalizar el estilo y diseño del menú mediante la configuración del tema de WordPress o con la ayuda de plugins adicionales si lo consideras necesario.
¿Cómo crear el menú en WordPress?
Para crear un menú en WordPress, debes seguir estos pasos: 1. Ve a Apariencia → Editor en tu sitio. 2. Selecciona la plantilla o parte de la plantilla que deseas que aparezca en el menú de navegación. 3. Haz clic en el icono del +Insertador de bloques. 4. Selecciona el bloque de Navegación para añadirlo a tu sitio. Siguiendo estos pasos podrás crear fácilmente un menú en tu sitio web de WordPress.
¿Te ha resultado útil??
0 / 0