Cómo poner una Imagen con Enlace en WordPress

Cómo poner una Imagen con Enlace en WordPress

Hoy en Tecnomamáblogger os 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 os enseñé a hacerlo hace tiempo, ahora voy a aprovechar para explicaros 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 veréis, vamos a la tarea…

Cómo poner una Imagen con Enlace en WordPress

Lo primero es tener claro la imagen que queremos poner, en mi caso, como os he dicho, son los iconos de redes sociales de la columna lateral. Por supuesto enlazados cada uno a sus diferentes redes.

Veis, ahí están localizados en la carpeta Iconos Sociales, optimizados como imágenes con photoshop y listos para ser colocados jejejej

Cómo poner una Imagen con Enlace

A continuación nos vamos a nuestro blog. Creamos una entrada nueva como lo solemos hacer. Yo siempre le pongo título porque en ocasiones la dejo guardada como borrador por si necesito en un futuro esa imagen. Y en esa entrada le damos a añadir objeto para disponernos a insertar las imágenes en la misma entrada…tal y como lo hacemos siempre.

anadirobjetoBueno, esto ya es como siempre, supongo que sabréis insertar una imagen, no!? si no es así me dais una voz y allá que voy.

Una vez insertada la imagen, en mi caso son varias, aunque os pongo el ejemplo con una, nos vamos a la pestaña texto para editarla en HTML.

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

  • size-full significa que la insertamos a tamaño completo, es decir, tal y como la hemos guardado nosotros,
  • wp-image 5313 simplemente es el número de imagen que esta ocupa en mi 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 mi 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 viera que queda demasiado grande o pequeña, modificando ese valor podría adaptar el tamaño desde aquí, sin necesidad de volver a editar la imagen.

cosasentextoBien, la imagen ya la tenemos, ahora queda enlazarla a la página que queramos, en mi caso a mi dirección de correo electrónico.

Para ello solo tenemos que poner en ese espacio pixelado, es decir, justo antes del código que ya tenemos 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 queráis enlazar vuestro correo electrónico debéis 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 queráis, lo aclaro por si os liáis con lo de mailto ;))

codigoenlacePues una vez que tenemos 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, podemos copiarlo y pegarlo donde queramos.

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, aseguraos que en el enlace van comillas simples y en la URL de la imagen comillas dobles)

Ya sabéis AparienciaWidgetTexto

apariencia-widget

…colocamos la ventanita texto en el lugar que queramos porner el widget en cuestión, en mí caso en la parte superior de la barra lateral derecha, pegamos 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 queramos poner varias imágenes seguidas tal y como aparecen los iconos de redes sociales que yo he puesto, solo tenéis que poner los códigos seguidos uno tras otro en el mismo widget)

texto-guardar

Ahora si miráis a la izquierda podéis ver lo bonitos que me han quedado jajajajajaj y todos enlazaditos a su lugar correspondiente…listos para hacer uso de ellos 😉

Pues hasta aquí el #Tecnomamablogger de hoy. Como siempre espero que os haya sido de utilidad, cualquier aportación , aclaración, duda o sugerencia, podéis dejarme un comentario, contarmelo en el formulario de contacto o a traves de tecnomamablogger@gmail.com

——————–

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

Para América:

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