Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Añadir un menú deslizante a su sitio WordPress puede mejorar la navegación, especialmente en dispositivos móviles. Esta característica proporciona una animación suave y hermosa cuando los usuarios tocan el icono del menú.

Un menú adaptable facilita a los visitantes la exploración de su sitio web en sus teléfonos o tabletas. Garantiza una experiencia de navegación fluida y mantiene la participación del público.

En este artículo, te guiaremos a través de la adición de un menú de panel deslizar a su tema de WordPress. Lo mejor de todo es que puedes hacerlo sin escribir ningún código.

How to Add a Slide Panel Menu in WordPress Themes

¿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. Si necesitas alguno, entonces puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Existe una versión premium del plugin Responsive Menu con temas extra y características adicionales como la lógica condicional. Pero para este tutorial, vamos a utilizar el plugin gratuito.

Una vez activado, navegue hasta Responsive Menu ” Menús desde su escritorio de WordPress. Una vez allí, debe hacer clic en el botón “Crear nuevo menú” en la parte superior de la pantalla.

Create a New Responsive Menu

A continuación, verá 4 temas que puede utilizar para su nuevo menú adaptable. Temas adicionales están disponibles para su compra.

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

Select a Theme for Your Responsive Menu

Accederá a la página “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. Por ejemplo, hemos elegido el menú “Navegación”.

Si necesita crear un nuevo menú, puede aprender a hacerlo siguiendo nuestra guía sobre cómo añadir un menú de navegación en WordPress.

Give the Menu a Name and Link It With the WordPress Menu You Wish to Use

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”.

Nota: 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 las páginas en las 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 las vistas de teléfono, tableta y escritorio. También encontrarás opciones de personalización a la izquierda.

You Can Now Customize Your Responsive Menu

Puede que advierta que aparece 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.

Customize or Hide the Text Shown at the Top of Your Menu

Además, puede escribir lo que desee en el campo “Texto del título”, como “Menú principal” o “Navegación”. Si no desea que aparezca ningún título, deslice el interruptor “Título” a la posición de desactivado.

A continuación, desplácese hasta la opción “Contenido adicional”.

Desde aquí, puede desactivar este conmutador o escribir contenido alternativo. En la siguiente captura de pantalla, observará que el conmutador se ha desactivado, por lo que las palabras “Añadir más contenido aquí…” ahora están ocultas.

Customize or Hide the Additional Content for Your Menu

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

El plugin Responsive Menu ofrece muchas otras opciones para cambiar el comportamiento y la apariencia del menú del panel deslizable. 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ú, se resalta con una banda de color.

Animation of a Slide Panel Menu in WordPress

Consejo de experto: Estilizar el menú de navegación de WordPress puede mejorar el aspecto y la usabilidad de su 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 debate, marca / comprobar nuestra guía sobre diferentes maneras de estilo de su menú de navegación de WordPress.

Esperamos que este tutorial te haya ayudado a aprender cómo añadir un menú deslizante en los temas de WordPress. A continuación, puede que también quieras aprender cómo crear un menú desplegable y cómo mostrar diferentes menús a los usuarios conectados en WordPress.

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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

15 comentariosDeja una respuesta

  1. Mohammad Kashif

    Awesome!
    Can i add close button in the popout?

  2. Luke Marshall

    I’m still waiting on a support ticket reply from you guys regarding this exact need! the one you offer is on the right side only with no apparent way to change it to the left, I’m glad I’ve found this.

    • Cynthia

      Change the function “left” to “right” in the two spots it is used in the function code.

  3. Ru

    Do you have demo for this?
    I want to check it before

  4. Ann

    Hi, this code works perfectly when I run my website locally but not once it’s live. Is there any possible explanation to this? I updated the image links not sure what else needs to be updated as the folders have not changed.

  5. Mattia

    Hi, interesting article… Do you have a DEMO of this, or a URL to an online site in which you implemented it? It would be interesting to see it in a real case, before trying to use it! Many thanks

  6. Jim

    Is it possible to show how the script could be modified so the close event can be triggered by clicking anywhere else but on the navigation?

    In other words, so the user doesn’t need to just click on the toggle menu icon to close the navigation sidebar?

    Thanks.

  7. Karl

    I am searching high and low for a plugin or the ability to implement the type of menu you have currently running at the top of your page. You have a “Play” button on the right side of your header. Upon pressing it a content area slides out from your header section. I really want to use this type of menu in my site. If you could point me even to a link where this type of menu is explained I’ll take it from there and thanks. This is an awesome tutorial!

    • WPBeginner Support

      Karl you can right click on the play button and select inspect element and study our source code. We will also try to cover it soon at WPBeginner as a tutorial.

      Administrador

      • Shubham Dubey

        Sorry for replying here,(Comments is not available)

        Hey! I’m using Genesis framework, with its child theme, i’m unable to find header.php file there,

        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 :(

        hOW TO DO THIS WITH CHILD THEMES, PLEASE EXPLAIN.

  8. Jim

    Excellent guide. I’m almost there with a test implementation, however I’m wondering…can I use a relative path in the sidepanel.js file instead of the absolute path?

    I’ve tried to do so but I cannot figure it out. Should the relative path be relative to the html file calling the javascript?

    Thanks

  9. krish

    It’s good and useful content. The screenshot and coding easily understand and apply to my website. Good job man!!!

  10. Håkon Stillingen

    Interesting article. How would I go about replacing default header in Genesis Framework?

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.