Cómo agregar fácilmente una barra lateral a WordPress – Tutorial definitivo

¿Alguna vez te has preguntado qué es realmente una barra lateral en WordPress? O tal vez los hayas visto en algunos temas y hayas preguntado si siguen siendo relevantes con todas las nuevas herramientas basadas en bloques disponibles. Bueno, ¡estás en el lugar correcto! Hoy, analizaremos las barras laterales y exploraremos sus funciones en los temas clásicos y de bloques, por qué siguen siendo útiles y cómo puedes usarlas para sacar lo mejor de tu sitio.

Además de eso, lo guiaré a través del proceso de creación de una barra lateral de WordPress desde cero usando el Editor del sitio y agregándola sin problemas a su plantilla. ¡Vamos a sumergirnos directamente en el tutorial de WordPress de la barra lateral!

¿Qué es exactamente una barra lateral?

Para empezar, una barra lateral es algo familiar en muchos sitios de WordPress. A veces se lo denomina menú de la barra lateral de WordPress. Por lo general, es una columna vertical colocada junto al contenido principal, llena de funciones adicionales como menús de navegación, publicaciones recientes o incluso un formulario de registro de correo electrónico. Dependiendo de su tema, es posible que encuentre barras laterales a la izquierda, a la derecha o, a veces, a ambos lados. Algunos temas te permiten activarlos o desactivarlos por completo, mientras que otros, como Prime FSE de MotoPress, los reservan para páginas específicas, como blogs o archivos.

Mientras tanto, temas como Divi van un paso más allá con un creador de barras laterales, que le permite agregar barras laterales únicas a diferentes tipos de publicaciones o páginas. ¡Piense en lo conveniente que puede ser esto para organizar productos en un sitio de comercio electrónico! Con la flexibilidad adicional, puede crear diseños únicos que guíen a los visitantes hacia el contenido que encontrarán más útil, ya sea a través de publicaciones destacadas, enlaces útiles o sugerencias de productos específicos.

En resumen, una barra lateral actúa como una guía de ayuda, guiando a los visitantes a través de su sitio ofreciendo información o herramientas adicionales en una sección visualmente distinta. Puedes eliminar la barra lateral en WordPress en la mayoría de los casos. Ahora que hemos cubierto los conceptos básicos de una barra lateral, veamos cómo este concepto ha evolucionado desde temas clásicos hasta temas de bloques.

Por qué las barras laterales siguen siendo importantes en WordPress

Quizás esté pensando que las barras laterales son noticias viejas, especialmente con todo el revuelo en torno al editor de bloques y las tendencias modernas de diseño web. Pero aquí está la cuestión: las barras laterales tienen poder de permanencia por una razón. Ofrecen un lugar privilegiado para compartir contenido importante y herramientas de navegación sin abrumar el área de contenido principal. Cuando se diseña correctamente, una barra lateral puede mejorar la experiencia del usuario al ofrecer accesos directos útiles a páginas o publicaciones relevantes, lo que mejora la accesibilidad y la funcionalidad de su sitio. Es como tener un asistente útil en la puerta de su sitio, guiando a los visitantes hacia secciones clave con solo un vistazo.

Barras laterales clásicas y en bloque: ¿cuál es la diferencia?

Ahora, aquí es donde las cosas se ponen interesantes. WordPress introdujo el Editor del sitio y los temas de bloque en la versión 5.9 , lo que hace que las barras laterales de temas clásicos parezcan un poco anticuadas. Las barras laterales de temas clásicos eran simples "áreas de widgets" donde se podían arrastrar y soltar widgets como "Publicaciones recientes" o "Menú personalizado". Y este era tu widget de barra lateral de WordPress. Sin embargo, un gran inconveniente era que el tema limitaría exactamente dónde podrían ir; la personalización era un poco más limitada y no se podía crear una barra lateral completamente única en cada página.

En los temas clásicos , las opciones para diseñar una barra lateral también estaban restringidas en su mayoría a lo que ofrecían las opciones del widget. Si deseaba que una barra lateral apareciera solo en ciertos tipos de páginas o que tuviera contenido diferente para publicaciones y páginas, a menudo requería codificación personalizada o complementos adicionales. Si cambió los temas, es posible que tenga que reconstruir los diseños de la barra lateral desde cero si el nuevo tema no admite las mismas áreas de widgets.

Ventajas de las barras laterales de temas clásicos:

• Configuración rápida: Diseño plug-and-play sin muchos problemas.
• Diseño confiable: estos temas suelen ser más estables y predecibles.
• Personalización sencilla: agregar widgets es sencillo y fácil de usar.

Desventajas de las barras laterales de temas clásicos:

• Flexibilidad de diseño limitada: personalizar más allá de los widgets puede resultar complicado.
• Diseño estático: la barra lateral permanece en el mismo lugar en todas las páginas, lo que significa que puede que no siempre sea la mejor opción para cada tipo de contenido.

Pero con los temas de bloques , hemos entrado en un mundo completamente nuevo. Los bloques han reemplazado a los widgets como opción para crear barras laterales, brindándote un control mucho más creativo. Puede diseñar su barra lateral arrastrando y organizando bloques directamente dentro del Editor del sitio, sin necesidad de widgets. Y sí, incluso los widgets tradicionales como “Calendario” o “Buscar” ahora están bloqueados, por lo que obtienes todas las funciones con mucha más flexibilidad en comparación con el menú de la barra lateral de WordPress de la vieja escuela.

Lo realmente interesante es que, en los temas de bloque, las barras laterales son componentes globales de la estructura de su sitio. Se crean como bloques reutilizables (llamados partes de plantilla), lo que significa que puedes diseñar una barra lateral una vez y reutilizarla en cualquier lugar de tu sitio. Incluso puede personalizar cada barra lateral tanto como desee o crear varias barras laterales para diferentes secciones de su sitio, lo que facilita que todo se vea consistente.

Ventajas de las barras laterales del tema de bloques:

• Total libertad de diseño: crea tu barra lateral con bloques que coincidan con tu marca.
• Barras laterales de contenido específico: personalice las barras laterales para que aparezcan solo en publicaciones o páginas específicas.
• Personalización fácil de usar: la edición completa del sitio significa que no necesita conocimientos de codificación para realizar cambios importantes.

Desventajas de las barras laterales de temas de bloques:

• Curva de aprendizaje: Puede que sea necesario un tiempo para acostumbrarse al nuevo sistema de bloques, especialmente para aquellos que están acostumbrados a los temas clásicos.
• Menos predecible: debido a que puedes personalizar tanto, es posible que el diseño no siempre funcione en todos los dispositivos o tamaños de pantalla a menos que lo pruebes exhaustivamente.

Cómo agregar fácilmente una barra lateral a su tema de bloque de WordPress

Ahora, lo guiaré para crear una barra lateral de WordPress desde cero en el Editor del sitio de WordPress y agregarla a su plantilla. Esta parte de la publicación trata sobre los pasos prácticos, así que si estás listo para sumergirte en la parte práctica, ¡comencemos!

Requisitos

Antes de comenzar, asegúrese de que su versión de WordPress esté actualizada al menos a 5.9 o la última versión. También necesitarás activar un tema de bloque, que sea compatible con el Editor del sitio y te permita personalizar completamente las partes del tema.

Mostrar el aspecto predeterminado de la plantilla

Esta es mi configuración : la plantilla de inicio del blog tiene una barra lateral de forma predeterminada, pero la plantilla de publicación única no.

Crearé una barra lateral específicamente para la plantilla de publicación única desde cero y la agregaré.

Comprender la funcionalidad de la barra lateral de WordPress

Antes de profundizar en los procedimientos, es esencial comprender la funcionalidad de las barras laterales en WordPress. Las barras laterales son más que un simple espacio adicional en la pantalla. Las barras laterales le brindan un lugar flexible para compartir contenido que mantiene a los visitantes interesados ​​y explorando. Piense en ellos como mini vallas publicitarias para todo tipo de información útil: pueden albergar widgets, como calendarios, nubes de etiquetas, publicaciones populares o comentarios recientes, que brindan a los visitantes información valiosa sin abrumar el contenido principal.
Un menú de la barra lateral de WordPress bien ubicado puede funcionar para usted, al aumentar las tasas de clics y dirigir a los usuarios a áreas clave de su sitio, guiándolos de manera efectiva a lo largo de su viaje.

Mejores prácticas para el contenido de la barra lateral

Ahora que sabemos por qué las barras laterales son importantes, hablemos sobre cómo hacer que funcionen para usted. Lo primero es lo primero: sumérjase en los análisis de su sitio para ver qué buscan sus visitantes. Esto puede ayudarte a decidir qué incluir en tu barra lateral.

Cuando se trata de diseño, mantenlo limpio y simple: ¡a nadie le gusta el desorden! Cíñete a algunos elementos clave que se alineen con tus objetivos.

Y recuerde, su barra lateral no es un trato de "configúrelo y olvídese". Adquiera el hábito de revisar y actualizar su contenido con regularidad. Ya sea destacando actualizaciones de temporada o mostrando nuevos productos, mantener actualizada la barra lateral es una medida inteligente para mantener a los visitantes interesados. Cuando su barra lateral se siente actual y relevante, es más probable que los visitantes hagan clic y exploren. Por lo tanto, actualícelo periódicamente: es una forma sencilla de mantener su sitio animado y de mantener a los usuarios interesados ​​en las novedades y las novedades.

Crear una barra lateral de WordPress desde cero

Inicie sesión en su sitio de WordPress y vaya a Apariencia > Editor para acceder al Editor del sitio. Desde aquí, dirígete a Patrones , donde se almacenan las piezas de la plantilla.

Haga clic en el botón Agregar nuevo patrón y luego en Agregar nueva pieza de plantilla .

Aparecerá una ventana emergente con la opción " General ", así que déjala como está.

Simplemente asigne un nombre a su barra lateral, presione " Agregar " y verá una pantalla en blanco donde podrá comenzar a crear su barra lateral.
Añade los bloques que quieras haciendo clic en el signo + .

Para mi barra lateral, agregué encabezados, un cuadro de búsqueda, archivos, publicaciones más recientes, una imagen y el bloque de botones con un solo botón.

También puedes agregar un separador, pero eso es opcional. Utilice Vista de lista para comprobar que todos los bloques estén en su lugar. Una vez hecho esto, haga clic en Guardar para conservar su nueva barra lateral.

Agregar la barra lateral a la plantilla

Ahora, dirígete a Plantillas y selecciona la plantilla de Publicación única .

Aunque no hay una barra lateral en esta plantilla predeterminada, agregaremos una. Haga clic en Editar para abrir el editor de plantillas. En la vista de estructura, ubique el área de contenido entre el encabezado y el pie de página.

Aquí es donde insertaremos nuestra barra lateral.
Agregue un bloque de Columnas a esta sección, eligiendo el diseño con el contenido a la izquierda y la barra lateral a la derecha.

Use la Vista de lista nuevamente para colocar su contenido en la columna de la izquierda, luego agregue un bloque de Parte de plantilla en la columna de la derecha y seleccione la barra lateral que acabamos de crear.

Ajustes finales

Para asegurarme de que todo se vea bien, ajusté un poco el diseño. Envolví las columnas en un bloque de sección (de Getwid), que ofrece más opciones de estilo. En mi tema (Prime FSE), esta sección coincide perfectamente con el ancho de contenido predeterminado de 1160 px . Es posible que su tema tenga configuraciones diferentes, por lo que es posible que deba ajustar el contenedor o el estilo. En cuanto al estilo, como habrás notado, cambié el color de fondo.
Recuerde, los estilos y dimensiones de los bloques provienen del archivo theme.json o del libro de estilos de su tema, por lo que cada tema puede variar. Tenga esto en cuenta cuando trabaje con diseño y estilo.

La mirada final

¡Echemos un vistazo al resultado final!

Inicialmente, las publicaciones no tenían una barra lateral, pero ahora nuestra barra lateral personalizada está ahí. Puede que se vea un poco diferente según los estilos preestablecidos de su tema, pero siéntase libre de modificarlo según sea necesario para que se vea perfecto.

Usos prácticos de las barras laterales en WordPress

En este punto, quizás te preguntes cómo utilizar una barra lateral de WordPress para mejorar tu sitio. Bueno, aquí tienes algunos consejos importantes para agregar una barra lateral que haga que las personas exploren e interactúen con tu contenido:

• Agregue un cuadro de búsqueda: agregue un cuadro de búsqueda para que a los visitantes les resulte sencillo encontrar lo que buscan. Esto es especialmente útil si tiene una biblioteca de contenido grande, donde los usuarios pueden querer saltar a una publicación o tema específico sin tener que explorar todo el sitio.
• Enlaces de navegación: mientras la navegación principal se encuentra en la parte superior, puede usar la barra lateral para obtener enlaces rápidos y útiles a otras páginas importantes. De hecho, muchas empresas consideran que colocar enlaces de llamado a la acción, como "Obtenga una cotización" o "Contáctenos", en la barra lateral es una excelente manera de generar conversiones y consultas.
• Resalte el contenido popular: presente sus publicaciones principales o artículos recientes para impulsar el SEO y mantener a los visitantes interesados. Las barras laterales con secciones de "Publicaciones populares" suelen tener tasas de clics más altas, ya que a la gente le encanta ver las tendencias de su sitio. Aproveche esta oportunidad para guiar a su audiencia hacia el contenido que los hará regresar.
• Haga crecer su lista de correo electrónico: una barra lateral es perfecta para agregar un formulario de suscripción para captar nuevos suscriptores para boletines o actualizaciones. Una oferta atractiva o una descarga gratuita a cambio de registrarse puede ser un poderoso motivador, y la barra lateral proporciona una excelente ubicación para ello.
• Enlaces de redes sociales: mantenga a los visitantes conectados agregando enlaces de seguimiento social a su barra lateral. La prominencia de la barra lateral la convierte en un excelente lugar para conectar a las personas con sus canales sociales sin interrumpir su experiencia de lectura.
• Anuncios y pancartas: las barras laterales también son un lugar privilegiado para anuncios o promociones especiales. Considere usar su barra lateral para mostrar contenido patrocinado o enlaces de afiliados si se alinea con los objetivos de su marca.

Diseñar una gran barra lateral

No importa si estás usando un tema Clásico o un tema de Bloque, una de las primeras cosas que tendrás que decidir es dónde debe ir tu barra lateral.

Ubicación de la barra lateral: ¿izquierda, derecha o flotante?

¿Barra lateral izquierda o derecha? El debate entre la ubicación en el lado izquierdo y derecho es antiguo en el diseño web. Si bien el lado izquierdo tiende a ser el preferido para los sitios web tradicionales (debido a los hábitos de lectura que se inclinan de izquierda a derecha), la barra lateral derecha ha ganado popularidad en los últimos años por un par de razones. Primero, permite que el contenido principal sea lo primero que vean los usuarios, especialmente si están escaneando una publicación de blog. Pero al final, depende de lo que le parezca adecuado a su sitio.

• Barras laterales izquierdas: ideal para la navegación, la barra lateral izquierda es un excelente lugar para categorías, archivos o enlaces sociales. Ubicado cerca de la parte superior izquierda, es fácil para los usuarios detectarlo y usarlo como guía rápida.
• Barras laterales derechas: a menudo utilizadas para promociones, la barra lateral derecha es perfecta para anuncios, llamadas a la acción o enlaces a contenido patrocinado. También puede destacar publicaciones relacionadas o enlaces sociales aquí para que los usuarios sigan explorando.

En los temas clásicos , la ubicación de la barra lateral suele estar predeterminada por la configuración del tema y no tienes mucha flexibilidad a menos que te sientas cómodo ajustando el código. Por otro lado, los temas de bloques ofrecen control total y puedes probar diferentes ubicaciones según el comportamiento del usuario. Es posible que una barra lateral izquierda funcione mejor para los visitantes de su sitio, pero una barra lateral flotante (una que permanece fija mientras el usuario se desplaza) podría ser una excelente opción para ciertas secciones.

Las barras laterales flotantes son especialmente populares en blogs, sitios de comercio electrónico y páginas de destino. Estas barras laterales permanecen visibles mientras los usuarios se desplazan por el contenido, lo que puede ayudarle a maximizar la interacción con elementos como boletines informativos o promociones. En los temas de bloques, es posible crear una barra lateral flotante a través del editor de bloques ajustando la configuración en el contenedor de la barra lateral.

Diseñar una barra lateral no se trata sólo de llenar el espacio, sino de crear un área útil y visualmente atractiva que respalde los objetivos de su sitio y mantenga a los visitantes interesados. He aquí cómo hacerlo bien:

Priorice el contenido clave: comience colocando lo esencial en la parte superior. Piense en la barra de búsqueda, publicaciones recientes, listas de categorías y enlaces a contenido popular. ¿Qué quieres que los visitantes vean primero? Asegúrese de que las cosas más valiosas estén ahí de un vistazo.

Cree espacio y separación: utilice espaciado, divisores o líneas sutiles para mantener las secciones distintas. Una barra lateral bien organizada resulta limpia y fácil de navegar, lo que ayuda a los usuarios a escanear rápidamente sin sentirse abrumados. ¿Desorden? ¡No invitado!

Barras laterales dinámicas de WordPress: personalice su barra lateral según la página. Por ejemplo, una barra lateral en publicaciones de blog puede incluir artículos relacionados, mientras que la barra lateral de una página de producto puede tener llamadas a la acción y testimonios. Adaptar el contenido lo mantiene relevante.

Mantenga la coherencia en todas las páginas: la personalización es excelente, pero mantenga el diseño general coherente para que los visitantes siempre sepan dónde encontrar elementos clave. La coherencia genera confianza y los usuarios se sienten como en casa cuando conocen el diseño.

Equilibre el estilo y la funcionalidad: mantenga las fuentes, los colores y los botones alineados con el tema de su sitio, pero no sacrifique la legibilidad por la estética. Una barra lateral atractiva es importante, pero una funcional y fácil de leer es esencial.

Diseño responsivo: asegúrese de que su barra lateral sea compatible con dispositivos móviles. En pantallas más pequeñas, las barras laterales suelen situarse debajo del contenido principal, así que priorice lo que los usuarios de dispositivos móviles deberían ver primero para disfrutar de una experiencia perfecta.

Pruebe diferentes diseños: ¡no tenga miedo de experimentar! Utilice pruebas A/B o recopile comentarios para descubrir qué funciona mejor. Pequeños ajustes, como mover un llamado a la acción o agregar un widget de publicación popular, pueden tener un gran impacto.

Centrarse en la experiencia del usuario: una barra lateral cuidadosamente diseñada puede ser una herramienta poderosa para mejorar la experiencia del usuario. Busque claridad y simplicidad, ayudando a los visitantes a encontrar lo que necesitan sin problemas.
Con una barra lateral bien planificada, no sólo mejorará la experiencia del usuario sino que también mantendrá a los visitantes interesados, lo que la convertirá en un activo valioso para su sitio de WordPress.

2 de diciembre de 2024

Los 10 mejores complementos de calendario para WordPress: desde eventos hasta citas

22 de enero de 2024

Demostración del tema Twenty Twenty-Four: obtenga la vibra del tema predeterminado de WordPress

20 de julio de 2023

¡Conozca el bloque gratuito de WordPress con IA para escribir de Getwid!

Widgets de la barra lateral: elegir los adecuados para su sitio

Tanto el tema Clásico como el de Bloque te permiten agregar widgets a tu barra lateral, pero con los temas de Bloque, obtienes mucha más libertad en términos de los widgets que puedes agregar.

Con el tema Clásico , a menudo trabajas dentro del área de widgets proporcionada por el tema, que normalmente incluye opciones básicas como:

• Publicaciones recientes
• Barra de búsqueda
• Categorías
• Archivo

Sin embargo, los temas de bloques le permiten agregar prácticamente cualquier bloque de contenido a la barra lateral, incluidos elementos avanzados como:

• Bloques de llamado a la acción (CTA)
• HTML personalizado (para anuncios u otras integraciones)
• Galerías de imágenes
• Testimonios
• Formularios de reserva

¿La mejor parte? Puedes agregar bloques que sean dinámicos. Por ejemplo, si tiene una tienda en línea, puede agregar un bloque de "Productos" que actualice automáticamente sus últimos artículos. O, para una empresa de servicios, puede crear un bloque personalizado con sus últimas promociones o espacios de reserva, haciendo que su barra lateral sea relevante y atractiva.

Algunas ideas más creativas para la barra lateral de WordPress

Para aquellos que desean una personalización aún mayor, las barras laterales pueden servir como mini paneles. Por ejemplo, si administra un sitio de membresía, su barra lateral podría mostrar contenido personalizado según las funciones de los usuarios o el estado de inicio de sesión.

En un blog, una barra lateral puede mostrar una “Cita del día” rotativa o un feed en tiempo real de sus últimas publicaciones de Twitter, agregando un elemento dinámico que actualiza el contenido cada vez que un visitante regresa.

En las tiendas de comercio electrónico, utilizar una barra lateral para mostrar ofertas de temporada u ofertas exclusivas solo para miembros puede generar urgencia e impulsar las ventas. Recuerde, una buena barra lateral es aquella que se siente como una extensión natural de su sitio, guiando al usuario sin abrumarlo.

Optimización móvil: adaptación de su barra lateral para visitantes móviles

Vivimos en un mundo en el que los dispositivos móviles son lo primero y su barra lateral debe ser lo más compatible con dispositivos móviles posible. Una barra lateral de tema clásico , especialmente en temas más antiguos, puede estar un poco abarrotada en pantallas más pequeñas. A menudo, estas barras laterales están ocultas detrás de un menú o se convierten en un elemento simple y plegable. Si bien esto resuelve el problema del espacio, también puede dificultar que los usuarios interactúen con los elementos de la barra lateral, especialmente si se trata de algo crucial como un formulario de reserva o un botón de llamada a la acción.

Los temas de bloque , sin embargo, manejan la optimización móvil a la perfección. Están diseñados teniendo en cuenta la capacidad de respuesta móvil, lo que significa que los bloques que uses en tu barra lateral se adaptarán a cualquier tamaño de pantalla. Ya sea que sus visitantes estén en una computadora de escritorio, tableta o teléfono inteligente, el contenido de su barra lateral se escalará y reorganizará para adaptarse a la pantalla. También puede optar por ocultar o reordenar bloques específicamente para dispositivos móviles para mantener todo limpio y fácil de navegar.

Consejo profesional: incluso en temas de bloque, no sobrecargues tu barra lateral con demasiados elementos. Si hay demasiada información, podría abrumar a los usuarios de dispositivos móviles. Mantenlo simple: menos es más cuando se trata de optimización móvil.

Concluyendo

¡Y ahí lo tienes! Es posible que las barras laterales hayan evolucionado, pero siguen siendo igual de útiles. Tanto el tema Clásico como el de Bloque ofrecen su propio conjunto de beneficios, y cada uno de ellos satisface diferentes necesidades. Los temas clásicos brindan simplicidad y facilidad de uso, mientras que los temas en bloque ofrecen control creativo total con un enfoque más moderno. Comprender estas diferencias puede ayudarle a tomar una decisión informada sobre qué diseño se adapta mejor a su sitio de WordPress.

Gracias a los temas de bloques, ahora puedes utilizar bloques para crear y colocar barras laterales donde quieras, sin necesidad de widgets. Las barras laterales basadas en bloques en WordPress son increíblemente flexibles y con solo unos pocos ajustes, puede crear una apariencia personalizada que mejore el diseño y la función de su sitio.

Crear y diseñar una barra lateral personalizada en WordPress es una manera fantástica de mejorar la funcionalidad y la experiencia del usuario de su sitio. Las barras laterales sirven como herramientas de navegación clave, ayudando a los visitantes a encontrar información importante mientras mantienen el diseño organizado y visualmente atractivo.

Si sigue los pasos que cubrimos, puede agregar fácilmente una barra lateral que se ajuste a su contenido y cumpla con los objetivos de su sitio. Recuerde mantenerla actualizada y relevante, ya que una barra lateral nueva puede mejorar significativamente la participación y retención de los usuarios. Ya sea que tengas un blog, una tienda en línea o cualquier otro tipo de sitio, una barra lateral cuidadosamente diseñada puede marcar una gran diferencia. Así que adelante y sea creativo con el menú de la barra lateral de WordPress y no dude en compartir sus experiencias o cualquier consejo en los comentarios a continuación. ¡Estamos emocionados de saber cómo haces brillar tus barras laterales!

Preguntas frecuentes