Articles précédents du dossier Créer son propre thème :

• L’image de fond.
• Le gabarit CSS.

Dans la continuité de mes deux précédents articles sur la création de thème Wordpress, voici comment mettre en forme vos commentaires.

J’ai choisi pour ma part de mettre chaque commentaire dans un div.

J’utilise aussi le Plugin : wp_gravatar pour l’affichage de l’avatar de la personne qui commente.

Un bout de code PHP me permet de différencier le style entre deux commentaires consécutifs.

Lisez la suite de l’article pour voir le code source et une capture !

Voici le code dans le fichier comments.php du thème :

Code source :

<?php
$oddcomment=”comment”;
?>
<?php foreach ($comments as $comment) : //boucle de parcours des commentaires du billet?>
<div id=”<?php echo $oddcomment; ?>”>
<img src=”<?php gravatar(”R”, 80); ?>” alt=”" style=”float:left;border:solid 1px #aab59a;margin-right:10px;”/>
<img src=”http://wanderscheid.com/img/quote.png” alt=”" style=”float:right;”/>
<?php comment_author_link() ?> a dit le <?php comment_date(’d/m/Y’) ?> à <?php comment_time() ?>
<div id=”commentcite”><?php comment_text() ?></div>
</div>
<?php
if ($oddcomment == “comment” ) { $oddcomment = “comment2″; }
else { $oddcomment = “comment”;}
?>
<?php endforeach; /* end for each comment */ ?>

Passons maintenant à la partie CSS dans le fichier style.css.

Code source :

#comment {
list-style-type:none;
min-height:100px;
}
#commentcite {
margin-left:5%;
}
#comment2 {
background-color:#00baff;
min-height:100px;
}

Ca aura donc un rendu comme l’image ci dessous !

Profil

Flickr

Le grand YAKA !

Visiteurs