Para los que utilizan WordPress y quieran mostrar imágenes aleatorias en alguna parte de su theme como el header, sidebar, footer o cualquier otra parte, pueden utilizar un pequeño código, muy sencillo, basado en el atributo rand() de PHP.
¿Qué necesitamos para mostrar imágenes aleatorias?
El primer paso es crear una carpeta que contendrá las imágenes que queremos que se muestren de forma aleatoria, y meter en ella las imágenes, numeradas de forma consecutiva, empezando por el 0 o el 1, de forma que quedasen así: 1.jpg o 1.png
Una vez creada la carpeta y añadida en ella las imágenes haremos uso de dos tags, el principal es <?php bloginfo(‘template_url’); ?>? que es el tag que utiliza WordPress para ubicar la dirección del template (por ejemplo http://misitio.com/wp-conten/themes/mitheme/). El otro tag es una sentencia PHP, rand(), que sirve, para obtener un número aleatorio dentro de un rango que nosotros le especificaremos, entre un mínimo y un máximo. Si utilizásemos la sentencia rand(1, 8) se nos devolveria un valos numérico entre el 1 y el 8, ambos inclusive.
Por lo tanto, el código que deberíamos incluir en nuestro theme, para obtener una imagen aleatoria, sería el siguiente:
<!--IMAGEN ALEATORIA-->
<img src="<?php bloginfo('template_url'); ?>/MICARPETA/<?php $num=rand(1, 8); echo ''.$num; ?>.png" tag="texto por si no aparece la imagen" width="300" height="300" border="0">
<!-- IMAGEN ALEATORIA-->
Obviamente, el width y el height tendríamos que sustituirlo por el alto y ancho de nuestras imágenes.
Pase de diapositivas (slideshow) con nuestras imágenes aleatorias:
Si queremos que nuestra imagen aleatoria vaya haciendo un pase de dispositivas aleatoriamente (que no siempre sea en el mismo orden), deberemos hacer lo siguiente.
1,- Deberemos copiar el código anterior en un archivo php en blanco, al que llamaremos “imagen.php”:
<!--IMAGEN ALEATORIA-->
<img src="<?php bloginfo('template_url'); ?>/MICARPETA/<?php $num=rand(1, 8); echo ''.$num; ?>.png" tag="texto por si no aparece la imagen" width="300" height="300" border="0">
<!-- IMAGEN ALEATORIA-->
2,- Crearemos un DIV contenedor de la imagen en nuestro template de WordPress, al que le pondremos id=”imagen_aleatoria”, podremos estilizarlo con CSS y definir su estilo, es importante que el alto y ancho sea el mismo que el de las imágenes y que lo mostremos en modo “block” (display:block).
3,- Necesitaremos de la librería jQuery, así que deberemos tenerla activa en el header.php de nuestro template.
4,- Entre los tag <head> y </head> (mejor justo antes de cerrar el tag), añadiremos el siguiente código:
<script type="text/javascript">
jQuery(document).ready(function(){
setInterval(function() {
jQuery("#imagen_aleatoria").load("<?php bloginfo('template_url'); ?>/MICARPETA/imagen.php");
}, 5000);
})
</script>
5000 es el tiempo en milisegundos que tardará en cambiar la imagen.
hola, aplique el codigo mencionado y funciona bien, pero me gustaría saber si es posible que estas imágenes cambien dentro de la misma entrada, es decir después de un x tiempo se cambie la imagen
Hola Diogo,
Si es posible recargar imagen, para eso, podemos recurrir a jQuery, amplío el tutorial para explicarte como, aunque el resultado final es un poco tosco, ya que he preparado el código de forma rápida y sencilla, luego es posible darle efectos de transición y fades para que quede mucho más “profesional” y estilizarlo al gusto de cada uno.