Cómo crear un menú de barra lateral plegable en WordPress (de forma fácil)

¿Quieres crear un menú de barra lateral plegable en WordPress?

Un menú plegable puede ofrecer a los visitantes de tu sitio web una forma sencilla de acceder a muchos enlaces sin saturar la barra lateral. Es perfecto para sitios web grandes, tiendas de comercio electrónico o cualquier sitio que tenga 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 muchas 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 su contenido en una relación padre-hijo. Si el visitante hace clic en un elemento padre de un menú desplegable, éste se expandirá para mostrar todo el contenido hijo de ese elemento padre.

El periódico The Guardian utiliza un menú plegable en su sitio para móviles.

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.

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ú”. Los visitantes de su sitio no verán el 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 desplegables 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 cambios” 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 coger el shortcode, ve 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 de 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. También puedes consultar nuestra guía sobre cómo hacer un seguimiento de los visitantes de tu sitio web y el mejor software de avisos instantáneos para aumentar tu tráfico.

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.