Search Menu

Tutoriel : avoir une image aléatoire dans son header

je-ne-sais-pas-choisir

Si vous êtes du genre à ne jamais savoir choisir, voici une petite astuce toute simple pour charger une image de façon aléatoire dans votre header. Ainsi, à chaque chargement de la page, une nouvelle image peut s’afficher. Non seulement, vous évitez le choix diluvien (faut il que j’utilise du vert jade ou du jaune poussin ? une typo comme ci ou comme ça, que je mette cette image ou celle-ci) mais en plus vous réservez une petite surprise à vos lecteurs à chaque nouvelle visite.

1. Créez les différentes images de votre header. Pour l’exemple, nous imaginerons que vous avez 5 images différentes. Nommez les header1.png, header2.png, … jusqu’à header5.png. Faites attention à bien garder la même taille que l’image d’origine pour chacune de vos images

2. Uploadez les images dans le dossier de votre thème dans un sous-dossier « images ». Si vous avez déjà un dossier « images » dans votre thème, mettez les images dedans.

3. Remplacez le code de l’image fixe dans votre fichier header.php  par le code ci-dessous.

<?php $site_logo = get_template_directory_uri() . '/images/header'.rand(1, 5).'.png'; ?>
 
<a class="logo" href="<?php echo home_url( '/' ); ?>">
<img src="<?php echo $site_logo; ?>" alt="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>" title="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>" />
</a>

Si vous avez moins d’images, il faudra modifier les paramètres de la fonction random. Dans notre exemple, nous avions indiqué rand(1,5), ce qui revient à demander un nombre aléatoire compris entre 1 et 5. Ainsi, si vous avez seulement trois images, il vous suffit de modifier les valeurs pour indiquer rand(1,3). Simple, non ?

 

À propos de Laetitia

J'aime le papier, je déteste la paperasse.

Lire ses billets - Découvrir son blog

Leave a Comment

Required fields are marked *.