Cómo poner una Imagen con Enlace en WordPress

Hoy te traigo un quehacer muy sencillito pero que a la vez puede resultar muy útil; Cómo poner una Imagen con Enlace en Worpress.

Mismamente, en este momento a mí me ha surgido cambiar los Iconos de Redes Sociales y mira, aunque ya mostré cómo hacerlo hace tiempo, ahora voy a aprovechar para explicarte cómo poner cualquier imagen en WordPress enlazada a un sitio. Al fin y al cabo los iconos que voy a poner son imágenes, ¿no? pues ya aprovecho y me marco el post jejejej

Es muy fácil, ya veras, vamos a la tarea…

Cómo poner una Imagen con Enlace en WordPress

Lo primero es tener claro la imagen que quieres poner. En mi caso, como te he dicho, son los iconos de redes sociales de la columna lateral. Por supuesto enlazados cada uno a su red.

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 poner una Imagen con Enlace

Una vez tengas decidida y localizada la imagen o imágenes, te vas al blog. Creas una entrada nueva como sueles hacerlo normalmente. Yo siempre le pongo título porque en ocasiones la dejo guardada como borrador por si necesito en un futuro esa imagen, o mejor dicho, ese enlace.

Y en esa entrada añades objeto para insertar la imagen en la misma entrada…tal y como lo haces siempre.

anadirobjetoBueno, esto ya es como siempre, 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 texto para editar la imagen en HTML.

iconotextoUna vez en Texto se obtiene la siguiente información de la imagen:

  • size-full significa que se inserta a tamaño completo, es decir, tal y como la has guardado,
  • wp-image 5313 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.

cosasentextoBien, la imagen 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 en ese espacio pixelado, es decir, justo antes del código que ya tienes y que identifica a la imagen (el de la imagen de arriba), el código que pongo a continuación que es el que lleva el enlace. El enlace en sí es lo que subrayo, es decir, la dirección a la que queremos enlazar.

<a href=’mailto:mamarreir@gmail.com‘ target=’_blank’>

(Inciso: Siempre que quieras enlazar tu correo electrónico debes poner mailto:vuestradireccióndecorreo, pero si por ejemplo es otro enlace normal, solo el enlace, por ejemplo http://www.blog.com/y enlazaría al blog que quieras, lo aclaro por si te lias con lo de mailto ;))

codigoenlacePues una vez que tienes todo ese código: <a href=’mailto:mamarreir@gmail.com‘ target=’_blank’><img alt=”Mail” src=”http://www.mamarrie.com/wp-content/uploads/2015/10/Email.png” width=”48″ height=”48″ title=’mail’ /></a> en la pestaña texto, 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.

(Inciso: 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 AparienciaWidgetTexto

apariencia-widget

…colocas la ventanita texto en el lugar que quieras porner el widget en cuestión (en mí caso en la parte superior de la barra lateral derecha), pegas el código (en la imagen hay un código tan largo porque yo he puesto todos los iconos de redes sociales) y le damos a Guardar.

También podeis poner el código en medio de un post, o al final…dónde queráis!!

(Inciso: cuando quieras poner varias imágenes seguidas tal y como aparecen los iconos de redes sociales que yo he puesto, solo tienes que poner los códigos seguidos uno tras otro en el mismo widget)

texto-guardar

De esta forma tan fácil puedes lucir unas bonitas imágenes enlazadas en tu blog.

Pues hasta aquí hemos llegado hoy. 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.

Seguro que también te interesa

——————–

Si estás pensando en dar el salto, en liberarte, en tener el control absoluto de tu propio blog…si estás pensando en migrar a WordPress.org, no te arriesgues, hazlo con el mejor hosting del mundo, solo con saber que tienen atención 24h/7días a mí ya me ganaron. Hablo del Hosting de Webempresa, con él obtienes todo lo que necesitas. Ahora si contratas cualquier producto Webempresa a través de cualquiera de mis banner te beneficias de un 20% descuento con el cupón GRACIAS20

alojamiento wordpress

 

 

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

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