Desde que me pasé de Blogger a Wordpress siempre quise encontrar un plugin que cumpliera tal función, mas no lo encontré jamás. Claro, me daban muchas alternativas: plugins defectuosos, códigos PHP que no funcionaban, etc. Todo cambió (al estilo Camila), cuando descubrí algo que por ceguera Web no me había percatado: que yo mismo tenía la solución, y desde hace tiempo. En las siguientes lineas aprenderás de una manera bastante simple como tener una imagen de cabecera cambiante en tu blog.

Pero, primero lo primero, ¿para que fuck quiero un header aleatorio?
Puede servir para muchas cosas. En el caso de Cinencuentro (blog de cine) tiene la finalidad de mostrar un póster de película distinta cada vez que damos clic en cualquier link interno de la página. Quiero decir, que las imágenes del header irán cambiando mientras nosotros naveguemos en su blog. Yo lo uso para redirigir a posts o categorías de mi blog.

Existe un plugin que se llama Header image rotator basic, pero es muy deficiente, dado que superpone las imágenes y éstas cambian automáticamente sólo cada 24 horas, según su manual (y  leva el adjetivo “basic”, por que hay que pagar si quieres uno mejor) También hay un código en PHP para cumplir la misma función, pero no funciona si usas el plugin WP-Caché. Yo no quito ese plugin ni a balas, por que me sirve para mejorar la velocidad del blog, que de por si ya está medio lentón.

Pero ya dejándonos de tanto antecedente, vamos con mi solución (en realidad no es mía, pero de momento no recuerdo el autor, así que hasta que no comente y busque demandarme, sigue siendo mío) Se trata de un código en JavaScript, con el cual no sólo se consigue imágenes por cada clic que se da, si no que además tienes la posibilidad de ponerle un link de redirección y un atributo a la mencionada imagen, ¿suena bueno no? Sí que lo es.
Vamos con su implementación.

1. Abre el archivo header.php del theme que usas y busca algo parecido a esto <div id="headerimg">
2. Justo debajo pega el siguiente código:
   
<script Language="JavaScript">
var ad_count = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % ad_count;
ad +=1;
if (ad==1) {
url="http://LINK 1";
title="TÍTULO 1";
banner="http://TU-IMAGEN1.jpg";
}
if (ad==2) {
url="http://LINK 2";
title="TÍTULO 2";
banner="http://TU-IMAGEN2.jpg";
}
if (ad==3) {
url="http://LINK3";
title="TÍTULO 3";
banner="http://TU-IMAGEN3.jpg";
}
/* document.write('SEC: ' + sec + ' AD: ' + ad); */
document.write('<a href="' + url + '" title="' + title + '">');
document.write('<img src="' + banner + '" border=0> </a>');
</script>
3. Anda a la hoja de estilo (style.css, según la plantilla que uses) y busca el código que hace referencia a la imagen de cabecera por defecto. En mi caso está en:
   #headerimg {background: #ECF3F8 url(images/header.jpg) no-repeat;height: 150px;color: #000000;overflow: hidden; margin-bottom:20px;}
4. Nada más tienes que suprimir background: #ECF3F8 url(images/header.jpg) no-repeat; y listo. Este último paso es opcional ya que yo dejo una imagen ahi, puesto que los traductores en linea no reconocen esa función, así que para esos únicos casos, recomendaría tener un header que no vaya a quitarse nunca (que por cierto puedes cambiarlo manualmente, como mejor gustes)
5. Volviendo al JavaScript, el atributo var ad_count = 3; indica cuantas imágenes vamos a necesitar (puedes añadir cuantas quieras). El código url="http://LINK 1"; hace referencia al link a donde queremos que lleve cuando se de clic en la imagen (es opcional, aunque también puedes poner tantos links como desees, habiendo la posibilidad de que todos sean iguales). title="TÍTULO 2"; hace referencia al título que mos trara la imagen al posar el ratón. Y por último, banner="http://TU-IMAGEN3.jpg";, se refiere a la URL donde subiste la imagen (las imágenes tambien pueden ser también formato png o gif, quiere decir que puede tener movimiento)

¿Fácil no? Así­ dicen que yo nunca me dejo explicar. Como ven acá las cosas [post="68" text="se explican con manzanitas"]. Aun así, cualquier duda que tengan escríbanla en los comentarios. Espero les sirva.

Califica este post:

(1 votos, promedio: 5 de 5)

 Loading ...