sidebar de wordpress

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.

barra lateral de una p√°gina web

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 

como poner el sidebar en wordpress

Ajustes de WordPress

 

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

barra lateral de wordpress

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.

opciones del tema de la barra lateral

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.

como poner la barra lateral en wordpress

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.

tama√Īo de sidebar

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.

sidebar de divi wordpress

Ejemplo del tema Divi

 

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

barra lateral en las entradas de wordpress

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

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.

editar la barra lateral de wordpress

 

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¬Ľ

quitar la barra lateral de wordpress

 

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.

como cambiar el ancho de la barra lateral

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.

tutorial-woosidebars

 

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.

 

4 comentarios en “La barra lateral de WordPress | Consejos, trucos y m√°s

  1. Genial. Muy buen post. S√ļper pr√°ctico. La barra lateral de WordPress ya no tiene secretos para los dummies como yo. Menos mal que te tenemos a ti. ¬°Gracias!

  2. Un art√≠culo muy interesante. Estoy comenzando en el mundo WordPress y se hace muy f√°cil seguir los pasos de este post, se agradece que adjuntes im√°genes, lo hace mucho menos complicado. Espero nuevos art√≠culos impaciente! Ha sido una grata sorpresa encontrar esta p√°gina, CINCO ESTRELLAS PARA SENSACI√ďN WEB!!

  3. Hola

    Como podemos personalizar las entradas como los blogs de las plantillas premium.
    Tengo Divi pero no lo domino y me cuesta hacer una barra lateral atractiva o en condiciones sin tener que usar m√°s plugins
    Siempre he trabajado con Joomla o Blogger y me cuesta adaptarme a wordpress

    1. Normalmente se usa c√≥digo CSS para personalizar la p√°gina que muestra las entradas y las propias entradas, ya que la mayor√≠a de los temas no tienen muchas opciones de personalizaci√≥n para la barra lateral o las p√°ginas especiales como la p√°gina que muestra las entradas. Con divi tienes algunas opciones de la barra lateral para cambiar su tama√Īo, (en el personalizador de temas) pero no tiene opciones para personalizar los propios elementos de la barra lateral de WordPress.
      Un saludo!

Deja un comentario

El email no ser√° publicado. Vas a introducir datos en la web si comentas:

  • Responsable de los datos Gerardo Garc√≠a Asensio
  • Los datos se usar√°n para gesti√≥n de comentarios y medidas de seguridad
  • Legitimaci√≥n: tu consentimiento.
  • Destinatarios: los datos estar√°n ubicados en los servidores de Siteground.
  • Derechos: podr√°s ejercer tus derechos, entre otros, rectificar, limitar y borrar tus datos.

Pin It on Pinterest

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. m√°s info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar