¿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
¿Te ha resultado útil??
0 / 0