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.
¿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.
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
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.
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.
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”.
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.
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”.
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.
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’.
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.
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.
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”.
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.
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.
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.
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.
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.
WPBeginner Support
It would depend on your specific theme for the settings required. You would want to start by checking with the support for your specific theme. Otherwise, you could use Inspect Element to find what needs to be modified. We have a guide below that shows how to use Inspect Element to help with this:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador