Mostrar imágenes de cabecera aleatorias

Este truco es también otro de los mas solicitados en el foro, y aunque con algo de retraso ante las peticiones aquí lo tenemos.

Para lograr esta acción usaremos la función PHP rand(), la cual permite obtener un número aleatorio, en este caso entre 1 y 99. Si el número aleatorio es menor o igual a 33 se muestra la primera imagen de cabecera, si es menor o igual que 66 se muestra la segunda y si es menor o igual a 99 se muestra una tercera. Por supuesto, puedes personalizar este comportamiento y, como es natural, deberás modificar los títulos de imagen de cabecera y tenerlas creadas previamente.

Lo que tienes que hacer es pegar el siguiente código en tu fichero header.php:

 
      <?php
      $result_random=rand(1, 99);
      if($result_random<=33){ ?>
          <div id="header" style="background:transparent url(images/cabecera1.png) no-repeat top left;">
      <?php }
      elseif($result_random<=66){ ?>
          <div id="header" style="background:transparent url(images/cabecera2.png) no-repeat top left;">
      <?php }
      elseif($result_random<=99){ ?>
          <div id="header" style="background:transparent url(images/cabecera3.png) no-repeat top left;">
      <?php } ?>
      <!-- Aquí va el código del header -->
      </div>

¡Que lo disfrutes!

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(3 votos, promedio: 5)

¿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.

21 comentarios en “Mostrar imágenes de cabecera aleatorias”

  1. Esta bastante complicada, así es mucho mas fácil y rápida

    <div id="header" style="background:transparent url(images/cabecera.png) no-repeat top left;">

    <!– Aquí va el código del header –>

  2. Mas sencillo es crear una carpeta dentro de tu carpeta de imagenes donde pones tu headers y el siguiente archivo .php:

    <code> 0) {

    $imageNumber = time() % count($fileList);

    $img = $folder.$fileList[$imageNumber];

    }

    }

    if ($img!=null) {

    $imageInfo = pathinfo($img);

    $contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];

    header ($contentType);

    readfile($img);

    } else {

    if ( function_exists('imagecreate') ) {

    header ("Content-type: image/png");

    $im = @imagecreate (100, 100)

    or die ("Cannot initialize new GD image stream");

    $background_color = imagecolorallocate ($im, 255, 255, 255);

    $text_color = imagecolorallocate ($im, 0,0,0);

    imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);

    imagepng ($im);

    imagedestroy($im);

    }

    }

    ?></code>

    Cualquier imagen que pongas en esa carpeta va a cargar como Header de tu sitio. Aqui pueden ver un ejemplo de como funciona.

  3. Se me olvidaba un detalle 😛

    Despues ponen en su header los siguiente

    No se por que no esta funcionando los tags de codigo :s

  4. Dame un link a la discución en los foros y posteo todo ahi mejor. Lo busque pero sin resultados (no busque mucho si :P)

  5. Pingback: México Geek » Truco para mostrar headers alateatorios en WordPress

  6. Pingback: Mostrar imágenes de headers alateatorios en WordPress

  7. Pingback: Truco para mostrar headers alateatorios en nuestro blog - elWebmaster.com

  8. Oi pessoal,

    tenho o wordpress.com e gostaria de colocar uma imagem como essas mostradas ae em cima, mas somente uma, coisa simples que nao estou encontrando onde colocar ou mudar! Não tem nenhuma imagem no meu tema, o tema é Albeo by Elena G.

    Alguem pode me ajudar??!

    vlws!!

  9. @Fernando

    En mi header tengo directamente una de las imagenes que quiero para el header, utilizando la funcion random que deberia poner en

    <!– Aquí va el código del header –>

    Saludos

  10. Perfecto, es justo lo que buscaba, permitiendo enlazar imagenes externas al servidor.

    Pero ¿Cómo le puedo agregar un enlace diferente a cada imagen?

Deja un comentario

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

 

Ir arriba Ir al contenido