Thème Freshy - Image d'entête aléatoire

Le thème Freshy est livré avec 14 images (voir ce billet pour la liste exhaustive). Voyons comment mettre en place l'affichage aléatoire de l'une d'entre elle. J'avais déjà exposé deux méthodes utilisables avec le thème Travelogue, je vais ici reprendre la deuxième et l'intégrer au thème Freshy.

Première étape, création des 14 feuilles de styles pour chacune des 14 images disponibles. Pour ça, rien de bien compliqué car il suffit dans chacune d'elle de mettre le code suivant, en changeant bien sûr le numéro de l'image :

#title_image {
   margin:0;
   text-align:left;
   display:block;
   height:95px;
   background:url(images/headers/header_image1.jpg)
    center center transparent repeat-y;
}

Vous trouverez en annexe de ce billet une archive contenant les 14 feuilles de style. Pas la peine de refaire le travail. Décompressez l'archive et placez toutes les feuilles de style dans le répertoire principal du thème (/themes/freshy/).

Deuxième étape, suppression du style correspondant dans la feuille de style du thème (style.css). Il faut éditer le fichier et supprimer ou mettre en commentaire les lignes 57 à 62. Elles contiennent ceci une fois mises en commentaire :

/* #title_image {
   margin:0;
   text-align:left;
   display:block;
   height:95px;
   background:url(images/headers/header_image6.jpg)
    center center transparent repeat-y;
} */

Troisième et dernière étape, appel aléatoire d'une des feuilles de style. Il faut éditer le fichier template.php du thème pour y rajouter la ligne suivante :

<link rel="stylesheet" type="text/css" href="<?php dcInfo('theme'); ?>/image<?php echo(rand(1,14)); ?>.css" media="screen" />

Copiez cette ligne et insérez là juste après la ligne 49 du fichier (dans la section <head>).

Voilà maintenant le thème muni d'un affichage aléatoire de l'image d'entête. Notez que si le cache est activé sur votre blog, cela peut empêcher l'affichage d'une nouvelle image. Il faudra alors vider le cache avant de recharger la page (ou forcer le raffraichissement) pour déclencher le mécanisme.

Ajouter un commentaire

Les champs suivis d'un * sont obligatoires

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/3075

Haut de page