iDorian
Alterner des couleurs avec PHP

Alterner des couleurs avec PHP

Lorsqu’un site internet ou un blog brasse beaucoup de contenu, il peut être intéressant d’apporter un peu de fraîcheur en alternant ses couleurs de base, pour éviter l’effet « pâté de foie ». Une pointe de CSS alliée à une bonne dose de PHP peut corriger le problème !

Je ne compte plus les mails reçus à travers lesquels on m’a demandé comment j’alternais les couleurs sur mon blog. La technique est très simple en (x)HTML, cependant, dès lors que l’on s’empare du PHP, les choses se compliquent légèrement. Une fois de plus, iDorian arrive à la rescousse et vous dévoile ses secrets pour réaliser cet effet transcendant.

Préparer le terrain

La plupart du temps, le sélecteur que l’on utilise pour ses articles réside dans la classe « post » :

<div class=post>…</div>

Naturellement, l’intitulé de la balise peut différer, le plus important étant de localiser lequel correspond à vos articles. Avant de gérer dynamiquement les choses, il convient de coder simplement ce qui sera plus tard généré automatiquement. En bref, nous allons diviser la classe « post » de deux manières distinctes, pour lui assigner une couleur propre, comme suit :

<div class="post even">...</div>
<div class="post odd">...</div>
<div class="post even">...</div>
...

Une fois que l’alternance est créee, il ne reste plus qu’à la colorer simplement avec CSS, comme par exemple :

.post { propriétés diverses }
.odd { background:#f00; }
.even { background:#0f0; }

Désormais, la structure est posée. Il ne reste qu’une chose : dynamiser l’alternance en utilisant la technologie PHP.

Dynamiser et intégrer

Si vous utilisez un thème WordPress, rendez-vous dans le répertoire de celui-ci, localisez les fichiers concernés (en général « index.php » et « style.css »). Ensuite, localisez l’amorçage de la « boucle », à savoir le snippet qui appelle les articles de votre blog, qui devrait ressembler à ça :

<?php if ( have_posts() ) : while( have_posts() ): the_post(); ?>
<?php while( have_posts() ): the_post(); ?>
<?php while( have_posts() ){ ?>

Une fois que vous l’avez localisé, placez-vous au-dessus de celle-ci et ajoutez l’alternance suivante :

<?php $odd_or_even = 'odd'; ?>

Une fois fait, localisez alors la balise relative à vos articles (la même que celle que nous avons travaillé en début de tutoriel), qui n’a donc pas changé :

<div class="post">...</div>

Une fois localisée, remplacez là par l’alternance suivante :

<div class="post <?php echo $odd_or_even; ?>">

Vous suivez toujours ?! Il ne nous reste plus qu’à utiliser un opérateur pour que les classes s’alternent de manière native. Pour cela, juste après la balise que vous venez d’éditer, insérez cette ligne :

<?php $odd_or_even = ('odd'==$odd_or_even) ? 'even' : 'odd'; ?>

Pour comprendre un minimum ce que vous faîtes, sachez que vous venez d’appeler un opérateur de comparaison, qui permet d’effectuer une comparaison entre deux valeurs, via la technologie PHP. De manière développée (et non compressée, comme il apparaît au dessus), l’opérateur se présente de cette manière :

<?php
if ('odd' == $odd_or_even){
$odd_or_even = 'even';
}else{
$odd_or_even = 'odd';
}
?>

Et voilà, il ne vous reste plus qu’à ajouter dans votre fichier CSS les classes « .odd » et « .even », en leur assignant une couleur propre (et différente) pour les voir s’alterner. Qu’en pensez-vous ?! ^^

L'auteur : iDorian

Ce monde, tel qu’il est fait, n’est pas supportable. J’ai donc besoin de la lune, ou du bonheur, ou de l’immortalité, de quelque chose qui soit dément peut-être, mais qui ne soit pas de ce monde.

  • Loic

    Bonjour,

    Merci pour ce tuto très utile ! J’aurais une question cependant si jamais tu passes par là ^^ En fait quand j’applique ta petite astuce aux éléments de mon site (un listing de produits en PHP), le premier div n’est pas pris en compte par le script. Je me retrouve donc avec div= »post [vide] » puis div= »post odd » et enfin div= »post even ». y’a t(-il moyen de supprimer ce 1er div vide et de commencer directement par les odd!

    Merci d’avance

    Loic

  • f//o

    Bien qu’un an soit passé après l’écriture de cet article, je tiens à dire qu’il est super bien expliqué, très simple, c’est parfait !
    J’ai cherché partout cette fonction qui me manquait, merci beaucoup !!!

    • iDorian

      C’est une requête très spécifique (même si les opérateurs ternaires sont courants en PHP). Content que ça t’ait aidé ! ^^