Como añadir una imagen con link en un widget de wordpress

NOTA: En la actualización a WordPress 4.8 han aparecido nuevos widgets que nos facilitan las inserción de imágenes, vídeos y audio.

En cuanto tenga un rato para probarlo todo actualizaré el contenido de esta entrada para hablar de las novedades con más detalle.

¡Hola! ¿Qué tal? ¿Cómo va todo?

Este post surge a partir de una consulta en el grupo de Facebook en la que me  preguntaban cómo poner una imagen con enlace en la barra lateral de un blog.

Resolví la duda como pude. Pero ya sabes que a veces es complicado explicarse a través de mensajes de texto. Así que prometí escribir un post más detallado para que se entendieran.

He tardado algo más de una semana en tenerlo todo listo, pero espero que la espera merezca la pena.

3 formas muy sencillas de añadir una imagen con link a un widget en WordPress

En el grupo de FB me preguntaron, en concreto, por una imagen de la barra lateral.

Pero al trabajar con widgets no importa la ubicación. Da igual si la pones en la cabecera, en la barra lateral, en el pie de página o donde sea que tu tema tiene habilitadas las zonas de widgets.

He preparado un video explicando los pasos que tienes que dar. En donde te hablo de la posibilidad de usar un par de plugins o uno de los widgets que viene por defecto en WP.

Échale un ojo y a la vuelta te hago un resumen ;)

Si, ya sé que casi 12 minutos de video se hace un poco largo.

Sobre todo si, como yo, eres de las que aprovecha los ratos de siesta del peque para leer blogs y te da miedo despertarlo al poner un video.

No se si te ayudará, pero yo he acabado yendo por casa con los auriculares en el bolsillo.

Aún así, como no sé si ahora es buen momento para videos te voy a resumir un poco las opciones que tienes.

Jetpack

Con este plugin mantengo una relación de amor-odio. Aunque por lo que leo por ahí no debo ser la única.

Es uno de los primeros plugins que instalo a la mayoría de mis clientas porque hace prácticamente de todo y simplifica mucho el trabajo cuando no tienes mucha experiencia en WordPress.

Pero también les advierto que es un plugin muy pesado y que a medida que se sientan más cómodas en la plataforma deberían intentar optimizar los recursos. Bien sea desactivando las opciones que no utilicen o sustituyéndolas por otros plugins más ligeros.

Así que si todavía estas en ese punto o, sencillamente, no quieres complicarte, puedes usar el widget Imagen (jetpack)

Como puedes ver si haces click en la imagen, la configuración es muy sencilla.

La mayoría de los parámetros son opcionales y te aconsejo que hagas pruebas hasta dar con el resultado que más te convenga.

Eso sí, para que funcione, no olvides introducir los campos clave: la url de la imagen y de la página de destino ;)

Lo más normas es que utilices la biblioteca de medios de wordpress para subir tu imagen, así que es allí donde tendrás que buscar el valor para poner en el campo URL de la imagen.

Y para no olvidarte del SEO, rellena los campos Texto alternativo (que es lo que se vería en caso de que la imagen no cargase) y Título de la imagen (que se muestra cuando pasas el ratón por encima)

Y si quieres enlazar la imagen con otra página, pon su correspondiente ruta en el campo URL de enlace.

Guarda los datos, prueba el resultado y me cuentas en la sección de comentarios qué tal te fue ;)

Image Widget

Cuando estuve buscando plugins para recomendarte, me encontré con otro, muy similar a este.

Pero como puedes ver en el video, en el momento de ir a instalarlo, vi que aún no había sido probado en mi versión de wordpress y que llevaba varios meses sin actualizarse.

Así que en el último segundo cambie de idea e instale Image Widget. Y, la verdad, es que me ha gustado mucho.

Por una parte, es un plugin mucho más ligero que jetpack y, por otra, trae una mejora que me parece obvia y no entiendo como falta en el otro.

No hace falta que rebusques en la biblioteca de medios por la url de la imagen ya que cuenta con un botón que te permite seleccionar, o subir, a imagen que quieres utilizar.

Por lo demás los parámetros son similares, aunque si necesitas ayuda con algo, aquí me tienes.

Widget texto

El widget de texto que viene de serie en WP te permite añadir un bloque de código, con lo que te da un gran abanico de posibilidades.

Eso sí, para poder aprovechar todo su potenciar necesitas algunos conocimientos básicos de programación.

¡Espera! No salgas corriendo despavorida.

Dame dos minutos más y ya veras que para añadir una imagen y un enlace no tendrás que hacer malabares.

Es muy sencillo y encima te ahorras tener que instalar otro plugin ;)

Como puedes ver en la imagen, no hay mucho que configurar.

Por un lado tienes el Título, que es un campo común a todos los widgets, y por otro tienes el Contenido, que es donde tienes que poner tu trocito de código.

Si te fijas, yo ya te he puesto un ejemplo en donde lo único que tienes que hacer es cambiar los valores que he puesto de ejemplo.

Te explico:

Lo que va después de la etiqueta <a es el enlace, que finaliza con la etiqueta </a>

La ruta de la página que quieres abrir se coloca en donde poner href=»url-de-tu-página»

Y lo siguiente es la imagen, que va a partir de la etiqueta <img

La ruta de la imagen la tienes que poner dentro del valor src=»url-de-tu-imagen»

Y no olvides añadir los valores para el texto alternativo (alt) y el titulo (title)

¿Fácil no?

Pues con esto ya tienes 3 formas distintas de añadir una imagen con un enlace en la barra lateral de tu blog.

Puedes utilizarlo para promocionar algún servicio que quieras destacar, avisar de algún evento, poner el banner de algún patrocinador… Lo que se te ocurra.

Y ahora, please, pásate por la sección de comentarios y cuéntame si a ti también te da pereza ver los videos de los post, he explicado bien la parte del código… 

Y si te ha gustado, comparte. Que seguro que entre las dos ayudamos a alguien más ;)