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.
¿De qué va esto?
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 ;)
Hola,
He probado por activa y por pasiva y casi me rindo, pero he visto tus aportes y vuelvo a tener esperanza.
Estoy haciendo pruebas en wordpress y he instalado JetPack y los widget no aparecen con la posibilidad de condicionar «Visibilidad».
Me puedes ayudar ?
Gracias,
Para eso creo que tienes que activar otro de los complementos de JetPack, «visibilidad de widgets» o algo así.
Lo tengo activado !
Pues no sé muy bien que decirte… Igual tienes otro plugin interfiriendo, o el tema no soporta esa opción. Tendría que mirarlo…
Hola, porque tengo que conectar mi sitio con wordpress.com? que tiene que ver? yo estoy en wordpress.org
Pues cosas de la gente de WordPress… Te lo suelen pedir para usar JetPack y así centralizar la configuración del plugin…
Hola, Jessica.
Muchas gracias, en el ordenador no consigo verlo pero en el móvil si, algo es algo ;).
Estoy haciendo un curso para diseñar un blog en wordpress.org, estoy disfrutando pero esto es un líiiiiio!!!!
No se si apuntarme a tu comunidad yo ya soy de la comunidad de abuelas emprendedoras. Ya está apuntada.
Buena tarde.
Hola Jessica!
Mi problema es un tanto diferente.. pero llevo días con ello y no lo consigo..
A mi me gustaría tener varias imágenes en una Entrada que he creado en mi web, y que pinchando en cada una te llevase a un enlace diferente dentro de la misma página. Creí que sería muy sencillo, pero no logro que aun añadiéndolas a mi página de manera individual, tengan los enlaces diferentes que voy añadiendo. Además, cuando los añado, muchas veces la imagen desaparece!
Te agradecería muchísimo tu ayuda.. :/
Muchas gracias!!!
Pues sin verlo no sé muy bien que decirte… En principio, para añadir una imagen con link en el contenido, sólo tienes que añadir la imagen e indicar el los ajustes la url a la que quieres que vaya…
Hola, Jessica!
Estoy haciendo un curso de wordpress y me estoy volviendo loca, son muchas cosas nuevas para aprender. Estos artículos son muy claros y me sirven mucho!!
Te felicito por tu blog y te seguiré leyendo!
Sí, WordPress tiene muchas cosas, pero ya verás como enseguida le pillas el punto.
Me alegro mucho de que este post te haya ayudado
Hola, tenia dias intentando hacerlo y no sabia como, me sirvió tu recomendación de hacerlo codificando el texto! Gracias!!
A mi el widget de texto me parece de los más útiles ;)
Hola, muchas gracias!
Pero tengo una pregunta, se puede ver luego si alguien hace click en esas imagenes, por ejemplo si son de alguna empresa patrocinadora?
Si quieres hacerlo puedes utilizar un acortador de enlaces, tipo bit.ly, o un plugin del estilo a Simple URLs. Que te permiten contar los clics que ha recibido el enlace.
Hola Jessica, acabo de descubrir tu página y es muy útil, ya tienes una seguidora más, muchas gracias por tanta información.
Tengo una pregunta sobre esta entrada: quiero utilizar el widget texto, con una imagen que tengo en el ordenador, ¿cuál es su ruta?
A mí me cuesta ver los vídeos (y escuchar los mensajes de voz de whatsapp ni te cuento…) y ahora mismo tengo a la pequeña dormida encima así que lo siento, confieso que no lo he visto. Voy a seguir tu consejo y me compraré unos cascos.
Muchas gracias,
Uxue
¡Hola! Para poder usar una imagen de tu ordenador, primero tienes que subirla a la «biblioteca de medios»
Por cierto, tengo el post pendiente de actualización. Ahora hay un widget «Imagen» que puedes usar en vez del de «Texto» y te facilitará un poco las cosas ;)
Muy útil, pude resolver agregar un enlace a un brochure, gracias