Cómo poner una Imagen con Enlace en WordPress

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.

Cómo poner fotos enlaces en HTML

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.

HTML personalizado WordPress

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.

Cómo subir una imagen a HTML

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.

Cómo poner un enlace en HTML

 

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

Cómo subir imagen url

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

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

*Post actualizado

Contenido Relacionado de tu interés

8 comentarios en “Cómo poner una Imagen con Enlace en WordPress”

  1. 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.

  2. 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

Deja un comentario

Responsable » Carolina Vargas Alarcón.
Finalidad » Gestionar los comentarios.
Legitimación » Tu consentimiento.
Destinatarios » Los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de CreayGestionatuBlog) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » Podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.