Cómo añadir un menú de panel deslizante en temas de WordPress

¿Desea añadir un menú deslizante a su sitio WordPress?

Añadir un menú adaptable facilitará a los usuarios la navegación por su sitio web desde dispositivos móviles. Cuando toquen el icono del menú, se deslizará un panel en la pantalla con una bonita animación.

En este artículo, le mostraremos cómo añadir un menú de panel deslizante en temas de WordPress sin escribir ningún código.

¿Por qué añadir un menú deslizante en los temas de WordPress?

Los menús bien diseñados ayudan a tus visitantes a orientarse en tu sitio web de WordPress. Muchos de sus visitantes utilizarán dispositivos móviles, por lo que es importante obtener una vista previa de la versión móvil de su sitio de WordPress para ver cómo se ve su menú de navegación en pantallas más pequeñas.

Por suerte, muchos temas de WordPress incorporan estilos que muestran automáticamente menús adaptados a dispositivos móviles cuando se visualizan en una pantalla pequeña.

Sin embargo, es posible que desee personalizar aún más su navegación móvil y añadir un menú adaptable a pantalla completa o un menú de panel deslizante animado.

Con esto en mente, echemos un vistazo a cómo añadir un menú de panel deslizante en temas de WordPress.

Cómo añadir un menú de panel deslizante en temas de WordPress

Lo primero que tienes que hacer es instalar y activar el plugin Responsive Menu. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Existe una versión premium de Responsive Menu con temas extra y características adicionales como la lógica condicional, pero para este tutorial, utilizaremos el plugin gratuito.

Una vez activado, vaya a la página Menús ” Menú adaptable. Una vez allí, haga clic en el botón “Crear nuevo menú” en la parte superior de la pantalla.

A continuación, verá cuatro temas que puede utilizar para su nuevo menú adaptable. Puede adquirir temas adicionales.

Para este tutorial, utilizaremos el tema seleccionado automáticamente. A continuación, puedes hacer clic en el botón “Siguiente”.

Esto le llevará a la página de ajustes del menú. Aquí puede introducir un nombre para su menú adaptable y, a continuación, seleccionar qué menú de WordPress desea que se muestre en el panel.

Para este tutorial, hemos elegido el menú ‘Navegación’. Si necesitas crear un nuevo menú, puedes aprender a hacerlo siguiendo nuestra guía sobre cómo añadir un menú de navegación en WordPress.

También puede ocultar el menú normal que viene con su tema de WordPress para que sus usuarios solo vean el nuevo menú del panel deslizante. Para ello, introduce el código CSS en el campo “Ocultar menú del tema”.

El código que debe introducir aquí varía de un tema a otro, y puede obtener más información al hacer clic en el enlace “Más información”.

Los usuarios de la versión Pro disponen de algunos ajustes adicionales. Por ejemplo, los usuarios de la versión Pro pueden seleccionar los dispositivos y páginas en los que debe mostrarse el menú.

Cuando estés satisfecho con los ajustes, haz clic en el botón “Crear menú” situado en la parte inferior de la página. Esto te llevará a una página donde podrás terminar de personalizar tu menú.

Verás una vista previa de tu sitio web a la derecha de la pantalla, y hay botones en la parte inferior para cambiar entre la vista de teléfono, tableta y escritorio. También encontrarás opciones de personalización a la izquierda.

Fíjate en que hay un texto encima del menú. Se trata del título del menú y de una línea de texto que el plugin denomina “contenido adicional”.

Puede editar u ocultar el texto al hacer clic en “Menú móvil” y luego en “Contenedor” en el menú de la izquierda de la página.

Puedes escribir lo que quieras en el campo “Texto del título”, como “Menú principal” o “Navegación”. Si no quiere que aparezca ningún título, deslice el interruptor “Título” a la posición de apagado.

A continuación, desplácese hasta la opción “Contenido adicional”. Puede desactivar este conmutador o escribir contenido alternativo. En la siguiente captura de pantalla, verás que el conmutador se ha desactivado, por lo que las palabras “Añadir más contenido aquí…” ahora están ocultas.

Una vez que esté satisfecho con los ajustes del menú, asegúrese de hacer clic en el botón “Actualizar” situado en la parte inferior de la página para guardar sus ajustes.

El plugin Responsive Menu viene con muchas otras opciones que le permiten cambiar el comportamiento y la apariencia de su menú de panel deslizante. Puede explorar estas opciones en la página de ajustes 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ú, entonces se resalta con una banda de color.

Esperamos que este tutorial te haya ayudado a aprender cómo añadir un menú de panel deslizante en temas de WordPress. Puede que también quieras aprender cómo hacer un seguimiento de los visitantes de tu sitio WordPress, o comprobar nuestra lista de plugins imprescindibles para hacer crecer tu sitio.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.