Jessica Gestoso

Consultoría tecnológica para emprendedoras digitales que quieren cambiar el mundo

  • Blog
  • Quien soy
  • Trabaja Conmigo
  • Curso Gratuito
  • Contacto

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

Publicado el 11/03/2016 por Jessica Gestoso 18 comentarios
Última actualización el 17/02/2019

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
    • Jetpack
    • Image Widget
    • Widget texto

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)

parámetros widget imagen de 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 ;)

parametros widget textoComo 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 ;)

 

  • facebook
  • Twitter
  • LinkedIn

Archivado en: Ayuda para tu blog Etiquetado como: imagen, video, WordPress

Comentarios

  1. Amelia dice

    29/09/2016 al 23:46

    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,

    Responder
    • Jessica Gestoso dice

      30/09/2016 al 07:01

      Para eso creo que tienes que activar otro de los complementos de JetPack, «visibilidad de widgets» o algo así.

      Responder
      • Amelia dice

        30/09/2016 al 12:06

        Lo tengo activado !

        Responder
        • Jessica Gestoso dice

          01/10/2016 al 10:12

          Pues no sé muy bien que decirte… Igual tienes otro plugin interfiriendo, o el tema no soporta esa opción. Tendría que mirarlo…

          Responder
  2. Mauro dice

    06/10/2016 al 03:07

    Hola, porque tengo que conectar mi sitio con wordpress.com? que tiene que ver? yo estoy en wordpress.org

    Responder
    • Jessica Gestoso dice

      06/10/2016 al 11:25

      Pues cosas de la gente de WordPress… Te lo suelen pedir para usar JetPack y así centralizar la configuración del plugin…

      Responder
  3. Mercedes dice

    17/03/2017 al 18:15

    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.

    Responder
  4. Lola dice

    13/06/2017 al 11:34

    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!!!

    Responder
    • Jessica Gestoso dice

      13/06/2017 al 12:15

      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…

      Responder
  5. Carla dice

    27/06/2017 al 23:25

    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!

    Responder
    • Jessica Gestoso dice

      28/06/2017 al 07:37

      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

      Responder
  6. Kristian Quintero dice

    18/07/2017 al 16:17

    Hola, tenia dias intentando hacerlo y no sabia como, me sirvió tu recomendación de hacerlo codificando el texto! Gracias!!

    Responder
    • Jessica Gestoso dice

      18/07/2017 al 17:29

      A mi el widget de texto me parece de los más útiles ;)

      Responder
  7. Ana dice

    04/08/2017 al 22:41

    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?

    Responder
    • Jessica Gestoso dice

      05/08/2017 al 12:04

      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.

      Responder
  8. Uxue dice

    18/02/2018 al 00:04

    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

    Responder
    • Jessica Gestoso dice

      19/02/2018 al 07:26

      ¡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 ;)

      Responder
  9. Aracelis dice

    22/08/2018 al 18:36

    Muy útil, pude resolver agregar un enlace a un brochure, gracias

    Responder

Deja un comentario Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Los datos que proporciones al enviar tu comentario sólo serán utilizados para responder a tu comentario.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Algo más a lo que echarle un ojo:

  • Cómo vender un ebook con Payhip
  • La importancia de adaptarse al perfil del cliente con Mónica Campos
  • Cómo pasar de audio a texto de forma automática
  • Cómo tener una Academia Online sin complicaciones técnicas con Yolanda Cambra

Formación para emprendedoras

  • Consultoría tecnológica (en directo o por email)
  • Comunidad para emprendedoras digitales
  • Mentoring 1 a 1
  • Talleres prácticos
  • Curso Gratuito

Desarrollo WordPress

  • Formularios de suscripción
  • Desarrollo Web
  • Mantenimiento WordPress
  • Soporte a medida

Copyright Jessica Gestoso © 2019 · Todos los derechos reservados · Registrado en Safe Creative · Aviso legal, política de privacidad y cookies
Suelo dejarme caer por: Facebook · Instagram · LinkedIn

En cumplimiento con la Ley 34/2002, de servicios de la sociedad de información, te recuerdo que al navegar por este sitio estás aceptando el uso de cookies.Aceptar Leer aviso legal, política de privacidad y cookies
Aviso legal, política de privacidad y cookies

Necesarias Siempre activado