Guía completa sobre los widgets de WordPress

La capacidad de customización es una de las principales características que hacen de WordPress el CMS más usado del mundo.

Y como era de esperar, WordPress nos facilita muchos elementos para personalizar algunas partes de nuestra web, entre ellos los Widgets.

Qué son los Widgets de WordPress

Los Widgets son bloques de contenido que se muestran a lo largo de una página web, ayudando a complementar el sitio con funciones gráficas, informativas o interactivas.

Generalmente se pueden implementar en las barras laterales, el encabezado y el pie de página.

A lo largo de esta guía se menciona “Widget” al igual que “bloque”. Esto es debido a que muchos de los Widgets aquí mencionados, también se usan como bloques de Gutenberg.

Para qué sirven los Widgets en WordPress

Los Widgets son muy necesarios cuando vas a crear una página web, son los encargados de mostrar imágenes, vídeos, calendarios, cuadros de texto, tablas de contenido, etc.

Son espacios adicionales que pueden contener información de utilidad.

Todos los Widgets tienen ciertas opciones y facilitan la edición y movimiento a través de la página, por ejemplo:

• Copiar
• Duplicar
• Insertar antes.
• Insertar después.
• Mover a.
• Editar como HTML (Esto si tienes conocimientos al respecto, pues esta utilidad permite visualizar la página en código HTML para poder personalizarla a tu gusto.
• Bloquear el cuadro para que no se pueda mover de esa área si por alguna razón presionamos sobre este.
• Eliminar

¿Es posible crear Widgets personalizados en WordPress?

Claro que sí. Lo único que necesitaremos es tener conocimientos avanzados de código en WordPress.

Por defecto, WordPress trae por defecto diferentes Widgets que se pueden encontrar en apariencia>widgets

Son los siguientes:

Widgets de texto

Estos son los widgets que sirven para añadir cualquier tipo de texto. Como párrafos, citas, listados u otros elementos que requieran explicación o información.

Antes de ver cada uno de estos widgets, es importante conocer que encontrarás una barra de herramientas con la que accederás a otras opciones de personalización por bloque.

Por ejemplo:

• Alineación del texto: centrado, izquierda o derecha
• Letras en negrita
• Mover área de widget: pie de página, lateral, cabecera o barra superior
• Aplicar letra cursiva
• Insertar enlaces
• Visualización como código integrado
• Visualización como una entrada de teclado
• Imagen integrada al texto
• Modo resaltado
• Subíndice y superíndice
• Tachado

Párrafo

Al crear un Widget haciendo clic en el símbolo “+”, por defecto aparecerá un bloque de párrafo. Una opción de gran utilidad es que podremos empezar escribiendo la barra diagonal en un bloque de párrafo para buscar cualquier otro tipo de bloque o Widget. Por ejemplo, podemos escribir “/h2” y pulsar enter, automáticamente se creará un bloque de encabezado tipo H2.

Los párrafos son bloques de texto común, donde está el contenido descriptivo de la página.

Encabezado

Los encabezados son los titulares de las secciones de texto. Sirven para crear relevancia lógica en cualquier texto, como en los artículos de los periódicos. Podemos diferenciar entre los H1, H2, H3, H4, H5 y H6, por orden de relevancia.

Lista

El elemento lista nos permite crear listados ordenados de forma numérica o sin ordenar

• Esto es
• un listado
• Sin ordenar

1. Esto es
2. un listado
3. ordenado

Cita

Este bloque nos permite hacer referencia a algún texto a destacar. Por ejemplo, podemos hacer referencia a una frase de nuestro texto que describa bien el tema principal que estemos tratando.

Código

Al escribir código en cualquier lenguaje (que no esté entre etiquetas HTML) WordPress lo limpia para, por ejemplo,  no correr riesgos de seguridad. Este Widget nos permitirá escribir código sin riesgos de seguridad y sin que WordPress lo borre en el front end.

Preformateado

Este Widget de texto nos permitirá escribir texto manteniendo el formato de escritura. También es muy útil cuando queremos mantener el formato cuando hacemos copia/pega de otra página.

Párrafo de cita

Estos Widgets son una manera muy atractiva para hacer alguna referencia externa. Su comportamiento es idéntico al de la cita común, solo que con un toque algo más estético.

Tabla

Las tablas son elementos HTML de lo más útiles cuando queremos organizar contenido agrupado por secciones.

Al añadirlas podemos seleccionar el número de filas o columnas y crearlas en función de cada necesidad.

Las tablas tienen algunas opciones únicas para utilizar una vez creadas:

• Insertar fila encima
• Insertar fila debajo
• Borrar fila
• Insertar una columna antes
• Insertar una columna después
• Eliminar columna

Verso

El bloque o Widget “verso” nos permitirá crear un texto manteniendo los espacios y saltos de línea tal y como se han introducido, sin modificación alguna. Suele ser usado para todo tipo de expresiones literarias, resaltando la poesía.

Widgets de medios

Este tipo de Widgets nos facilita la implementación de contenido multimedia a la página web. Es decir, los widgets de medios son para agregar música, audios, vídeos, imágenes e incluso galerías.

Los bloques de imagen y galería nos permitirán recortar e incluso usar filtros duotonos. Es importante que siempre añadamos un ancho y alto específico para cada imagen. Esto evitará que se mueva la estructura de la página mientras se está cargando (problemas CLS).

Imagen

El bloque de imagen nos permitirá subir imágenes individuales de un modo muy sencillo. Para escoger el elemento a usar tendremos que escoger:

• Subir: Se utiliza cuando la imagen se encuentra almacenada en tu ordenador o dispositivo móvil. Al seleccionarla, solo debes esperar a que cargue en la galería de medios de wordpress y ya puedes aplicarla.
• Biblioteca de medios: en esta es donde se albergan las imágenes cargadas a la nube de WordPress. Puedes extraer imágenes desde allí e incluso subir algunas y dejarlas para cuando las vayas a utilizar. También se almacenan todas las fotografías que añades en cada uno de los posts.
• Insertar desde una URL: si la imagen que deseas utilizar no está en tu ordenador ni en la biblioteca de WordPress puedes agregarla desde una página de terceros. Bastaría con solo pegar el link en donde se encuentra ubicada y se cargará automáticamente.

Este bloque nos permitirá alinear la imagen hacia la izquierda, derecha o centrarla. Y por supuesto, también podremos añadir un enlace.

Galería

El widget de galería nos permite añadir cuantas imágenes deseemos, y se mostrarán en el mismo bloque que has creado. A diferencia de la función anterior, no se dividen en diferentes cuadros, sino que se forma una especie de “collage”. Podremos escoger el número de columnas a mostrar.

Audio

Como su nombre indica, este Widget nos permitirá introducir un elemento de audio para su posterior reproducción en el front end. Al igual que el Widget de imagen, podremos colocar el reproductor a la izquierda, derecha o centro. Además tendremos la opción de reproducir automáticamente (al cargar la página) y de repetir de forma indefinida.

Fondo

Este Widget definirá el fondo de una sección, ya sea una imagen o un color.  Dentro de esta sección podremos usar otros bloques como párrafos, encabezados, listas, columnas, etc.

Al agregar fondos, se añaden nuevas opciones a la barra de herramientas:

• Altura completa: ajusta el tamaño donde se muestra la imagen.
• Posición del contenido: se emplea para cambiar la ubicación del texto que se añade sobre la imagen de fondo, lo cual puede ser realmente útil si se desea describir brevemente o añadir una firma al fondo.
• Aplicar filtro duotono: ayuda a definir los filtros o colores a destacar en la imagen.
• Reemplazar: es útil cuando el fondo que has elegido no cumple la función que esperabas.

Archivo

Esta función permite subir documentos PDF u otros archivos para que los usuarios que visitan tu página web puedan verlos y/o descargarlos. Bastará con presionar sobre el ícono para que se muestre la opción de subir archivo o buscar desde la biblioteca de medios.

Es útil, por ejemplo, si añades un menú de restaurante, una guía paso a paso o la descripción de un producto o catálogo.

Medios y texto

Medios y texto es un bloque que se divide en dos secciones. La primera, añade un vídeo o imagen. Mientras que en la segunda puedes escribir el texto relacionado.

Al insertar este bloque podremos distribuir el texto y la imagen de diferentes maneras.

Vídeo

La última de las opciones en la sección multimedia de los Widgets es la de inserción de videos. Como su nombre indica, podremos incluir vídeos en la página que estás creando sin que tengas que recurrir a la programación de algún medio de reproducción.

Al presionar la opción se muestran las fuentes desde dónde buscar el vídeo: ordenador, biblioteca de medios o insertando una URL, como puede ser Youtube.

Widgets de diseño

Por defecto, WordPress nos proporciona una serie de elementos básicos de diseño web para que podamos usarlos con un esfuerzo tal, como hacer un par de clics.

Botones

Los botones son uno de los elementos más básicos y usados en el diseño web. Su uso más común es el de enlazado a otra página o sección. Si disponemos de conocimientos avanzados podremos usarlos para un gran número de funcionalidades mediante JavaScript.

Columnas

Las columnas no son más que divisiones de una sección. En cada columna podremos añadir otros bloques o Widgets como imágenes, contenido multimedia, etc.

Aunque podremos personalizarlo mucho más una vez creado, contaremos con varias opciones predefinidas de diseño de columnas, donde el número se refiere al porcentaje total del bloque: 100, 50/50, 30/70, 70/30, 33/33/33, 25/50/25

Grupo

Este bloque nos permitirá agrupar otros bloques dentro de él. Es muy útil cuando tenemos conocimientos de CSS y queremos separar los estilos de cada bloque de Widgets mediante un id raíz.

Fila

Un Widget de fila nos permitirá apilar una serie de elementos de forma horizontal. Además podremos justificarlos a la izquierda, derecha, centro, repartir el espacio existente entre todos los elementos, y además, podremos permitir que se ajuste la fila a varias líneas cuando sea necesario.

Pila

La pila es exactamente lo mismo que la fila pero refiriéndose a una organización vertical.

Separador

Un separador es un elemento gráfico consistente en una simple línea a la que podremos añadir espaciados. Esto nos permitirá añadir un plus en estética y organización.

Espaciador

Muchas veces necesitaremos añadir un espacio concreto entre dos elementos. Si no tenemos conocimientos de CSS y/o HTML, este Widget nos permitirá añadir un bloque transparente con la altura que queramos definir.

Widgets generales

Esta es una de las secciones de Widgets más interesantes en WordPress. Aquí encontraremos una gran variedad de Widgets (o bloques) con funciones un tanto diversas. De hay que el título de esta sección sea un escueto “Widgets”.

Archivos

Este bloque nos permitirá añadir enlaces a todos los posts creados y organizarlos mediante años, meses, semanas y días. Además podremos mostrarlos como desplegable y/o con un contador de posts.

Calendario

Este Widget es muy similar al anterior. Es una representación gráfica del mes actual en donde podremos ver los días en los que se ha publicado un post. Estos contendrán un enlace a los posts.

Categorías

Como ya sabremos, en WordPress podemos organizar nuestros posts mediante categorización. Estas categorías suelen ser representadas en una página que agrupa cada uno de los posts asociados a ellas. Pues este Widget nos da la posibilidad de presentar los enlaces a todas las categorías de forma automática.

También tendremos la s siguientes opciones:

• Un desplegable vertical
• Mostrar contador de posts
• Mostrar sólo las categorías principales. Es decir, no mostrar las subcategorías
• Mostrar jerarquía de categorías

HTML personalizado

Como su nombre claramente indica, este bloque está creado para facilitar la inserción de código HTML en la página.

Últimos comentarios

En el caso de que tus posts tengan activados los comentarios mostrará los últimos comentarios publicados.

Últimas entradas

Este widget aparece de manera muy similar a una sección de noticias en tu sitio web. La diferencia es que desde allí se pueden visualizar todos tus contenidos en orden desde el artículo más reciente hasta el más antiguo. Es de gran utilidad para brindar una guía al usuario para encontrar contenidos recientes o escanear el blog rápidamente.

Entre sus opciones encontraremos:

• mostrar parte del contenido
• mostrar autor
• fecha de publicación
• imagen destacada
• Ordenar por fecha de publicación o por orden alfabético
• Limitar el número de posts a mostrar

Lista de páginas

Como su nombre bien indica, este bloque crea un listado de las páginas publicadas en tu web.

RSS

Es sorprendente que este Widget sea tan desconocido para lo útil que es. Se trata de un bloque para añadir una red feed. Podemos añadir blogs que nos interesen o sean de nuestra propiedad y de los que queremos mostrar actualizaciones.

Buscar

Con este Widget podremos insertar un campo de búsqueda interno. Es decir, permitiremos que los visitantes de nuestra web realicen búsquedas internas por todas nuestras páginas.

Shortcode

Un shortcode es una pequeña porción de código que “hace una llamada” a una porción mayor. Para que nos entendamos, es el nombre de una función que se ejecutará donde se llame. Muchos plugins usan este tipo de Widgets, así como los desarrolladores WordPress de un nivel medio/avanzado.

Iconos sociales

Con esta funcionalidad podremos insertar un gran número de iconos relativos a nuestras redes sociales, además del enlace a las mismas, claro.

Solo tendremos que insertar el bloque, darle al botón “+” y seleccionar el icono de nuestra red social. Tras esto también nos permitirá introducir la url de nuestro perfil.

Nube de etiquetas

Las etiquetas son palabras clave que relacionan artículos con la misma. Por ejemplo, si escribimos sobre animales, una etiqueta podría ser “mamíferos”. Al hacer clic en la etiqueta nos llevaría al listado de artículos que han añadido esa etiqueta.

En el widget nube de etiquetas aparecerán todas las etiquetas creadas con un tamaño del texto referente a la cantidad de artículos que la incluyen.

Widget heredado

El Widget heredado permite la edición, previsualización y añadido de plugins o Widgets externos que fueron añadidos usando el editor de Widgets clásico.

Meta

El widget “meta” se encarga de desplegar un meta menú que otorga acceso al blog. Como una especie de inicio de sesión para administradores o público general, entre otras funciones

Menú de navegación

Desde Apariencia/menús podemos crear los menús que veamos necesarios. Estos los podemos usar en diferentes partes de nuestra web como: el menú principal de la página, en un sidebar o en el footer (abajo de todo).

Pues bien, una vez tenemos uno o varios menús creados, podremos usar el widget menú de navegación para seleccionar uno.

Widgets de tema

Estos widgets pueden variar dependiendo del tema utilizado. En este caso tomaremos como referencia los incluidos en el tema “GeneratePress”.

Avatar

Añade el avatar de un usuario. También permite seleccionar el tamaño de la imagen y añadir un enlace a su perfil.

Leer más

Como se indica, invita al espectador a entrar en una página, post o sección a través de un enlace con ese texto como anchor.

Listado de comentarios

Este bloque permite insertar los comentarios de la entrada permitiendo mostrar una variedad de configuraciones visuales.

Acceder y salir

Si una web contiene membresía, necesitará una puerta de entrada para los usuarios. Y una vez estén logueados, necesitarán una puerta de salida. Este Widget permite añadir estos enlaces de una sencilla forma.

Widgets de incrustado

Estos Widgets permitirán, como su nombre indica, incrustar secciones o páginas en la página de destino. Entre todas las posibilidades que encontramos en los Widgets de WordPress, los más usados son:

• Incrustado:Podremos incrustar partes de una página de nuestra web en otra página. Y esto de una forma muy estética. Tan solo necesitaremos copiar/pegar el enlace de la sección.
• Youtube: A través de esta funcionalidad podremos incrustar videos de Youtube.
• Twitter: Podremos incrustar páginas de Twitter.
• Spotify: Al añadir el enlace hacia tu página de spotify, se pueden compartir listas de reproducción o canales de podcast.
• TikTok: Debido al éxito de esta plataforma, WordPress añadió esta extensión incrustada para que se pueda disfrutar de los contenidos allí publicados.

Widgets de plugins

Los plugins son aquellas extensiones que añaden funcionalidades extra a WordPress. Por poner algunos  ejemplos, podemos encontrar plugins que facilitan sistemas de seguridad, optimizadores SEO, mejoras de velocidad, etc.

Cuando se habla de Widgets de plugins hacemos referencia a la implementación de alguna funcionalidad de estos plugins por medio de un bloque o Widget. La mayor parte de estos Widgets aparecen en la sección Widgets de tema, aunque también podemos encontrarlos en otras secciones.

Estos son ejemplos de algunos de los plugins más utilizados.

Yoast SEO

Posiblemente sea el plugin de SEO más conocido en WordPress. Y sin duda es uno de los mejores y más usados de este CMS. Ayuda a optimizar el contenido de la página web que se está creando, siempre desde el punto de vista SEO.

Al instalarlo también tendremos acceso a algunos Widgets que trae consigo, estos son:

• Guía práctica: Un Widget muy útil si usamos nuestro blog para publicar guías o tutoriales “paso a paso”
• Yoast breadcrumbs: Las breadcrumbs o migas de pan ayudan al usuario a determinar en qué parte del sitio web se encuentran. Esto es un esquema de las páginas padre hasta la página de inicio
• Yoast FAQ: Una sección de preguntas y respuestas, Yoast FAQ añade un listado de preguntas frecuentes para colocar en alguna sección de tu web.

Leer: Tutorial de Yoast SEO

Contact Form 7

Es otro de los plugins más usados en WordPress. Esta extensión sirve para crear formularios de contacto así como de newsletter, entre otros. Con su widget veremos un desplegable desde el que podremos seleccionar uno de los formularios previamente configurados y guardados.

Leer: Tutorial Contact Form 7

Table of Contents Plus (TOC+)

Se trata de un plugin para crear una tabla de contenidos en cualquier página de WordPress. Al insertar su Widget aparecerá una tabla de contenido desde el front end.

En esta guía he intentado presentaros la mayor parte de Widgets existentes para WordPress, al menos de forma nativa. Esto es solo la punta del iceberg de la capacidad de personalización de este CMS.

Por lo que recomiendo sumergirse en este CMS y aprender a usarlo en profundidad, de este modo llegaremos a tener una capacidad ilimitada de creación de webs a medida.

♥ Para ello, puedes leer: Tutorial WordPress desde cero