En este post os traigo… Cómo podemos crear sidebar en WordPress y todos los consejos y trucos que me vengan a la cabeza para mejorar este elemento de nuestra página web.

¿Qué es el sidebar o barra lateral?

La barra lateral de nuestra página web, es una sección vertical que se sitúa en la parte lateral de la pantalla y que podemos utilizar en páginas o en entradas.

Se puede utilizar en páginas y post para mejorar la navegación con menús, para mostrar contenido adicional, anuncios, formularios de suscripción y otros elementos típicos.

En las tiendas online el sidebar se suele centrar en la navegación del usuario a través de los productos, las categorías o los filtros de productos.

Como poner una barra lateral en WordPress

Poner o configurar el sidebar en WordPress es un poco diferente dependiendo del tema que utilices.

Normalmente, la barra lateral estará activa en la página que muestre las entradas del blog y también dentro de cada post.

La página frontal puede estar configurada para mostrar los post y el sidebar, pero puedes cambiarla por otra página en Ajustes > Lectura 

Ajustes de WordPress

En este caso, solo hay una barra lateral dentro de la página que muestra las entradas.

Captura del tema Twenty Seventeen

Si tu tema es premium, seguramente para crear o poner la barra lateral tienes que buscar las opciones en varios lugares, ya que suelen tener muchas opciones para el sidebar de WordPress, primero tienes que elegir el tipo de plantilla de página que permita sidebar o buscar en las opciones propias del tema la barra lateral para activarla.

Primero buscaremos el sidebar en las opciones generales del tema.

Normalmente, en las opciones generales de los temas premium configuran y muestran la barra lateral para todas las páginas o entradas, pero si queremos que una página o entrada en concreto no tenga la barra lateral podemos quitarla con las opciones de la propia página.

Ajustes de un tema

Si queremos que una página de WordPress en concreto tenga sidebar. Primero buscamos la opción «plantilla» dentro de la página donde quieras poner la barra lateral.

Como ves en la imagen ,puede que tu plantilla tenga varios estilos de páginas, las de blog normalmente utilizan barra lateral y las del tipo «full width» no la utilizarán.

Ejemplo del tema Bridge

Dependiendo de nuestro tema también podemos encontrar opciones de la barra lateral para WordPress debajo del editor de texto de las páginas y entradas.

Ejemplo del tema bridge

En temas de WordPress que utilicen maquetadores visuales, como Divi, también podemos mostrar el sidebar de WordPress desde el constructor visual dentro de las páginas.

Ejemplo del tema Divi

En Divi, también puedes elegir la posición de la barra lateral en las entradas.

Ejemplo del tema Divi

Como editar la barra lateral

Ahora vamos a editar el sidebar de WordPress con los elementos que creamos necesarios, y vamos a poner en la barra lateral, textos, imágenes, videos y otros elementos.

Los elementos del sidebar se insertan mediante Widgets. Los Widgets son módulos de contenido y cada uno sirve para un elemento diferente.

Para configurar los Widgets vamos a Apariencia > Widget

Cada Widget sirve para incrustar un elemento concreto como, textos, imágenes, audios, las entradas recientes etc… y podemos encontrar Widget adicionales dependiendo del tema y los plugins.

Los Widget se pueden introducir en diferentes zonas de tu página web, como la barra lateral o el footer, dependiendo de tu tema, tendrás más o menos lugares donde poner Widgets.

Para poner un Widget en la barra lateral, lo único que tienes que hacer es arrastrar el widget a la zona que quieras.

Como eliminar la barra lateral en WordPress

Aunque es recomendable usar la barra lateral al menos en el apartado del blog, en algunas ocasiones no queremos tener sidebar, ya sea porque queremos que la página tenga ancho completo o por cualquier otro motivo.

Para eliminar el sidebar de WordPress, primero buscaremos si nuestro tema tiene tipos plantilla de página personalizadas y después miraremos en las opciones generales del tema, como ya hemos visto en este post.

Las opciones para no mostrar la barra lateral suele ser, utilizar una plantilla de página Full Width o de ancho completo o buscar opciones de la plantilla llamadas «No sidebar, Hide sidebar»

En el caso de que tu tema no tenga opciones para quitar la barra lateral desde las opciones del tema o desde la plantilla puedes eliminar la barra lateral de WordPress con código.

Para eliminar la barra lateral de WordPress con código tendrás que modificar o crear los archivos del tema.

Los archivos del tema que tienes que modificar estarán dentro de la carpeta /wp-content/themes/nombre-del-tema

Y pueden ser page.php para modificar las páginas y single.php para las entradas pero también pueden existir otros dependiendo de tu tema.

El código que debes buscar o modificar para eliminar el sidebar de WordPress suele encontrarse en la parte inferior del archivo y ser parecido al siguiente código.

<?php get_sidebar(); ?>

Personalizar el sidebar

Pocos temas de WordPress ofrecen opciones para personalizar el sidebar y si las ofrecen estas suelen ser muy básicas, digamos que es una parte un poco olvidada.

Algunos solo permiten modificar el tamaño y color del texto de la barra lateral. Y muy pocos permiten cambiar el tamaño del ancho del sidebar.

Para hacerlo la mejor opción es modificar con código CSS en el archivo style.css la caja del contenido y la caja del sidebar modificando sus tamaños según convenga.

En el caso de que no sepas código CSS puedes ayudarte con plugins editores visuales de css.

En la imagen vemos como se ha cambiado el ancho de la barra lateral de WordPress  con un plugin de edición CSS, y podemos hacer otros muchos cambios como modificar los textos, poner color al fondo etc.

Nota: no es la mejor manera de editar el código CSS, pero para pequeños cambios y salir del paso la podemos utilizar.

Ejemplo yellow pencil visual css style editor

Como crear una barra lateral flotante WordPress

Si quieres que los Widgets de la barra lateral estén siempre visibles cuando el usuario hace scroll con el ratón puedes crear un sidebar flotante con el plugin q2w3 fixed widget.

Pero en esta ocasión no te lo voy a explicar yo, te lo va a explicar mi amigo Rafa Arjonilla en su fantástico videotutorial.

Crear múltiples barras laterales en WordPress

Si quieres que las barras laterales muestren diferentes Widgets en diferentes páginas, puedes crear múltiples barras laterales que sustituyan a la original en diferentes páginas.

Para hacerlo puedes utilizar plugins como Woosidebars o Custom sidebars

Puedes ver más información en el tutorial de Tutorial woosidebars barras laterales personalizadas

Optimizar la barra lateral

La barra lateral de WordPress es un auténtico basurero, donde se ponen elementos sin razones concretas.

En la mayoría de páginas web podemos encontrar, calendarios, contadores de visitas, horarios de tienda, formularios de contacto, el tiempo, redes sociales, anuncios, etc…

Y es que puedes empeñarte en meter ahí todo lo que se te ocurra, incluso solo porque la competencia lo tiene y eso es un error.

¿Se puede saber para qué vas a mostrar en la barra lateral un reloj, o informar sobre si llueve o no en tu localidad?

Por no decir nada de la nube de tags y el contador de visitas, elementos que están totalmente desfasados y son típicos de las páginas web del año 2000 (Del 2000 «antes de cristo» por lo menos).

Piensa que la barra lateral es un elemento que se replica en muchas páginas de nuestra web y en las entradas del blog, por eso hay que pensar si los elementos que vamos a poner en ella son de utilidad o podemos prescindir de ellos.

Reducir los elementos de la barra lateral puede mejorar la velocidad de la mayoría de las páginas y entradas de tu web.

Así que piensa que debe y que no debe ir ahí.

• ¿Es necesario un botón de like para la página de facebook cuando dentro de tu fan page hay uno?
• ¿Es necesario un botón de suscribirse al canal de YouTube cuando debajo de cada video ya está ese botón?
• ¿Es necesario que pongas el teléfono y un formulario de contacto si tu web ya tiene una página estática de contacto?
• ¿Son necesarios botones para compartir en redes sociales si ya los tienes en una barra flotante o incrustados en los post?
• ¿Es necesario duplicar la newsletter en el sidebar y luego en un popup?

Y esto mismo te debes de preguntar con cada elemento que quieras introducir en el sidebar.

Consejos de Navegación y SEO

El sidebar puede convertirse en un aliado para mejorar el seo, si lo utilizamos para mejorar la navegación en nuestra página web y de paso reducir la tasa de rebote.

Mostrar las categorías en la barra lateral sirve para que un usuario pueda ver los artículos de una temática en concreto y hace que encuentre esos post que le interesan más fácilmente.

Otra buena práctica es mostrar los artículos relacionados en la barra lateral para que si al usuario le interesa haga clic en ellos.

Por ejemplo, si tengo un post de «los lugares más bonitos de teruel», también muestre el artículo «los mejores hoteles de teruel» que es algo que le puede interesar al usuario.

O en vez de mostrar artículos relacionados, puedes mostrar los artículos que más visitas y seo tengan, para potenciarlos y que reciban clics y visitas adicionales.

Si tienes una tienda online utiliza el sidebar para guiar a tus clientes a través de tus productos mediante las categorías de productos y filtros de precios u otros.

Otra buena práctica para el seo es no tener los títulos que estén en el sidebar no sean ni h1 ni h2, ya que si no estás insinuando a Google que el contenido de la barra lateral es tan importante como el contenido del artículo.

Conclusión

Si utilizas la barra lateral de WordPress hazlo con cabeza, y definiendo un objetivo concreto para esta parte tan importante de tu web.

No la sobrecargues de elementos innecesarios que pueden ralentizar tu web o confundir a tus usuarios.

¡Y fin! espero que te sean útiles estos consejos y si puedes aportar tu granito de arena hazlo en los comentarios.