Un menú lateral colapsable es una excelente manera de proporcionar acceso fácil a enlaces y contenido importantes, al tiempo que se mantiene el diseño de su sitio web limpio y organizado.
Esta función permite a los usuarios expandir y colapsar el menú, dándoles control sobre su experiencia de navegación.
Hemos notado que muchos sitios web grandes, tiendas de comercio electrónico y sitios con diseños más complejos lo utilizan para facilitar la navegación.
En este artículo, le mostraremos cómo crear fácilmente un menú lateral colapsable en WordPress.
¿Qué es un menú lateral colapsable? (Y cuándo usar uno)
Los menús más fáciles de usar proporcionan acceso fácil a todos los enlaces que los visitantes necesitan. Sin embargo, esto puede ser complicado para los sitios web de WordPress que tienen muchas páginas o un diseño más complejo.
Piense en una gran tienda de comercio electrónico que tiene toneladas de categorías y subcategorías de productos, como Amazon.
Mostrar cada categoría de producto en un menú estándar no sería una buena idea. Es probable que los compradores necesiten desplazarse por el menú para encontrar la categoría que les interesa.
Aquí es donde entran los menús colapsables. Estos menús organizan el contenido en un enfoque de 'padre-hijo'. Eso significa que si el visitante hace clic en un elemento padre en un menú colapsable, se expandirá para mostrar todo el contenido hijo de ese elemento padre.
Un ejemplo de esto es el medio de noticias The Guardian, que utiliza un menú colapsable para su sitio móvil.
Los menús laterales colapsables a veces también se llaman menús expandibles. Esto se debe a que sus diferentes secciones se expanden cuando un visitante hace clic en ellas.
Por defecto, los menús colapsables ocultan mucho contenido y complejidad a los visitantes. Esto es mucho más fácil de usar que desplazarse por una larga lista de categorías y subcategorías en tu blog de WordPress.
Dicho esto, veamos cómo puedes crear fácilmente un menú lateral colapsable en tu sitio de WordPress.
Cómo crear un menú lateral colapsable en WordPress
Puedes crear un menú lateral colapsable en WordPress usando el plugin Bellows Accordion Menu.
Proporciona un práctico shortcode para colocar tu menú colapsable en cualquier página, publicación o área de widget, incluida tu barra lateral.
Primero, deberás 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: Ten en cuenta que el plugin no se ha actualizado con las últimas tres versiones de WordPress. Sin embargo, lo probamos en nuestro sitio web y descubrimos que funciona bien. Para más detalles, consulta nuestra guía sobre el uso de plugins de WordPress obsoletos.
Tras la activación, visita la página Apariencia » Menús en tu panel de WordPress.
Para empezar, escribe un nombre para tu menú en el campo 'Nombre del menú'. Ten en cuenta que los visitantes de tu sitio no verán este nombre, ya que es solo para tu referencia.
Luego, puedes hacer clic en el botón ‘Crear menú’.
A continuación, elige las páginas que deseas agregar al menú lateral colapsable. Por defecto, WordPress solo muestra tus páginas más recientes.
Si deseas ver una lista de todas las páginas de tu sitio web, haz clic en la pestaña ‘Ver todo’.
Alternativamente, puedes hacer clic en ‘Seleccionar todo’. Esto agregará todas tus páginas al menú colapsable.
Una vez que estés satisfecho con tu selección, haz clic en el botón ‘Agregar al menú’. También puedes seleccionar entradas y categorías de blog o agregar enlaces personalizados. Para más detalles, consulta nuestra guía sobre cómo agregar un menú de navegación en WordPress.
Después de agregar todas tus diferentes páginas web al menú, puedes moverlas arrastrándolas y soltándolas. Esto cambiará el orden en que aparecen estas páginas en tu menú colapsable.
Los menús colapsables se basan en relaciones padre-hijo.
Cuando un visitante hace clic en un elemento padre en tu menú colapsable, este se expandirá para revelar todo el contenido hijo.
Para crear esta relación, simplemente usa arrastrar y soltar para organizar todas las páginas de tu hijo debajo de su padre.
A continuación, toma cada hijo y arrástralo un poco hacia la derecha. Luego puedes soltar esta página. Esto indentará el elemento y lo convertirá en una página hija.
No olvides hacer clic en el botón 'Guardar Menú' cuando hayas terminado.
Ahora, queremos agregar este menú colapsable a la barra lateral de WordPress. Para hacer esto, usaremos algunos códigos cortos que Bellows Accordion crea automáticamente.
Para obtener el código corto, ve a la página Apariencia » Menú Bellows desde el panel de WordPress. Si aún no está seleccionado, asegúrate de seleccionar la pestaña 'Mostrar todo'.
Ahora puedes hacer clic en el cuadro de Código Corto, que debería resaltar todo el código. Ahora, copia este código usando el atajo de teclado Comando + c o Ctrl + c.
El siguiente paso es pegar este código corto en un widget, así que dirígete a la página Apariencia » Widgets desde el área de administración.
Esto mostrará todas las áreas de widgets dentro de tu tema actual. Las opciones que veas pueden variar, pero la mayoría de los temas modernos de WordPress tienen una barra lateral.
Una vez que hayas encontrado el área de la barra lateral, haz clic en ella. Esta sección ahora se expandirá.
Para agregar un bloque, haz clic en el ícono + y comienza a escribir 'Shortcode'. Cuando aparezca, selecciona el bloque 'Shortcode'.
Ahora, simplemente pega el código corto de tu menú colapsable en este bloque. Para publicar tu menú, deberás hacer clic en el botón ‘Actualizar’ en la parte superior de tu pantalla.
Ahora, cuando visites tu sitio, deberías ver un nuevo menú lateral colapsable.
El plugin Bellows Accordion también hace que sea muy fácil personalizar este menú predeterminado. Por ejemplo, podrías cambiar su esquema de color para reflejar mejor la marca de tu sitio.
Si deseas ajustar el menú predeterminado, simplemente ve a la página Apariencia » Bellows Menu en tu panel de WordPress.
Este menú tiene todas las configuraciones que necesitas para personalizar tu menú colapsable. Hay muchas configuraciones para explorar. Sin embargo, es posible que desees comenzar yendo a Configuración Principal » Configuración Básica.
Aquí, puedes alternar entre varios colores de menú diferentes. También puedes elegir si los visitantes pueden expandir varios submenús a la vez usando la configuración ‘Accordion Folding’ (Plegado de Acordeón).
Para cambiar la alineación y el ancho del menú, haz clic en la pestaña ‘Layout & Position’ (Diseño y Posición).
Si prefieres previsualizar tus cambios en tiempo real, puedes editar el menú lateral colapsable en el Personalizador de WordPress.
Para hacer esto, dirígete a la página Apariencia » Personalizar desde el área de administración y selecciona la pestaña ‘Bellows’ en la columna izquierda.
Aquí encontrarás muchas configuraciones diferentes para tu barra lateral. Estas incluyen cambiar su ancho, alineación y el color de tu menú lateral colapsable.
Extra: Trucos de Barra Lateral de WordPress para Obtener Máximos Resultados
Una vez que hayas creado un menú lateral colapsable, puedes usar otros consejos para generar más clientes potenciales con la ayuda de tu barra lateral.
Por ejemplo, puedes hacer que tu widget de barra lateral sea fijo para que sea visible en la página incluso mientras el usuario se desplaza hacia abajo.
Aparte de eso, puedes agregar un formulario de contacto o un formulario de suscripción por correo electrónico en tu barra lateral para crear tu lista de correo. Para hacer esto, puedes usar WPForms, que es el mejor plugin de formularios de contacto del mercado.
En WPBeginner, lo usamos para crear formularios de contacto y encuestas anuales, y nos encanta. Para saber más, consulta nuestra reseña completa de WPForms.
Simplemente necesitarás crear un formulario y luego agregarlo a tu barra lateral usando el bloque de WPForms en el menú de bloques.
Para más detalles, puedes ver nuestro tutorial sobre cómo crear un formulario de contacto en WordPress.
Adicionalmente, puedes mostrar tus publicaciones más populares en la barra lateral, agregar imágenes, mostrar iconos de redes sociales y exhibir prueba social. 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 para la barra lateral de WordPress para obtener resultados máximos.
Tutorial en video
Si no prefieres instrucciones escritas, simplemente mira nuestro video tutorial.
Esperamos que este artículo te haya ayudado a aprender cómo crear un menú de barra lateral colapsable 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 el encabezado de tu WordPress y los widgets de WordPress más útiles para tu sitio.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Mrteesurez
Gracias por esta guía, si te entiendo correctamente, ¿eso significa que el plugin generará un shortcode que se puede colocar en cualquier lugar del sitio, incluso dentro de una publicación?
Comentarios de WPBeginner
Si bien podrías intentar usar el shortcode en otras ubicaciones, incluso si funciona, puede que no se muestre de una manera útil.
Jiří Vaněk
Lo probé, y sí, tu idea es correcta. Realmente funciona. Sin embargo, vale la pena considerar cómo lo usarás al final. Porque en mi caso, no pude encontrar ningún otro uso para él además de en la barra lateral. Pero tal vez tu sitio web sea diferente y le encuentres un uso. Entonces, la respuesta a tu pregunta es sí, funciona como lo describiste.
Jiří Vaněk
Para sitios web que tienen muchas categorías, esta es la opción perfecta para que la barra lateral sea clara. Ahora tengo alrededor de 15 categorías en el sitio y estoy pensando en algo similar al acordeón también. Gracias por la inspiración.
Tamie
Gracias por esto. ¿Cómo se puede ajustar el espaciado entre las subcategorías? Tengo muchas categorías y tener lo que parece un doble espacio entre líneas hace que los menús sean muy largos.
Soporte de WPBeginner
Dependería de tu tema específico para la configuración requerida. Deberías empezar por consultar con el soporte de tu tema específico. De lo contrario, podrías usar Inspeccionar elemento para encontrar lo que necesita ser modificado. Tenemos una guía a continuación que muestra cómo usar Inspeccionar elemento para ayudarte con esto:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador