Oferta SiteGround Black Friday

Convertir una imagen de fondo en un enlace

A pesar de las barras de navegación de los blogs, desde las que acceder tanto a las páginas estáticas como a la portada del mismo, sería un error disponer de una cabecera gráfica y que no tuviera un enlace activo al índice de nuestro sitio. Será cultura, será costumbre pero es casi automático que el visitante intente hacer clic en la cabecera que nos identifica.

Pero no todas las plantillas WordPress disponen de la imagen con enlace así que vamos a ver como conseguir que la imagen de fondo sea también un enlace a la portada de nuestro blog. Para ello hay que modificar dos archivos: la hoja de estilos (style.css) y la cabecea (header.php), pero es muy sencillo.

La mayoría de los themes disponen de funciones que muestran el  título y descripción del blog pero si tenemos nuestra propia imagen personalizada, que ya tenga el nombre del blog, nos sobra. Lo malo es que si quitamos esa función entonces nuestra imagen queda sin enlace.

Para ello vamos a fijarnos en el theme por defecto de WordPress; Kubrick, donde nos encontramos en header.php lo siguiente:

<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>

Si te fijas hay una llamada a la clase header (div id=header), que si nos fijamos en la hoja de estilos veremos que es la que muestra la imágen de fondo, y sobre ella luego el fichero de la cabecera (header.php) añade el título (bloginfo('name')) y descripción (php bloginfo('description')), ambos enlazados a la portada (get_option('home')). La clase header del theme Kubrick, disponible en la hoja de estilos, es esta:

#header {
	background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
	}

Lo que vamos a hacer, en primer lugar, es sustituir la ruta de la imagen por defecto a la de nuestra cabecera personalizada. Para ello cambiaremos la clase en style.css:

#header {
	background: #73a0c5 url('https://miblog.com/images/logo-cabecera.jpg') no-repeat bottom center;
	}

A continuación «comentamos» la función original en header.php para que no aparezca el título y descripción, lo que ya tenemos con nuestra imagen personalizada. Lo hacemos así:

<!--<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>-->

Y para terminar modificamos ligeramente el fichero header.php para que la clase header enlace a la portada de nuestro blog:

<a title="Ir a la portada de mi Blog" alt="Ir a la portada de mi Blog" href="http://miblog.com"><div id="header"></div></a>

Ya lo tienes, ahora tu blog mostrará tu imagen personalizada y haciendo clic en cualquier parte de la misma se accede a la portada.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4 / 5. Total de votos: 4

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

9 comentarios en “Convertir una imagen de fondo en un enlace”

  1. Amigoo… buen tutorial, pero no me funciona 🙁 por favor ayúdame.. ahi te puse mi mail, gracias.. bloggeros.org

  2. Yo lo puse, pero lo desactivé ya que con ese código mi blog dejó de ser validado por w3.org, y veo que este blog devuelve el mismo error que el mío tenía.

    ¿Alguna forma de hacerlo y que sea válida?

    Saludos!

  3. Yo lo intenté pero me salen dos cabeceras, la nueva con el enlace desplazada hacia la izquierda, y la orginal un poco mas abajo… Algo me falta saber porque he seguido estos pasos varias veces y obtengo el mismo resultado…

    A lo mejor no pongo el codigo en el sitio correcto… no se

  4. @Julio Fernández

    Efectivamente deja de ser válida por dos motivos principalmente:

    – Uno alt="Ir a la portada de mi Blog" no es un atributo válido para enlaces, pero si lo es para imágenes, sería un texto alternativo por si no carga la imagen.

    – Dos <a><div></div></a> no es válido, el div no puede estar dentro del enlace, aunque funcione no tiene porque.

    Posibles soluciones: Yo directamente pondría la imagen con el enlace y el texto alternativo en la cabecera, así me ahorro el CSS. La segunda opción es poner el logo de fondo y una imagen trasparente que ocupe todo (con el enlace). Esto lo hacen algunos para proteger su logo 🙂

    zzaludos

  5. Ruben

    Yo tenia el mismo problema, me salían dos cabeceras e hice algunos ajustes en la hoja de estilos. checate como lo hice en mi blog

  6. Ariel Hernandez

     hola sabes si se puede hacer lo mismo con el fondo de la pagina que no sea el header. lo que quiero hacer es ponerle el link de me gusta de fb y que cuando clikeen en el fondo automaticamente le den a me gusta de mi fans page de FB. se puede hacer esto?

Deja un comentario

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

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Scroll al inicio