Comment avoir une image aléatoire comme en-tête pour votre site WordPress

WordPress

La plupart des sites WordPress ont une image statique dans la partie supérieure. Cette en-tête peut être la même pour toutes les pages du site, ou vous pouvez avoir des entêtes différentes pour différentes sections. Par exemple, si vous utilisez votre site WordPress pour vendre des vêtements, vous pouvez avoir une image d’en-tête pour n’importe quelle page proposant des vêtements pour homme, une image pour les pages affichant des vêtements pour femme, et une troisième image pour les vêtements pour enfant.

Mais et si vous vouliez avoir une image d’en-tête qui change aléatoirement à chaque fois que la page se charge? Il y a quelques raisons pour lesquelles vous voudriez faire ça. Si vous travaillez dans la photographie, vous voudrez peut-être que l’image d’en-tête change aléatoirement à chaque fois de manière à afficher plusieurs photos d’exemple. Si vous tenez juste un blog personnel sur WordPress, vous voudrez peut-être que l’en-tête change juste pour éviter de tomber dans la monotonie. Quelle que soit la raison, vous pouvez facilement avoir une image d’en-tête aléatoire en ajoutant quelques simples lignes de code dans votre fichier header.php.

Trouvez vos images

La première étape consiste à rassembler toutes les images que vous voulez utiliser. Il y a quelques petites règles que vous devez suivre. Tout d’abord, les images doivent toutes être de la même taille. Autrement, vos pages n’auront pas une apparence régulière. Si quelques images sont beaucoup plus petites ou beaucoup plus grandes que les autres, ça peut gâcher toute votre mise en page. Ensuite, vous devez vous assurer que toutes vos images sont du même type. Par exemple, elles doivent toutes être des fichiers .jpg. Vous ne pouvez pas mélanger des fichiers .jpg, .gif, et .png.

Ensuite, vous devez donner aux images le même nom, suivi d’un nombre. Quelque chose du genre header_1.jpg, header_2.jpg, etc. Il doit y avoir un underscore entre le nom du fichier et le nombre. Vous pouvez utiliser tout ce que vous voulez pour la partie « nom » : header, headerpic, etc. Il n’y a pas de limite non plus pour le nombre d’images à utiliser. Assurez-vous juste qu’elles sont toutes nommées en séquence et qu’elles sont toutes du même type d’image.

Uploadez dans le même dossier

Maintenant uploadez toutes vos images dans le même dossier. Ça peut être n’importe quel dossier, mais pour faciliter l’organisation et ajouter des images plus tard, vous pouvez nommer dossier header_images par exemple.

Maintenant ouvrez le fichier header.php de la page sur laquelle vous voulez afficher les images. Ajoutez-y le code suivant :

<img src="http://folder_for_images /headimage_<?php echo(rand(1,X));?>.jpg"
width=" imagewidth" height="imageheight" />

Derniers ajustements

Il y a bien entendu quelques choses que vous devrez changer. Premièrement, remplacez folder_for_images par le bon chemin vers le dossier contenant toutes les images que vous venez d’uploader.  Vous devrez peut-être aussi remplacer “headimage” par le nom que vous avez donné à chaque image. Ensuite, dans le code “rand (1,X)” veillez à remplacer X par le nombre total d’images. Par  exemple, si vous voulez que WordPress choisisse au hasard l’une des cinq images, vous devrez remplacer X par 5. Remplacez ensuite la largeur et la hauteur d’image à la largeur et la hauteur maximale de vos images.

Ça devrait suffire! Enregistrez les modifications puis rendez-vous sur votre page. À chaque fois que vous la rechargerez, vous devrez voir une image différente.

Partager!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Notre recommandation pour Hébergement WordPress

WordPress

WHC.ca
Obtenez un rabais de 50% en utilisant notre lien.

WHC.ca

Hébergeur Web fiable avec un excellent service à la clientèle et une installation WordPress en un clic. C'est notre recommandation pour héberger un blog WordPress.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *