Cómo agregar un menú de panel deslizante en temas de WordPress

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.

También ofrece objetivos táctiles más grandes para los dedos y mantiene tu pantalla despejada, lo que puede generar una mayor participación y más ventas.

Afortunadamente, muchos temas de WordPress ya incluyen estilos integrados que muestran automáticamente menús adaptables para móviles en pantallas más pequeñas.

Sin embargo, es posible que desees personalizar aún más tu navegación móvil añadiendo un menú adaptable 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:

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. Lo probamos para este tutorial y es increíblemente fácil de usar.

En tu área de administración de WordPress, ve a Plugins » Agregar Nuevo.

Luego, solo necesitas encontrar el plugin usando el cuadro de búsqueda y proceder con la instalación. Si necesitas ayuda, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, ve a Responsive Menu » Menus en tu panel de WordPress. Desde 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 añadir 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 móviles solo vean el nuevo menú de panel deslizante. Haces esto introduciendo código CSS en el campo 'Hide Theme Menu'.

No te preocupes, esto solo ocultará el menú en dispositivos móviles; tu menú de escritorio permanecerá completamente seguro.

El código que necesitas ingresar aquí varía de un tema a otro (los selectores comunes incluyen .main-navigation o #site-navigation), y puedes obtener más detalles haciendo clic en el enlace 'Saber más'.

Si tienes la licencia Pro, tendrás algunas configuraciones adicionales. Por ejemplo, puedes seleccionar los dispositivos y las 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ás una vista previa de tu sitio web en el lado derecho de la pantalla. Hay botones en la parte inferior para cambiar entre vistas de teléfono, tableta y escritorio para asegurarte de que tu menú se mantenga adaptable para móviles. También encontrarás 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, puedes visitar tu sitio web para ver el menú en acción. Así es como se ve en nuestro sitio web de WordPress de demostración. Notarás que el plugin incluso resalta la página actual en la que se encuentra tu visitante con una banda de color ordenada:

Preguntas Frecuentes Sobre Menús de Panel Deslizante

¿Todavía tienes preguntas 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 adaptables, por lo que incluyen un menú adaptable para 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, resaltar 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

Ahora que has implementado con éxito un panel deslizante para tus usuarios móviles, es posible que desees explorar otras formas de mejorar la navegación de tu 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 menús de navegación personalizados en temas de WordPress
• Cómo mostrar menús diferentes a los usuarios que han iniciado sesión en WordPress

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.