Background aleatorio en tu blog

Sea por la razón que sea, tal vez te haz preguntado ¿Como hacer que, cada vez que se recarge la página, tener un background diferente?.
Es muy fácil implemetar esta caracteristica, y solo necesitas un poco de conocimientos en PHP y CSS para implementarla correctamente. Empecemos:

Primero que todo, en el fichero header.php de tu theme, justo despues de:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
añade:
<style>
body {
background: transparent url('<?php include('css.php') ?>') repeat-x; }
</style>

Ahora, crearemos el fichero css.php. Este será el encargado de lanzar al azar las imagenes que apareceran de fondo, es decir, en el se concentrara toda la mágia del truco. El fichero debe ser más o menos así:
<?php
$f = array(
1 => "http://tudominio.com/wp-content/themes/magiting/images/bgd_po.jpg",
2 => "http://tudominio.com/wp-content/themes/magiting/images/img13.jpg",
3 => "http://tudominio.com/wp-content/themes/magiting/images/img6.jpg",
4 => "http://tudominio.com/wp-content/themes/magiting/images/img23.jpg",
5 => "http://tudominio.com/wp-content/themes/magiting/images/img11.jpg",
6 => "http://tudominio.com/wp-content/themes/magiting/images/img9.jpg",
);
$n = rand(1,6);
?>
<?php echo "$f[$n]";?>

Si deseas agregar más imagenes, sigue las siguentes instrucciones:

  • Antes del ); añade X => “URL_DE_LA_IMAGEN”,. Reemplaza X por el numero que sigue despues del último número (en el caso del ejemplo, X sería 6) y, obviamente, reemplaza URL_DE_LA_IMAGEN por la URL de la imagen que deseas.
  • Una vez que añadas todas las imagenes que desees, modifica $n = rand(1,5);, reemplazando el 5 por el último numero. Si añadimos, por ejemplo, 13 imagenes en total, el código quedaría como $n = rand(1,13);.

Una vez finalizado todo, prueba a recargar tu página y verás que el fondo cambiará. Es un truco muy sencillo y vistozo, que hará más atractivas tus creaciones.

Comentarios
  1. FeR

    Sabiendo un poco de PHP y CSS, creo que en el código del array con las URLs falta algo que sea:

    Justo antes de todo eso que pusísteis. Además, tienes que hacer de alguna manera para que $nombre_array[n] meta la URL en el archivo CSS mediante un echo. Eso no lo hacéis y, por lo tanto, no funciona de ninguna manera el código que habéis puesto. También faltaría hacer el include del archivo css.php.

    Corregidme si me equivoco.

    Escrito el08/11/2009
  2. FeR

    Perdonad, pero por alguna razón no me añadió el código que quería. Era algo así:

    <?
    $nombre_array = array(
    1 =

    Escrito el08/11/2009
  3. @FeR: me acabo de percatar que el código, por extrañas razones, salio incompleto. Corregiré esto ahora. Disculpa las molestas que esto pudo haber causado.

    Escrito el08/11/2009
  4. FeR

    @Ejner Galaz: No pasa nada, majo. ^^

    Escrito el09/11/2009
  5. Hola Ejner, me llamo Marcel y soy de Uruguay, administro un blog de maquetas de Starwars llamado El cartón milenario. Lo utilizo de la forma más basica que se te pueda ocurrir, escribo y subo fotos. Me gustaria darle más vida agregarle fondo o wallpaper y otras cosas, pero mi conocimiento de WP es casi nulo no se ni dónde debo poner los códigos de programación que se muestran en todo este sitio. ¿Me podrías ayudar o si fuera mucha molestia decirme de algún sitio WordPress para tontitos o algo similar? Un abrazo Y muchas gracias Marcel

    Escrito el22/11/2009
  6. Gerar2k

    También lo que pueden hacer es hacer que cambie de color, aqui les dejo el método:

    Agregar el siguiente codigo antes del


    body {
    background: ; }

    y el fichero “css.php” debe contener lo siguiente:

    "#000000",
    2 => "#ff0000",
    );
    $n = rand(1,2);
    ?>

    Espero que les sirva como me sirvió a mi :)
    Saludos!

    Escrito el10/02/2010
  7. Gerar2k

    Ups no salió bien el codigo! :(

    Escrito el11/02/2010
  8. gracias, me ha funcionado perfecto, muchas gracias

    Escrito el17/02/2010
  9. Ray

    mmmmmmmmmmm que raro a mí no me funciono!!!! que puedo hacer?

    Escrito el10/03/2010
  10. Hi,

    Thanks for sharing this link – but unfortunately it seems to be down? Does anybody here at http://www.todowp.org have a mirror or another source?

    Cheers,
    Mark

    Escrito el20/03/2011
  11. Rai

    Que genial,

    Creo haberme visto unos 3 o 5 tutoriales de como hacer esto y de todos fue el único que me dio resultado a la PRIMERA!, Muchas gracias por compartirlo, esta buenísimo.

    Escrito el29/03/2011
  12. facil rapido y muy intuitivo jejej gracias por el articulo tambien me salio a la primera… muy util ademas que con css ya puedes manipular el comportamiento del fondo en mi caso fixed.. adaptado y probado 100%…

    Escrito el30/10/2011
  13. FosterKane

    Simple y directo. Y lo mejor de todo… Funciona!!
    Una preguntilla: Junto a (repeat-X) se puede añadir un parámetro de centrado, estilo (align-center)? Uso un tema muy posesivo y no quiero tocar nada desde la configuración de WP, preferiría añadir ahí un parámetro y listos.

    Gracias Monstruo.

    Escrito el25/10/2014

DEJA TU COMENTARIO