Ofrecer un menú torpe, estilo escritorio, en un teléfono es una forma segura de frustrar a los visitantes. Y un menú móvil confuso puede hacer que se vayan igual de rápido.
Un menú de panel deslizante resuelve esto al darle a tu sitio una apariencia limpia, similar a una aplicación, que funciona maravillosamente en pantallas más pequeñas. Facilita la búsqueda de contenido y mantiene a los visitantes interesados.
Después de probar varios plugins para esta tarea exacta, encontramos una opción gratuita fantástica que es potente y fácil de configurar. Puedes crear un menú deslizante de aspecto profesional sin tocar una sola línea de código.
En esta guía, te mostraremos exactamente cómo agregar un menú de panel deslizante a tu tema de WordPress, paso a paso. 🎨
¿Por qué agregar un menú de panel deslizante en temas de WordPress?
Un menú de panel deslizante hace que la navegación en dispositivos móviles sea más fluida e intuitiva. Le da a tu sitio de WordPress una apariencia limpia, similar a una aplicación, ayudando a los visitantes a encontrar lo que buscan rápidamente sin sentirse perdidos o frustrados.
Los menús bien diseñados ayudan a tus visitantes a orientarse en tu sitio de WordPress. Muchos de tus visitantes usarán dispositivos móviles, por lo que es importante previsualizar la versión móvil de tu sitio de WordPress para ver cómo se ve tu menú de navegación en pantallas más pequeñas.
Afortunadamente, muchos temas de WordPress vienen con estilos integrados que muestran automáticamente menús amigables para móviles cuando se ven en una pantalla pequeña.
Sin embargo, es posible que desees personalizar aún más tu navegación móvil y agregar un menú responsive de pantalla completa o un menú de panel deslizante animado.
Con esto en mente, te mostraremos cómo agregar un menú de panel deslizante en temas de WordPress. Aquí tienes un resumen rápido de todos los temas que compartiremos en esta guía:
- Cómo agregar un menú de panel deslizante en temas de WordPress
- Preguntas Frecuentes Sobre Menús de Panel Deslizante
- Lectura Adicional: Más Recursos Sobre la Personalización de Menús del Sitio
Empecemos.
Cómo agregar un menú de panel deslizante en temas de WordPress
Lo primero que debes hacer es instalar y activar el plugin Responsive Menu. Si necesitas ayuda, puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
💡 Nota: Puedes seguir este tutorial usando el plugin gratuito. Si deseas temas adicionales y funciones avanzadas como lógica condicional, puedes actualizar a la versión premium del plugin Responsive Menu.
Tras la activación, naveguemos a Responsive Menu » Menus desde tu panel de WordPress. Una vez allí, deberías hacer clic en el botón ‘Crear Nuevo Menú’ en la parte superior de la pantalla.
Luego verás 4 temas que puedes usar para tu nuevo menú responsive. Hay temas adicionales disponibles para comprar.
Para este tutorial, usaremos el tema seleccionado automáticamente. Luego puedes hacer clic en el botón ‘Siguiente’.
Esto te llevará a la página de ‘Configuración del menú’.
Aquí, puedes ingresar un nombre para tu menú responsive y luego seleccionar qué menú de WordPress te gustaría que se muestre en el panel. Por ejemplo, elegimos el menú ‘Navegación’.
Si necesitas crear un nuevo menú, puedes aprender cómo siguiendo nuestra guía sobre cómo agregar un menú de navegación en WordPress.
También puedes ocultar el menú normal que viene con tu tema de WordPress para que tus usuarios solo vean el nuevo menú del panel deslizante. Haces esto ingresando código CSS en el campo ‘Ocultar menú del tema’.
El código que necesitas ingresar aquí varía de un tema a otro, y puedes aprender más detalles haciendo clic en el enlace ‘Saber más’.
📝 Nota: Los usuarios con la versión Pro tienen algunas configuraciones adicionales. Por ejemplo, los usuarios Pro pueden seleccionar los dispositivos y páginas donde se debe mostrar el menú.
Una vez que esté satisfecho con la configuración, debe hacer clic en el botón ‘Crear Menú’ en la parte inferior de la página. Esto lo llevará a una página donde podrá terminar de personalizar su menú.
Verá una vista previa de su sitio web en el lado derecho de la pantalla, y hay botones en la parte inferior para cambiar entre las vistas de teléfono, tableta y escritorio. También encontrará opciones de personalización a la izquierda.
Es posible que note que se muestra algo de texto encima del menú. Este es el título del menú y una línea de texto que el plugin llama ‘contenido adicional’.
Puede editar u ocultar el texto haciendo clic en ‘Menú Móvil’ y luego en ‘Contenedor’ en el menú a la izquierda de la página.
Además, puede escribir lo que desee en el campo ‘Texto del Título’, como ‘Menú Principal’ o ‘Navegación’. Si no desea mostrar un título, simplemente deslice el interruptor ‘Título’ a la posición de apagado.
Después de eso, querrá desplazarse hacia abajo hasta la configuración de ‘Contenido Adicional’.
Desde aquí, puede desactivar esta configuración o escribir contenido alternativo. En la captura de pantalla a continuación, notará que el interruptor se ha desactivado, por lo que las palabras ‘Agrega más contenido aquí…’ ahora están ocultas.
Una vez que esté satisfecho con la configuración del menú, asegúrese de hacer clic en el botón ‘Actualizar’ en la parte inferior de la página para guardar su configuración.
El plugin Responsive Menu ofrece muchas otras opciones para cambiar el comportamiento y la apariencia de su menú de panel deslizante. Puede explorar estas opciones en la página de configuración del plugin y ajustarlas según sea necesario.
Ahora, puede visitar su sitio web para ver el menú en acción. Así es como se ve en nuestro sitio web de demostración. Tenga en cuenta que si la página actual está en el menú, se resalta con una banda de color.
✋ Consejo de experto: Diseñar tu menú de navegación de WordPress puede mejorar la apariencia y usabilidad de tu sitio. Un menú bien diseñado ayuda a los visitantes a encontrar fácilmente lo que necesitan y fomenta los clics.
Para más información sobre este tema, consulta nuestra guía sobre diferentes formas de diseñar tu menú de navegación de WordPress.
Preguntas Frecuentes Sobre Menús de Panel Deslizante
¿Aún necesitas aclaraciones sobre cómo funcionan los menús de panel deslizante en WordPress? Aquí tienes respuestas a algunas preguntas comunes.
¿Todos los temas de WordPress vienen con un menú móvil?
La mayoría de los temas de WordPress modernos son responsivos, por lo que incluyen un menú compatible con dispositivos móviles. Dicho esto, suele ser solo un menú desplegable básico. Si deseas un menú de panel deslizante elegante, necesitarás un plugin.
¿Agregar un plugin de menú de panel deslizante ralentizará mi sitio?
No, si eliges un plugin bien codificado como Responsive Menu. Estos plugins están diseñados para ser ligeros y no deberían afectar notablemente la velocidad de tu sitio.
¿Puedo mostrar un menú diferente en móvil en comparación con el de escritorio?
¡Sí! Puedes crear un menú móvil separado usando un plugin como WP Mobile Menu o CSS personalizado, para que tus visitantes móviles vean una navegación diferente a la de los usuarios de escritorio. Esto te permite simplificar enlaces, destacar promociones o mejorar las conversiones específicamente para dispositivos móviles.
Lectura Adicional: Más Recursos Sobre la Personalización de Menús del Sitio
Esperamos que este tutorial te haya ayudado a aprender cómo agregar un menú de panel deslizante en temas de WordPress.
Para mejorar aún más tu experiencia de usuario, consulta nuestras otras guías útiles sobre:
- Cómo crear un menú de navegación flotante fijo en WordPress
- Cómo agregar un menú mega en tu sitio de WordPress (paso a paso)
- Cómo agregar publicaciones específicas al menú de navegación de WordPress
- Cómo agregar una barra de búsqueda al menú de WordPress (paso a paso)
- Cómo crear un menú desplegable en WordPress (Guía para principiantes)
- Cómo mostrar menús diferentes a los usuarios que han iniciado sesión en WordPress
- Cómo agregar menús de navegación personalizados en temas de WordPress
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Creé un menú deslizante usando Elementor y ventanas emergentes con un efecto de menú deslizante. Funciona muy bien, pero desafortunadamente, no puedo tener Elementor PRO en todos los sitios web que administro debido a su precio. Esta es una alternativa fantástica para crear dicho menú, y si es posible usar el plugin en una versión gratuita, eso es realmente asombroso. Para sitios web sin Elementor, esto es un salvavidas para mí.
Moinuddin Waheed
Este es un salvavidas para mí, ya que he estado luchando por obtener un panel deslizante para un menú adaptable a dispositivos móviles.
Anteriormente usé fragmentos de código y los inserté en el código de WordPress para esto.
Pero este plugin ofrece más personalización y la versión pro parece más potente en términos de control de personalización.
Definitivamente probaré este plugin.
Mohammad Kashif
¡Genial!
¿Puedo agregar un botón de cierre en el popout?
Luke Marshall
¡Todavía estoy esperando una respuesta a un ticket de soporte de ustedes con respecto a esta necesidad exacta! El que ofrecen solo está en el lado derecho sin forma aparente de cambiarlo al izquierdo, me alegra haber encontrado esto.
Cynthia
Cambia la función "left" por "right" en los dos lugares donde se usa en el código de la función.
Ru
¿Tienes una demostración para esto?
Quiero revisarlo antes
Daniel Jarosz
limpio y simple, ¡Gracias por este tutorial!
Ann
Hola, este código funciona perfectamente cuando ejecuto mi sitio web localmente, pero no una vez que está en vivo. ¿Hay alguna explicación posible para esto? Actualicé los enlaces de las imágenes, no estoy seguro de qué más necesita ser actualizado ya que las carpetas no han cambiado.
Madiha
no funciona en mi sitio, por favor visítalo y dime la solución
http://www.dailynewscompany.com
Mattia
Hola, interesante artículo… ¿Tienes una DEMO de esto, o una URL a un sitio en línea en el que lo hayas implementado? Sería interesante verlo en un caso real, ¡antes de intentar usarlo! Muchas gracias
Jim
¿Es posible mostrar cómo se podría modificar el script para que el evento de cierre se active haciendo clic en cualquier lugar excepto en la navegación?
En otras palabras, ¿para que el usuario no necesite hacer clic solo en el ícono del menú de alternancia para cerrar la barra lateral de navegación?
Gracias.
Karl
Estoy buscando por todos lados un plugin o la capacidad de implementar el tipo de menú que tienen actualmente en la parte superior de su página. Tienen un botón de “Play” en el lado derecho de su encabezado. Al presionarlo, un área de contenido se desliza desde su sección de encabezado. Realmente quiero usar este tipo de menú en mi sitio. Si pudieran indicarme incluso un enlace donde se explique este tipo de menú, me las arreglaré y gracias. ¡Este es un tutorial increíble!
Soporte de WPBeginner
Karl, puedes hacer clic derecho en el botón de play y seleccionar “inspeccionar elemento” y estudiar nuestro código fuente. También intentaremos cubrirlo pronto en WPBeginner como un tutorial.
Administrador
Shubham Dubey
Disculpa por responder aquí (los comentarios no están disponibles)
¡Hola! Estoy usando el framework Genesis, con su tema hijo, no puedo encontrar el archivo header.php allí.
i just copied the header.php file from genesis to my child themes folder, but after opening header.php file didn’t found any lines
¿CÓMO HACER ESTO CON TEMAS HIJOS, POR FAVOR EXPLICA.
Jim
Excelente guía. Estoy casi listo con una implementación de prueba, sin embargo, me pregunto... ¿puedo usar una ruta relativa en el archivo sidepanel.js en lugar de la ruta absoluta?
Lo he intentado pero no puedo resolverlo. ¿Debería la ruta relativa ser relativa al archivo html que llama a javascript?
Gracias
krish
Es un contenido bueno y útil. La captura de pantalla y el código son fáciles de entender y aplicar a mi sitio web. ¡¡¡Buen trabajo, hombre!!!
Håkon Stillingen
Artículo interesante. ¿Cómo podría reemplazar el encabezado predeterminado en Genesis Framework?