Saltar al contenido principal

Cómo crear un menú sensible para WordPress móvil

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

¿Te gustaría crear un menú móvil receptivo en tu blog de WordPress?

Los usuarios móviles superan en número a los usuarios de escritorio hoy en día. La adición de un menú receptivo para dispositivos móviles facilita a los usuarios navegar por su sitio web.

En este tutorial, le mostraremos cómo crear fácilmente un menú receptivo en WordPress.

Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog

Luego de vuelta a por qué estamos aquí.

Esto profundizará al mostrarle tanto el método con un complemento para principiantes como el método de codificación para usuarios avanzados.

Primer método: crear un menú móvil con un complemento de WordPress

Este método es más fácil y recomendado para principiantes porque no requiere ninguna habilidad especial de codificación.

En este método, crearemos un menú (con un icono de hamburguesa) que se desliza en la pantalla del móvil.

demostración de menú-anfitriones

Lo primero que debe hacer es instalar y activar el Complemento de menú sensible de WordPress . Para más detalles, echa un vistazo a nuestra guía sobre cómo instalar un complemento de WordPress .

Después de activar el complemento, el complemento agregará un nuevo elemento en el menú, titulado " Menú sensible ". Al hacer clic en él, accederá a la página de configuración del complemento.

receptivo-wordpress-menú

Primero debe ingresar el tamaño desde el cual aparecerá el menú móvil. El valor predeterminado es 800 px, que debería funcionar para la mayoría de los sitios web.

Después de eso, debe seleccionar el menú que desea usar en el móvil.

La última opción en la pantalla le permite proporcionar una clase CSS para su menú. Esto permitirá que el complemento oculte su menú que no responde en pantallas más pequeñas.

No olvides hacer clic en « Las opciones de actualización Para guardar su configuración.

También te sugerimos que descubras nuestro Complementos de 10 WordPress para crear menús en tu blog

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

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

En el sitio de acción-menú sensible a móvil

El complemento « Menú sensible Ofrece 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: Cómo agregar un menú móvil manualmente

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

Este método requiere que agregue código personalizado a sus archivos de WordPress.

En uno de nuestros tutoriales anteriores, te mostramos cómo crear un complemento de WordPress.

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

(function () {nav var = document.getElementById ('site-navigation'), button, menu; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Ocultar botón si falta el menú o está vacío si (! 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 debe guardar este archivo con el nombre " navigation.js En tu escritorio

Luego debe abrir un cliente FTP para descargar este archivo a la ubicación "/ wp-content / themes / your-theme / js /" en su sitio web de WordPress.

Reemplace la expresión " Su tema Con el nombre de la carpeta de su tema actual de WordPress. Si su directorio de temas no tiene una carpeta js, debe crear una.

Después de descargar el archivo JavaScript, el siguiente paso es asegurarse de que su sitio web de WordPress cargue los archivos JavaScript. Deberá agregar el siguiente código al archivo functions.php De tu tema de WordPress.

Descubre otra cosa ¿Qué puedes hacer con el archivo functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (' jquery '), 20160909', true.);

Ahora tenemos que agregar 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 tu tema de WordPress.

<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 menú definida por su tema de WordPress se llama " primario ". Si no, use la ubicación definida por su tema de WordPress.

Descubre también nuestro 5 complementos de WordPress para crear formularios de suscripción

El último paso es agregar CSS para que nuestro menú use las clases de CSS correctas para alternar cuando se muestra en dispositivos móviles.

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

/ * Menú de navegación * / .main-navigation {margin-top: 24px; margen superior: 1.714285714rem; alinear 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 línea: 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 para usar en dispositivos móviles @media screen y (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; alinear texto: izquierda; ancho: 100%; } .main-navigation ul {margen: 0; sangría de texto: 0; } .main-navigation li a, .main-navigation li {display: inline-block; decoración de texto: ninguno; } .main-navigation li a {border-bottom: 0; color: #6a6a6a; altura de línea: 3.692307692; transformación de texto: mayúscula; espacio en blanco: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: #000; } .main-navigation li {margen: 0 40px 0 0; margen: 0 2.857142857rem 0 0; posición: relativa; } .main-navigation li ul {margen: 0; relleno: 0; posición: absoluta; arriba: 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 {fondo: #efefef; border-bottom: 1px solid #ededed; pantalla: bloque; tamaño de fuente: 11px; tamaño de fuente: 0.785714286rem; altura de línea: 2.181818182; relleno: 8px 10px; relleno: 0.571428571rem 0.714285714rem; ancho: 180px; ancho: 12.85714286rem; espacio en blanco: normal; } .main-navigation li li li: hover, .main-navigation li li li: focus {fondo: #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; 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 si su menú receptivo se está volteando.

Rocking-menu-wordpress-tutorial

Descubre también algunos complementos premium de WordPress

Puede usar otros complementos de WordPress para darle un aspecto moderno y optimizar el agarre de su blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. UberMenu

UberMenu es un complemento de WordPress dedicado a la creación de un megamenú altamente personalizable, receptivo y accesible para los usuarios. Es funcional después de la instalación, sin ninguna configuración especial.

Es un complemento fácil de usar, pero lo suficientemente potente como para crear configuraciones de megamenú altamente personalizables y creativas.

Vea también nuestro 9 plugins de WordPress para crear cuadrículas de precios en un blog

Encontrará entre otros: plantillas de menú 3, diseño totalmente receptivo, compatibilidad con dispositivos móviles (iPhone, iPad, Android), soporte táctil, etc.

Descargar | Demo | alojamiento web

2. LMM

Liquida Mega Menu, todavía llamado LMM, es un complemento de WordPress diseñado para usuarios y desarrolladores. Tiene una interfaz simple e intuitiva, integrada en el panel de control de WP, que le permite crear y personalizar una cantidad ilimitada de mega menús, sin ninguna habilidad de programación.

Viene con docenas de características, ya sea para usuarios regulares o avanzados. Como funcionalidades, ofrece entre otras: integración automática y manual, soporte para multisitio, cuidando los temas infantiles, el estilo totalmente personalizable para menús, ubicaciones de menú personalizables, el menú fijo, etc.

Descargar | Demo | alojamiento web

3. Menú 8Degree Fly

8Degree Fly Menu es un complemento premium de WordPress que le permite agregar un menú de lienzo en su sitio web, para darle un aspecto que resalte y facilite su información. Utiliza la función de menú predeterminada de WordPress para crear sus menús.

Podrá agregar elementos adicionales a los elementos de menú predeterminados, como iconos, lemas de menú, un encabezado de pseudogrupación y una descripción larga.

Lea también: 10 complementos de WordPress para optimizar barras laterales y encabezados adhesivos

También viene con un editor WYSIWYG para ayudarlo a comprender su descripción larga de una manera fácil de usar. Con este editor también puede usar códigos cortos.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [Recomendado]

Descargar | Demo | alojamiento web

Otros recursos recomendados

También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.

Conclusión

Listo ! Eso es todo para este tutorial, espero que te permita crear un menú para usuarios móviles. no dude en comparte el consejo con tus amigos en tus redes sociales.

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Pero mientras tanto, cuéntanos sobre tu comentarios y sugerencias en la sección dedicada.

...

Este artículo contiene los comentarios 2
  1. ¡Hola

    gracias por tu información

    No puedo encontrar "una clase CSS para su menú". Encontré la hoja de estilo css pero no sé qué copiar y pegar

    gracias de antemano por su ayuda

    buen fin de semana

    michel

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
5 acciones
cuota4
Tweet
Siguiente 1