tutorial-woosidebars

La barra lateral de WordPress es un elemento a tener en cuenta en el dise√Īo de nuestra p√°gina web.

Y es que la barra lateral o sidebar nos sirve para mostrar muchos elementos mediante Widgets que nos ayudan a mejorar la funcionalidad, usabilidad y marketing de nuestra web.

Estos m√ļltiples elementos pueden ser de cualquier tipo como men√ļs o buscadores que ayudan a mejorar la navegaci√≥n normalmente mostrando las categor√≠as del blog o de los productos.

Botones sociales para captar seguidores en nuestras redes sociales.

Anuncios de Adwords o estáticos o que nos reporten beneficios generando ventas directas de nuestros productos o mediante anuncios de marketing de afiliación.

Por supuesto sin olvidarnos del típico formulario de Newsletter para captar suscriptores para nuestro boletín de noticias.

Y una buena estrategia para conseguir más éxito en nuestros objetivos es crear una barra lateral diferente para cada tipo de página de nuestra web.

Ya que hay elementos como las categor√≠as y etiquetas del blog que a veces no tienen sentido que se muestren en una p√°gina est√°tica como la p√°gina de inicio o la p√°gina de contacto y que √ļnicamente sobrecargan nuestra barra lateral.

Y como en verdad estamos hablando de √°reas de Widget nos puede ocurrir lo mismo con el Footer.

Muchas de las plantillas Premium como Divi ya tienen creadas o permiten crear diferentes áreas de sidebar personalizadas pero muchas otras plantillas no contemplan esta opción y para crearlas podemos utilizar el plugin WooSidebars.

 

Tutorial WooSidebars

WooSidebars es un plugin gratuito creado por los desarrolladores de Woocommerce y se encuentra en el repositorio de WordPress.

 

tutorial-plugin-woosidebars

 

Con este plugin podemos crear versiones diferentes de las áreas de Sidebar para crear barras laterales personalizadas y usarlas en páginas, entradas, páginas de taxonomías como categorías y entradas.

Tambi√©n podemos crear diferentes barras laterales para otras p√°ginas especiales como errores 404 o la p√°gina de b√ļsqueda.

Nota: este plugin no crea nuevas áreas de Widget si no que crea copias de las áreas que tiene tu tema activo para poder personalizarlas con diferentes Widgets y así tener barras laterales y footer diferentes en cada página o tipo de página.

Pero por ejemplo no puedes crear una nueva área de Widget que se muestre en la cabecera de tu web si tu tema no contempla esta opción.

 

Instalar WooSidebars

WooSidebars es un plugin gratuito que se encuentra en el repositorio de WordPress y puede ser instalado desde Plugin > A√Īadir Nuevo.

 

instalar-plugin-woosidebars

 

Crear barra lateral en WordPress

Una vez instalado el plugin WooSidebars vamos a sus opciones que se encuentran en Apariencia > Widget √Āreas.

En esta pantalla se nos mostraran las diferentes √°reas de las barras laterales y en la p√°gina en la que se mostraran.

Vamos a empezar a crear una barra lateral haciendo clic en el bot√≥n ‚ÄúAdd New‚ÄĚ.

 

nueva-barra-lateral-en-wordpress

 

En la siguiente ventana crearemos la nueva √°rea de barra lateral o pie de p√°gina.

Primero le ponemos un t√≠tulo y una peque√Īa descripci√≥n, estas opciones solo son para organizarnos mejor y no se mostraran en la parte p√ļblica de la web.

Despu√©s en el apartado ‚ÄúConditions‚ÄĚ tenemos que elegir en que p√°ginas se va a mostrar.

 

crear-barra-lateral-en-wordpress

 

En este apartado tenemos que pulsar la pesta√Īa Advanced para que se activen las dem√°s pesta√Īas que nos permiten elegir en que p√°ginas vamos a utilizar esta nueva √°rea de barra lateral.

En la pesta√Īa Pages podemos elegir una p√°gina individual que hayamos creado en nuestra web.

En la pesta√Īa Post Types, podemos elegir que la nueva √°rea se muestre para todas las entradas individuales o para otros tipos de post types personalizados que puede incluir nuestra plantilla como el portfolio.

En la pesta√Īa Taxonomy Archives puedes elegir que se muestre en las p√°ginas de categor√≠as y etiquetas.

En la pesta√Īa Taxonomy Terms podemos indicar que se muestre en la p√°gina de una categor√≠a o etiqueta concreta. Para poder utilizar estas opciones debe de haber post ya creados con las categor√≠as y etiquetas asignadas.

Y por √ļltimo en la pesta√Īa Template Hierarchy podemos elegir que la barra lateral se muestre en p√°ginas con la misma jerarqu√≠a es decir, ya sean p√°ginas est√°ticas, entradas simples, p√°gina de archivos, la p√°gina frontal, la p√°gina de resultados o la p√°gina de error 404.

Por ejemplo si queremos que la barra lateral sea la misma en la p√°gina donde se muestran las entradas (la p√°gina del blog) y en cada entrada individual, tenemos que marcar la p√°gina blog en la pesta√Īa Pages y en la pesta√Īa Post Types marcar la casilla de las entradas individuales.

Esto es muy √ļtil para mostrar una barra lateral con las categor√≠as, etiquetas y entradas recientes del blog pero que no se muestre en las dem√°s paginas como en la p√°gina de contacto que carece de sentido mostrar ah√≠ estos elementos.

Por ultimo tenemos que marcar en el desplegable que tipo de √°rea de Widget se va a sustituir para las p√°ginas elegidas, y te aparecer√°n las √°reas de las barras laterales y las √°reas del footer que tenga tu tema de WordPress.

Y despu√©s pulsamos el bot√≥n ‚Äúpublicar‚ÄĚ.

 

Configurar la nueva √Ārea de Widget

Ahora tenemos que ir a Apariencia > Widgets donde nos aparecer√° el √°rea personalizada que hemos creado con WooSidebars y la configuramos a nuestro gusto, arrastrando Widgets dentro del √°rea.

configurar-barra-lateral

Y fin del tutorial de WooSidebars, de esta manera tan sencilla podr√°s tener una barra lateral personalizada y diferente en cada p√°gina de tu web.

7 comentarios en “Tutorial WooSidebars | Crea barras laterales personalizadas por p√°ginas

  1. Hola Gerardo, es justo lo que estoy buscando! Me parece muy √ļtil para aquellos que tengamos una plantilla que no tenga opci√≥n de √°reas de sidebar personalizadas. ¬°Muchas gracias por la info, y comparto!

  2. Era justo lo que buscaba, pero ya no se actualiza desde hace un a√Īo y al menos en mi versi√≥n ya no funciona… Conoces alguno similar ?? He probado un par y nada…
    Visito de vez en cuando tu web, por cierto, nunca he comentado pero sigue as√≠ ūüôā

  3. Buenas y porque a mi se me ve la barra lateral en donde tenia que estar el pie de pagina? porque no la quiero ahi, la quiero en el lado derecho de la web, estoy usando el tema por defecto del wordpress.

    1. El nuevo tema de WordPress Twenty nineteen no tiene barra lateral, por eso los widgets que se insertan en la barra lateral se van al pie de p√°gina… La verdad que no me gusta nada este nuevo tema por defecto de WordPress, me gusta m√°s Twenty sixteen o Twenty seventeen.
      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