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 crear un menú de barra lateral plegable en WordPress (de forma fácil)

Un menú de barra lateral plegable es una forma estupenda de enlazar enlaces y contenidos importantes, manteniendo el diseño de su sitio web limpio y organizado.

Esta característica permite a los usuarios expandir y plegar el menú, dándoles el control sobre su experiencia de navegación. Es perfecta para sitios web grandes, tiendas de comercio electrónico o cualquier sitio con una estructura / disposición / diseño / plantilla más compleja.

En este artículo, le mostraremos cómo crear fácilmente un menú de barra lateral plegable en WordPress.

How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)

¿Qué es un menú de barra lateral plegable? (Y cuándo utilizarlo)

Los menús más fáciles de usar facilitan el acceso a todos los enlaces que necesitan los visitantes. Sin embargo, esto puede resultar complicado para los sitios web de WordPress que tienen muchas páginas o una estructura / disposición / diseño / plantilla más compleja.

Piense en una gran tienda de comercio electrónico que tenga montones de categorías y subcategorías de productos, como Amazon.

Mostrar todas las categorías de productos en un menú estándar no sería una buena idea. Los compradores tendrían que desplazarse por el menú para encontrar la categoría que les interesa.

Aquí es donde entran en juego los menús plegables. Estos menús organizan el contenido de forma “padre-hijo”. Esto significa que si el visitante hace clic en un elemento principal de un menú desplegable, éste se expandirá para mostrar todo el contenido secundario del elemento principal.

Un ejemplo de ello es el periódico The Guardian, que utiliza un menú plegable para su sitio móvil.

An example of a collapsible menu.

Los menús de barra lateral plegables a veces también se denominan menús desplegables. Esto se debe a que sus diferentes secciones se expanden cuando un visitante hace clic en ellas.

Por defecto, los menús plegables ocultan mucho contenido y complejidad a los visitantes. Esto es mucho más fácil de usar que el desplazamiento a través de una larga lista de categorías y subcategorías en su blog de WordPress.

Dicho esto, veamos cómo crear fácilmente un menú de barra lateral plegable en su sitio de WordPress.

Tutorial en vídeo

Subscribe to WPBeginner

Si prefiere instrucciones escritas, siga leyendo.

Cómo crear un menú de barra lateral plegable en WordPress

Puede crear un menú de barra lateral plegable en WordPress utilizando el plugin Bellows Accordion Menu.

Bellows Accordion Menu proporciona un práctico shortcode para colocar su menú plegable en cualquier página, entrada o área de widget, incluyendo su barra lateral.

A collapsible sidebar menu in WordPress.

En primer lugar, tendrás que instalar y activar el plugin Bellows Accordion Menu. Si necesitas ayuda, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Descargo de responsabilidad: Tenga en cuenta que el plugin no ha sido actualizado con las tres últimas versiones de WordPress. Sin embargo, lo hemos probado en nuestro sitio web en tiempo real y funciona correctamente. Para más detalles, consulta nuestra guía sobre el uso de plugins de WordPress desactualizados.

Una vez activado, visite la página Apariencia ” Menús en su escritorio de WordPress.

Creating a menu in the WordPress dashboard.

Para empezar, escriba un nombre para su menú en el campo “Nombre del menú”. Tenga en cuenta que los visitantes de su sitio no verán este nombre, ya que es solo para usted.

A continuación, puede hacer clic en el botón “Crear menú”.

A continuación, elija las páginas que desea añadir al menú de la barra lateral plegable. Por defecto, WordPress muestra solo las páginas más recientes.

Si desea ver un catálogo de todas las páginas de su sitio web, haga clic en la pestaña “Ver todo”.

Adding pages to your WordPress menu.

También puede hacer clic en “Seleccionar todo”. Esto añadirá todas sus páginas al menú desplegable.

Una vez que esté satisfecho con su selección, haga clic en el botón “Añadir al menú”. También puede seleccionar entradas y categorías de blog o añadir enlaces personalizados. Para más detalles, consulte nuestra guía sobre cómo añadir un menú de navegación en WordPress.

Después de añadir todas tus páginas web al menú, puedes moverlas arrastrándolas y soltándolas. Esto cambiará el orden en que estas páginas aparecen en su menú plegable.

Los menús plegables se basan en las relaciones padre-hijo.

Cuando un visitante hace clic en un elemento principal del menú desplegable, éste se expande para mostrar todo el contenido secundario.

Para crear esta relación, basta con arrastrar y soltar para colocar todas las páginas de su hijo debajo de su padre.

A continuación, coge cada hijo y arrástralo un poco hacia la derecha. A continuación, suelte esta página. Esto sangrará el elemento / artículo y lo convertirá en una página hija.

Adding posts to the WordPress menu.

No olvides hacer clic en el botón “Guardar menú” cuando hayas terminado.

Ahora, queremos añadir este menú plegable a la barra lateral de WordPress. Para ello, vamos a utilizar algunos shortcodes que Bellows Accordion crea automáticamente.

Para obtener el shortcode, vaya a la página Apariencia ” Menú de Fuelle desde el escritorio de WordPress. Si aún no está seleccionado, asegúrate de seleccionar la pestaña “Mostrar todo”.

The collapsible menu shortcode in the WordPress dashboard.

Ahora puede hacer clic en el cuadro Shortcode, que debería resaltar todo el código. Ahora, copie este código utilizando el atajo de teclado Comando + c o Ctrl + c.

El siguiente paso es pegar este shortcode en un widget, así que dirígete a la página Apariencia ” Widgets desde el área de administrador.

Esto mostrará todas las áreas de widget dentro de su tema actual. Las opciones que verás pueden variar, pero la mayoría de los temas modernos de WordPress tienen una barra lateral.

Configuring the collapsible sidebar menu.

Cuando haya encontrado la zona de la barra lateral, haga clic en ella. Esta sección se expandirá.

Para añadir un bloque, haga clic en el icono + y empiece a escribir ‘Shortcode’. Cuando aparezca, selecciona el bloque ‘Shortcode’.

How to add a widget to the WordPress sidebar.

Ahora, simplemente pega el shortcode de tu menú plegable en este bloque. Para publicar su menú, tendrá que hacer clic en el botón “Actualizar” en la parte superior de la pantalla.

Ahora, cuando visite su sitio, debería ver un nuevo menú de barra lateral plegable.

Example of a working collapsible menu

El plugin Bellows Accordion también facilita enormemente la personalización de este menú por defecto. Por ejemplo, puede cambiar su esquema de color para reflejar mejor la imagen de marca / marca de su sitio.

Si desea retocar el menú por defecto, simplemente vaya a la página Apariencia “ Menú de Fuelle en su escritorio de WordPress.

Este menú tiene todos los ajustes que necesitas para personalizar tu menú plegable. Hay muchos ajustes para explorar. Sin embargo, es posible que desee empezar por ir a Configuración principal ” Configuración básica.

Configuring the look and feel of your WordPress collapsible sidebar menu.

Aquí puede elegir entre varios colores de menú. También puede elegir si los visitantes pueden desplegar varios submenús a la vez mediante los ajustes de “Plegado en acordeón”.

Para modificar la alineación y la anchura del menú, haga clic en la pestaña “Disposición / posición”.

Placing the collapsible menu on the WordPress website.

Si prefiere previsualizar sus cambios en tiempo real, puede editar el menú de la barra lateral plegable en el Personalizador de WordPress.

Para ello, dirígete a la página Apariencia ” Personalizador desde el área de administrador y selecciona la pestaña ‘Fuelle’ de la columna de la izquierda.

Configuring your collapsible menu in the WordPress Customizer.

Aquí encontrarás muchos ajustes diferentes para tu barra lateral. Por ejemplo, puedes cambiar el ancho, la alineación y el color del menú de la barra lateral plegable.

Bono: Trucos de WordPress para la barra lateral para obtener los máximos resultados

Una vez que haya creado un menú de barra lateral plegable, puede utilizar algunos otros consejos para generar más clientes potenciales con la ayuda de su barra lateral.

Por ejemplo, puede hacer que el widget de la barra lateral sea fijo para que esté visible en la página aunque el usuario se desplace hacia abajo.

Aparte de eso, puedes añadir un formulario de contacto o de suscripción por correo electrónico en tu barra lateral para construir tu lista de correo electrónico. Para ello, puede utilizar WPForms, que es el mejor plugin de formulario de contacto en el mercado.

Simplemente tendrá que crear un formulario y luego añadirlo a su barra lateral utilizando el bloque WPForms en el menú de bloques.

Add WPForms widget block

Para más detalles, puede consultar nuestro tutorial sobre cómo crear un formulario de contacto en WordPress.

Además, puede mostrar sus entradas más populares en la barra lateral, añadir imágenes, mostrar iconos de medios sociales y mostrar pruebas sociales. Esto animará a los usuarios a explorar más tu sitio y aumentará tus conversiones.

Para más consejos, puedes ver nuestra lista de los mejores trucos de WordPress para la barra lateral para obtener los máximos resultados.

Esperamos que este artículo te haya ayudado a aprender cómo crear un menú de barra lateral plegable en WordPress. Para más consejos sobre cómo editar el diseño de tu sitio de WordPress, también puedes consultar nuestras guías sobre cómo personalizar la cabecera de WordPress y los widgets de WordPress más útiles para 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.

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

4 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    For websites that have many categories, this is the perfect option to make the sidebar clear. I now have about 15 categories on the site and am thinking about something similar to the accordion as well. Thanks for the inspiration.

  3. Tamie

    Thank you for this. How can you adjust the spacing between the subcategories? I have a lot of categories and having what looks like a double line space in between make the menus very long.

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.