Widgets en WordPress

Actualizado: junio/2019 Versión: 5.2.x  Nivel: Básico

Widgets en WordPress

Los plugins para WordPress son aplicaciones desarrolladas para cumplir una función específica en un sitio web. Son independientes, no vienen por defecto y hay que instalarlos según las necesidades.

Por otro lado, algunos widgets suelen venir por defecto en una instalación de WordPress. Suelen ser dependientes, tanto de la plantilla como de algunos plugins y, a diferencia de los plugins, estos no se instalan.

1. ¿Qué son los widgets?

Básicamente un widget en WordPress es una caja con contenido que se ubica en algunas áreas especificas de un sitio web y nos permiten personalizar la apariencia con información adicional.

Estas áreas normalmente suelen ser:

  • El sidebar (barra lateral) mayormente utilizado para el blog.
  • El footer (pie de página).
  • La cabecera de un sitio web (dependiendo de la plantilla).
  • En el contenido de una página o entrada (dependiendo de la plantilla).

Esta caja se utiliza normalmente para mostrar contenido estático o dinámico en un sitio web.

Este contenido puede ser:

  • Las últimas entradas en el blog.
  • Categorías y etiquetas del blog.
  • Caja de búsqueda en el sitio web.
  • Comentarios recientes.
  • Texto, entre otros.
Widgets en WordPress

Ejemplo de widgets en WordPress

2. ¿Dónde y cómo se crean los widgets en WordPress?

WordPress incluye una serie de widgets predeterminados para usarlos en un sitio web. Estos widgets se encuentran en el apartado Apariencia >> Widgets.

2.1 Widgets disponibles

Estos son los widgets que vienen por defecto en una instalación de WordPress.

Los más utilizados son:

General

  • Buscar. Agrega una caja de búsqueda en el sitio web.
  • HTML personalizado. Puedes añadir cualquier tipo de contenido en formato HTML. En la lección, HTML y CSS para WordPress, encontrarás una breve guía sobre el uso de estos códigos.
  • Imagen. Puedes añadir una imagen en cualquier parte de tu sitio web.
  • Menú de navegación. Puedes crear un menú secundario y añadirlo al sidebar de tu sitio web
  • Texto. Puedes añadir texto. Éste bloque es muy útil para los shortcodes que ofrecen algunos plugins.

Para el blog (y footer)

  • Categorías. Crea una lista, en formato menú, de las categorías del blog. Solo se mostrarán las categorías que estén asignadas a entradas.
  • Comentarios recientes. Añade una lista de los últimos comentarios en el blog. Puedes indicar cuántos comentarios quieres que se muestren.
  • Entradas recientes. Añade una lista de las últimas entradas del blog. Puedes indicar cuántas entradas quieres que se muestren.
  • Nube de etiquetas. Añade un listado de todas las etiquetas creadas en el blog. Solo se mostrarán las etiquetas que se encuentren en uso.
Widgets en WordPress

Widgets disponibles en WordPress

2.2 Bloques de widgets

Al igual que sucede con los menús, las plantillas son las que establecen la cantidad y espacios disponibles para añadir widgets en un sitio web.

En algunos casos, existen plantillas PREMIUM con las que se pueden generar espacios infinitos para widgets.

Astra, la plantilla que estamos utilizando en este curso de WordPress, permite añadir widgets en 1 sidebar, 1 cabecera y 6 espacios en el footer:

  • Barra lateral principal es el sidebar que ofrece la plantilla.
  • Cabecera es un espacio que ofrece la plantilla para personalizar la cabecera del sitio web con widgets.
  • Barra del pie de página, 1 y 2, y área de widgets del pie de página, 1 al 4, son los espacios disponibles en el pie de página.

Además, mediante el plugin Lightweight Sidebar Manager, con Astra podremos crear ilimitados sidebar para añadir widgets en cualquier tipo de contenido de nuestro sitio web.

Widgets en WordPress

Espacio para widgets con Astra

3. Añadir widgets en un sitio web

Para añadir un widget en tu sitio web, basta con seleccionar el widget que deseas añadir y arrastrarlo hacia una de los bloques de widgets.

Por ejemplo, vamos a añadir el widget Entradas recientes en la barra lateral principal.

Widgets en WordPress

Configuración de un widget en WordPress

Las opciones que ofrece el widget son:

  • Título. Es el título que se mostrará en el sitio web. Si lo dejas en blanco, se mostrará por defecto el nombre del widget.
  • Número de entradas a mostrar. Es el número máximo de entradas que se mostrarán.
  • ¿Mostrar la fecha de la entrada? Se mostrará la fecha de publicación de la entrada.

Una vez configures el widget, haz clic en el botón Guardar.

Dirígete a cualquier página o entrada de tu sitio web donde esté activa la barra lateral principal.

Widgets en WordPress

Vista previa de un widget en el sitio web

Puedes añadir todos los widgets que desees en las barras laterales y el footer de tu sitio web. Asegúrate de añadir los widgets que puedan mostrar información.

Por ejemplo, si aún no tienes comentarios en las entradas de tu blog, no tiene sentido añadir el widget Comentarios recientes ya que no se mostrará nada.

Continuando con el ejemplo de lecciones anteriores, donde creamos categorías y etiquetas, entradas y comentarios para nuestro blog de deportes, podemos añadir todos los widgets que compondrán nuestro sitio web.

Nos quedaría algo así:

Widgets en WordPress

Widgets en nuestro blog de deportes

4. Personalizar widgets con Astra

Astra, al igual que muchas plantillas WordPress, permite elegir, en qué tipo de contenido, añadir widgets.

Ya sea en las páginas, entradas del blog o productos de una tienda online, puedes elegir dónde añadir los widgets que consideres oportunos.

4.1 Desde las opciones de la plantilla

4.1.1 Barra lateral

Dirígete al apartado Apariencia >> Personalizar >> Diseño >> Barra lateral.

  • Diseño predeterminado.
    Puedes seleccionar dónde quieres que se muestre la barra lateral, por defecto, en todo el sitio web.
  • Páginas.
    Puedes seleccionar si quieres que se muestre, y dónde, la barra lateral en los apartados página de tu sitio web. Si seleccionas Predeterminado, se aplicará la opción que hayas elegido en Diseño predeterminado.
  • Entradas del blog.
    Puedes seleccionar si quieres que se muestre, y dónde, la barra lateral en las entradas del blog. Si seleccionas Predeterminado, se aplicará la opción que hayas elegido en Diseño predeterminado.
  • Archivos de entradas del blog.
    Puedes seleccionar si quieres que se muestre, y dónde, la barra lateral en la página principal del blog, categorías y etiquetas. Si seleccionas Predeterminado, se aplicará la opción que hayas elegido en Diseño predeterminado.
  • Ancho de la barra lateral.
    Puedes seleccionar el ancho de la barra lateral en todo el sitio web.
Widgets en WordPress

Configuración de la barra lateral en Astra

4.1.2 Pie de página

Dirígete al apartado Apariencia >> Personalizar >> Diseño >> Pie de página >> Widgets del pie de página.

  • Habilitar Widgets.
    Puedes habilitar los widgets del pie de página en todo el sitio web.
  • Borde superior de los widgets del pie.
    Si habilitas los widgets de pie de página, puedes elegir el ancho y color del borde que separa la sección del pie de página con el contenido.
Widgets en WordPress

Configuración de los widgets del pie de página en Astra

4.2 Desde cada página (o entrada) individual

Dirígete a cualquier página o entrada que tengas creada.

En cada página (y entrada) existe un bloque llamado Ajustes de Astra con los puedes personalizar las opciones de cada página o entrada individualmente.

Estas opciones tendrán prioridad sobre las opciones generales que se han configurado en Apariencia >> Personalizar.

Widgets en WordPress

Ajustes de Astra en una página/entrada individual

Las opciones que ofrece este bloque, para habilitar o deshabilitar los widgets, son:

  • Barra lateral.
    Puedes seleccionar si quieres que se muestre, y dónde, la barra lateral.
  • Desactivar widgets del pie de página.
    Permitirá habilitar o deshabilitar los widgets del pie de página sólo en esta página (o entrada).
  • Desactivar barra del pie de página.
    Permitirá habilitar o deshabilitar la barra del pie de página sólo en esta página (o entrada).

Estas opciones son muy útiles cuando se diseña una landing page en un sitio web.

5. Widgets inactivos

Al cambiar de plantilla en WordPress, por lo general, algunos widgets, que se encontraban configurados con la plantilla anterior, van a desaparecer o se mostrarán en otras ubicaciones ya que normalmente la arquitectura de las plantillas suele variar.

En el apartado Apariencia >> Widgets existe un espacio llamado Widgets inactivos que es donde se alojarán todos los widgets que hayan desaparecido de tu sitio web pero manteniendo la configuración original.

De esta manera, lo único que tienes que hacer es seleccionarlos y arrastrarlos a la nueva ubicación de tu nueva plantilla sin tener que configurarlos nuevamente. Esto es algo muy valioso que tiene WordPress para ahorrar tiempo y dolores de cabeza.

Widgets en WordPress

Widgets inactivos en WordPress

Otra de las ventajas que ofrecen los Widgets inactivos es que, con la misma plantilla, puedes "guardar" tu mism@ los widgets que no estés utilizando pero que quieras volver a utilizar en un futuro.

Esto es muy útil para añadir un widget tipo imagen con una promoción por tiempo limitado (para navidad por ejemplo).

Lo seleccionas y lo arrastras al espacio Widgets inactivos. Desaparece de tu sitio web pero no de WordPress.

6. Instalar widgets adicionales

Realmente el término instalar widgets no es correcto.

Como te he mencionado al inicio de esta lección, los widgets no se instalan. Se instalan los plugins y, algunos de estos, suelen ofrecer widgets que puedes utilizar en tu sitio web.

Los widgets más populares utilizados mediante plugins son los de redes sociales aunque también puedes añadir widgets para mostrar la hora, votaciones, formularios entre otros.

Los widgets son recursos que te permiten mejorar la estética y usabilidad de un sitio web. Recuerda que los widgets no realizan un trabajo; lo hacen los plugins y, algunos plugins, no añaden widgets.

Y sobretodo y muy importante...

Evita el uso excesivo de widgets en tu sitio web. Esto perjudicará el valioso contenido que ofreces y perderás usuarios y clientes. Se responsable ante todo.

¿Te ha gustado?

Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

Valora esta entrada

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas

(3 votos, promedio: 5,00 de 5)

Cargando…

Recibe notificaciones de actualizaciones

Suscríbete para recibir notificaciones de las actualizaciones del curso en tu correo.

Cuéntanos, ¿qué tal te la has pasado?

Deja un comentario si tienes alguna duda o comparte como ha sido tu experiencia. No necesitas registrarte para comentar. Cuando vayas a escribir tu nombre, marca la casilla Prefiero comentar como invitado y envía tu comentario.