Curso WordPress: Widgets, añadiendo contenido y funcionalidad a nuestros sidebar o barras laterales en WordPress

El diseño web va cambiando conforme pasan los años y surgen nuevas tendencias. Sin embargo, podemos decir que a la larga se repiten una serie de estructuras, que podríamos llamar necesarias. En este curso ya hemos hablado de varias de estas estructuras, como los menús o las cabeceras; de otras no lo hemos hecho tan directamente pero sí es cierto que hemos tratado como manejarlo de forma indirecta, la parte “principal” con el contenido, que lo manejamos con las entradas o las páginas.

Nos queda otro elemento verdaderamente importante, podríamos decir que es el actor auxiliar o de reparto, ese que no es el protagonista pero que sin su presencia la película no podría hacerse. Hablamos de las barras laterales y los pies de página.

¿Qué suele haber en las barras laterales y los pies de página?

Depende mucho del sitio pero por norma general podemos encontrar cosas como:

  • Los últimos comentarios que ha habido en el sitio
  • Un mapa con la localización de la empresa
  • Interacciones sociales: pueden ser últimos tweets o un cuadro para hacer “Me gusta” en la página de Facebook
  • Un pequeño formulario de contacto
  • Los productos más vendidos en una tienda online con WooCommerce

Entre otras cosas. Si queréis usar estas características, necesitaréis usar un widget.

¿Qué es un widget?

Más bien deberíamos decir que es un widget en WordPress porque si, por ejemplo, usáis Android, sabréis que hay widgets para el escritorio del móvil. En el caso de WordPress los widgets son:

Elementos que añaden contenido y funcionalidad a nuestras barras laterales o sidebars

Como veis, esta definición, si no has manejado nunca antes WordPress es demasiado escueta. ¿Qué son las barras laterales? Realmente, para usar el término internacional, las llamaremos sidebars y aunque su nombre dé lugar a generar dudas, las barras laterales no tienen por qué ser una barra, ni tampoco estar en un lateral; aunque normalmente ambas afirmaciones sean correctas.

Al igual que generábamos menús en contenedores para menús especificados por el theme, cada theme, deja unos sitios preparados para alojar widgets, esos sitios son los sidebars y suelen estar situados en las barras laterales y los pies de página

Los widgets fueron diseñador originalmente para ofrecer a los usuarios de WordPress una forma sencilla de manejar el diseño y la estructura del sitio. La idea era y sigue siendo:

  • No manejar código
  • Poder configurar cada widget de forma independiente
  • Modificar el orden y el sitio donde se muestran los widgets a base de usar sólo el ratón (básicamente hacer un movimiento de arrastrar y soltar)
  • Y poder crear nuevos widgets en caso de ser necesario (esto ya es programación y es algo que en Codection hacemos a menudo)

Como un ejemplo vale más que toda la explicación, y más aún si es una imagen, os voy a enseñar unos widgets que tenemos en este portal en el pie de página:

Codection   WordPress  WooCommerce  tiendas online  plugins a medida  themes a medida

 

Como ves tenemos 5 widgets, distribuidos en 4 columnas, en donde mostramos diferente información que consideramos de utilidad, además de permitir contactar con nosotros por un formulario de contacto.

¿Cómo manejamos los widgets en WordPress?

Como veis los widget son elementos “secundarios” del portal, pero que tienen especial importancia porque aparecen en multitud de páginas y son siempre elementos auxiliares que pueden facilitar por ejemplo la conversión, de un visitante en un comprador, en nuestra caso por ejemplo a través del formulario de contacto.

Los widgets tienen tres características que los hacen muy potentes:

  • Flexibles: existen widgets para multitud de tareas, seguro que encuentras el que necesitas
  • Fáciles de usar: arrastrar y soltar es algo amigable, para manejar widgets básicamente sólo hace falta eso
  • Ampliables: siempre alguien podrá hacerte el widget que necesitas para tu portal

Veamos lo fáciles que son de usar, empecemos por lo básico, esta explicación es válida tanto para un WordPress autoalojado como para WordPress.com:

  • Dentro del escritorio WordPress
  • Accedemos a “Apariencia”
  • Posteriormente a “Widgets”
  • Aparece una pantalla dividida en dos

Cada parte se corresponde a:

  • Parte izquierda: widgets que tenemos disponibles, serán más conforme los plugins o themes que tengamos incluyan nuevos widgets
  • Parte derecha: los sidebars que tenemos donde podemos dejar widgets. En este caso tenemos sólo uno pero puede haber ninguno (lo cuál es raro) o varios, incluso en algunos themes hay un generador de nuevos sidebars

Widgets ‹ Blog del Curso WordPress Codection — WordPress

El funcionamiento es sencillo, deberemos escoger de la parte izquierda un widget y llevarlo arrastrando a la parte derecha, al sidebar que elijamos, añadimos también que es importante elegir en qué orden lo queremos, si encima, abajo o entre medias de otros widgets (podréis hacerlo subiendo o bajando el widget con el ratón dentro del sidebar.

Otro método también disponible, es hacer un clic sobre el widget en la parte izquierda y luego, en el panel que se abre, elegir a qué sidebar queremos llevarlo.

Selección_004

Opciones del widget

Algunos widgets tienen opciones, para verlas debemos hacer clic en el triángulo invertido que hay en el extremo derecho del widget, es el mismo método que en el caso de los elementos del menú. Le dais y os aparecerá un formulario donde rellenar las opciones:

Widgets ‹ Blog del Curso WordPress Codection — WordPress

Rellenáis las opciones y le dais a guardar. En caso de querer borrar el widget, al igual que en el caso de los menús, tenemos en la esquina inferior izquierda el botón con forma de enlace para borrarlo. ¿Sencillo no? Si queréis cambiarlo de orden, tenéis que coger el cuadro de ese widget, y sin soltar el ratón, ponerlo por encima del widget superior, en este caso llamado “Enlaces”.

Ya podemos ver cómo queda el widget en la barra lateral del sitio.

 

Si no quieres perderte las siguientes entregas del Curso WordPress dáte de alta gratis en el siguiente formulario:

Acepto la política de privacidad y he leído el aviso legal
  • Pingback: Top RSS semanal: curso WordPress, discos duros y kernel()

  • Pingback: Widgets en WordPress: qué son, para qué sirven y cómo se manejan()

  • Juan Pablo San Martín Hernánde

    Hola buen post, el problema que tengo es que mi wordpress no muestra la opcion de crear widget de barra lateral, solo de footer, hay alguna opcion que las esté filtrando, porque si no las muestra no puedo nisiquiera configurar.

    • Juan Pablo,

      El problema es que tu theme no tiene esa opción, habría que 1) implementársela o 2) cambiar de theme.

      • Juan Pablo San Martín Hernánde

        Gracias Francisco, y cómo se la puedo implementar? algun plugin? quedo atento saludos y gracias por la ayuda?

        • No, eso no podrás hacerlo mediante plugin, tendrás que registrar un sidebar y maquetarlo en el código del theme.

          No es muy complejo si lo has hecho antes, pero si es la primera vez quizás tardes menos cambiando de theme.