He pensado, a ver qué te parece, que voy a comenzar a hacer posts más cortos con quehaceres muy sencillitos y a la vez muy útiles. Verás, a veces me sorprenden con preguntas sobre cosas que doy por hecho que quien me lee ya sabe. Pero, aunque son conceptos muy básicos, entiendo que quien está empezando a crear un blog, no tiene porqué saber. Yo misma, recuerdo en los primeros días recién llegada de Blogger, que estaba escribiendo un post y no tenía ni idea de Cómo poner una Imagen con Enlace en WordPress.
Así que he pensado que igual a ti te ha surgido en algún momento la misma duda o quizá otra similar de las muchas que intentaré ir solucionando.
Y ya que estoy, ¿qué mejor que empezar por esa cuestión que con tanto cariño recuerdo de mis inicios?
Cómo poner una Imagen con Enlace en WordPress
Sí, cualquier imagen; fotos, banners, iconos sociales…
Es cierto que WordPress nos facilita mucho el asunto si lo que queremos es poner una foto enlazada a otra web dentro de un post.
Hay varias formas de hacerlo:
Poner una foto enlazada dentro del texto de una entrada
Si te pones con el ratón sobre la imagen que hayas subido al post, verás que te aparece ese pequeño menú en el que te da posibilidad de alinear la imagen, borrarla y si pinchas sobre el lápiz, podrás editarla.
Dentro de los Detalles de la imagen, entre otras cosas muy importantes, sobre todo el Texto Alternativo, podrás enlazar la imagen a la URL que desees. Despliega el Menú Enlazado a… y elige URL personalizada. En el cuadrito no tienes más que poner el enlace en cuestión.
Si lo que quieres el insertar una imagen que ya tienes en tu biblioteca de medios, desde ahí mismo, también puedes enlazarla a una URL personalizada.
Poner una imagen enlazada mediante Widget
Te vas a Apariencia-Widgets y entre todos los Widgets disponibles arrastra el de Imagen a la localización donde quieras que aparezca, por ejemplo la barra lateral derecha.
Una vez tienes ahí el Widget, despliega la flechita y sube la imagen que desees. Puedes ponerle un título y como ves, abajo del todo, enlazarla. Guardar.
Hay otras ocasiones en las que WordPress no lo deja tan claro. Por ejemplo, hay algo muy común que todos queremos hacer en cuanto abrimos nuestro blog; poner los iconos de redes sociales. Al fin y al cabo son imágenes y la cuestión es que no es solo una, sino varias imágenes.
Esto también sirve para colocar un banner de afiliado o en general cualquier imagen con enlace en HTML.
Es muy fácil, ya veras, vamos a la tarea…
Cómo enlazar cualquier imagen através de HTML en WordPress
Lo primero es tener claro la imagen que quieres poner.
Imaginemos que quiero poner los iconos de redes sociales de la columna lateral. Por supuesto enlazados cada uno a su red social correspondiente.
Ves, ahí están localizados en la carpeta Iconos Sociales en mi PC, optimizados como imágenes con Photoshop y listos para ser colocados jejejej
Hay muchas formas de hacerlo, pero la más fácil es esta.
Una vez tengas decidida y localizada la imagen o imágenes, te vas al blog y creas una entrada nueva como sueles hacerlo normalmente. La puedes dejar guardada como borrador por si necesitas en un futuro esa imagen, o mejor dicho, ese enlace HTML.
Y en esa entrada añades objeto para insertar la imagen en la misma entrada…tal y como lo haces siempre. Porque…supongo que sabrás insertar una imagen, ¿no!? Si no es así me das una voz y allá que voy.
Una vez insertada la imagen, en mi caso son varias, aunque os pongo el ejemplo con una, vas a la pestaña HTML. Obtendrás, de esta forma, la siguiente información de la imagen:
<img class=”aligncenter size-full wp-image-8218″ src=”https://www.creaygestionatublog.com/wp-content/uploads/2018/12/email.png” alt=”” width=”64″ height=”64″ />
- size-full significa que se inserta a tamaño completo, es decir, tal y como la has guardado,
- wp-image 8218 simplemente es el número de imagen que esta ocupa en la galería de imágenes WordPress,
- alignleft indica que está alineada a la izquierda, cambiando el left por right o center, se pondría a la derecha o centrada,
- http//www… es la URL de la imagen, esta información es muy útil, de esta forma siempre podréis obtener la URL de una imagen,
- alt=email es simplemente el nombre de la imagen,
- width y el height anchura y altura respectivamente, en este caso 48, pero si quedara demasiado grande o pequeña, modificando ese valor se puede adaptar el tamaño desde aquí, sin necesidad de volver a editar la imagen.
Bien, la imagen en HTML ya la tienes, ahora queda enlazarla a la página que queramos, en mi caso de ejemplo a mi dirección de correo electrónico.
Para ello solo hay que poner justo antes del código que ya tienes y que identifica a la imagen (el azul de arriba), el código que pongo a continuación que es el que lleva el link HTML. El enlace en sí es lo que subrayo, es decir, la dirección a la que queremos enlazar.
<a href=’mailto:creaygestionatublog@gmail.com’ target=’_blank’>
Tips para Blogs: Siempre que quieras enlazar tu correo electrónico debes poner mailto:tudireccióndecorreo. Pero si por ejemplo es otro enlace normal, solo tienes que ponerla URL, por ejemplo http://www.blog.com/y enlazaría al blog que quieras, lo aclaro por si te lías con lo de mailto 😉
Pues una vez que tienes todo ese código…
<a href=’mailto:creaygestionatublog@gmail.com’ target=’_blank’><img class=”aligncenter size-full wp-image-8218″ src=”https://www.creaygestionatublog.com/wp-content/uploads/2018/12/email.png” alt=”” width=”64″ height=”64″ />
…puedes copiarlo y pegarlo donde quieras.
Por ejemplo en mí caso, quiero poner los iconos sociales en la columna lateral, así que lo haré a través de un Widget de texto o HTML personalizado .
OJO: Mucho cuidado con las comillas, asegúrate que en el enlace van comillas simples y en la URL de la imagen comillas dobles.
Ya sabes, como has hecho más arriba, arrastras el Widget al lugar que quieras porner la imagen en cuestión (en mí caso en la parte superior de la barra lateral derecha), pegas el código y le das a Guardar.
También puedes poner el código en medio de un post, o al final…dónde quieras!!
Tips para Blogs: Cuando quieras poner varias imágenes seguidas tal y como aparecen los iconos de redes sociales (en horizontal), solo tienes que poner los códigos seguidos uno tras otro en el mismo Widget.
De esta forma tan fácil puedes lucir unas bonitas imágenes enlazadas en tu blog.
Seguro que también te interesa
- Cómo posicionar las Imágenes en Google para atraer visitas al Blog
- Personaliza el Formato del Título de los Widget WordPress
- Sígueme en Instagram para ver más Tips
Pues hasta aquí hemos llegado hoy. Sencillo pero muy práctico. Como siempre espero que te haya sido de utilidad, cualquier aportación , aclaración, duda o sugerencia, puedes dejarme un comentario, contármelo en el formulario de contacto o a través del correo electrónico. Y si quieres compartir…¡sería la leche!!!
Hola , disculpa te moleste, hay alguna forma de agregar un enlace a una imagen q este en el slider común de WordPress(sin plugins lamentablemente no tengo el plan premium ), no puedo ubicarme en el código HTML porq sin querer hago fallar la página, soy muy nuevo en esto. Si hay alguna forma cuál es? Muchas gracias
hola, como hago para que en una imagen aleatoria que pongo en mi web al tocarla lo lleve a otra pagina mismo de ese sito, por ejemplo que lo lleve a contacto o mi blog,etc.
Hola Bruno, solo tienes que enlazar dicha imagen. Mantén activo el bloque imagen y pincha arriba sobre el simbolito de enlace. En la caja que se te abre introduce la URL a la que quieras enlazar dicha imagen.
Espero haberte sido útil. Siento no haber contestado antes.
Hola!
No sé si es porque han actualizado WordPress a la versión 5.4 o que pero todas las opciones que pones aquí a mi no me aparecen. Antes linkeaba las imágenes de forma sencilla, ahora clickas en la imagen en cuestión y no aparece por ningún lado la opción de añadir un link, necesito ayuda!!
Hola Lorea, efectivamente todo ha cambiado con los bloques, estoy actualizado el post. Pero ahora es más fácil, seleccionas el bloque imagen y arriba pulsas sobre el símbolo de enlace, introduces la url y listo.
Espero haberte ayudado.
Buenas tardes. Muchas gracias por compartir.
Tengo una duda: ¿los enlaces que agregamos a las imágenes son no-folow? ¿se puede hacer sin editar código (en wp)?
gracias
Tienes que editar la imagen en cuestión para poner el enlace nofollow.
Buenos días, He conseguido vincular un pdf a una imagen. OK
Ahora necesito saber CÓMO vincularlo sobre la IMAGEN DESTACADA.
Por otra parte, cómo insertar el título.
Muchas gracias
Para insertar el título tienes que hacerlo editando desde la biblioteca de medios.
En cuanto a la imagen destacada, WP no da la opción ni de cambiar el título, aunque puedes elegir como destacada una imagen a la que ya hayas cambiado el título como te he dicho antes, y tampoco da la opción de vincularla a no ser que lo hagas con código.
Espero haber resuelto tu duda.
Hola, alguno conocerá un plugin o como hacer para que una imagen enlace a otra dentro de la misma página?, me explico, quiero colocar una imagen matriz que y que al hacer click en determinado cuadrante te lleve a esa imagen pero más grande, como en zoom.
Si alguien puede ayudarme se lo agradeceré eternamente.
Saludos.
Hay una forma con CSS para que al pasar el ratón por encima la imagen se amplíe al tamaño que tu . ¿Es esto lo que quieres? En cuanto a plugin, prueba con Easy fancy box. Yo no lo he probado pero parece ir bien.
Espero haberte ayudado, ya me dirás.
¡Bravo!
Me estaba volviendo loca para intentar aprender enlazar imágenes para mis entradas. Después de mucho buscar, he dado con este post y por fin ha funcionado.Mis felicitaciones :D.
Oleeeeeee pues me alegro de haberte ayudado y mucho más de que vengas a decírmelo. Cualquier otra cosa ya sabes cómo encontrarme :). Gracias.
Buenos dias, yo quiero realizar algo parecido, sin embargo, quiero hacerlo con una imagen ya establecida, por ejemplo agregar un link, a la imagen que tengo desde mi servidor, pero no se donde agregarlo, por ejemplo el logo azul de lado izquierdo.
Agregar el link antes de subirla a la página? en el servidor? No sabría decirte. Pero creo que es mejor que las imágenes las optimices ya en la página porque es beneficioso para el posicionamiento.
Hola!! Bueno días
Tengo una duda, que tiene que ver un poco con este tema. En mi blog, quiero crear una página, estilo galería dónde pueda colgar las imágenes de libros (la portada). La idea es que al pinchar en la imagen del libro, te redireccione a otra página de mi mismo blog, en la que pueda poner una recomendación o comentario de ese libro.
Hasta aquí todo bien, he probado el método que explicas y me funciona… Pero ya no me funciona, si la página principal, esa en la que están todas las portadas, está estructurada como una galería de imágenes. No sé si me explico.
¿Hay algún modo de mantener la galería, y conseguir que cada imagen me redireccione a su propia página, o tengo que subir las imágenes independientemente (sin que estén agrupadas en la galería)?
Muchas gracias
Hola Víctor, ¿has probado hacer esa página con algún editor tipo Elementor? O quizá también tengas la opción de hacer esa galería mediante tu tema, es decir, algunos temas ofrecen esta posibilidad.
Perdona no haberte contestado antes, pero he intentado desconectar un poco estas fiestas 😉
Gracias a ti por pasar por aquí, cualquier otra cosa no dudes en decirme.
Igual con algún plugin seguro que podrías hacerlo. Sin él, tendrías que hacerlo una a una.
Espero haberte ayudado.
Me encanta como lo has explicado!! Yo quiero migrar mi blog a wordpress porque hace tiempo que blogger me da muchos problemas … De hecho las imágenes aparecen donde quieren una vez publicado el post!! Así que a ver si saco tiempo lo migró y sigo tus tutoriales 🙂
Un abrazo!
Holaaaaaaa cómo va todo!! cuánto tiempo!!!
Me alegra que te haya gustado. A mí empezó a pasarme igual cuando estaba en blogger, llegó un momento en que blogger es puso en mi contra y hasta el diseño me cambiaba, hasta que me harté y me pasé a wp…estoy contentísima con el cambio. Si te decides y te pasas a wp.org ya saber que te hago un 20% de descuento si contratas webempresa desde mi banner 😉
Besosssssssss
Te han quedado monisimos jajajajaj. Por una vez esto ya lo tenía hecho pero me parecen súper interesantes tus tecnomamabloger.
Buen finde
Jajajajaj sí verdad!!?? Bueno pues por si lo necesitas para enlazar otra imagen…
Buen finde igual!!
Ahhhh lo que sabes!
Pues esta bien saberlo, muchas gracias!
No es para tanto jejejej. Pues sí, yo creo que es muy útil!!