Ta tronche sur mon blog (2) : le tutoriel sur les gravatars de WordPress 2.5

Si vous êtes sages, le prochain billet sera un tutoriel pour l’intégration des gravatars dans un thème wordpress, sans passer par un plugin, avec le php qui va bien et les css qui vont bien.

Barbablog, WordPress 2.5 et ta tronche sur mon blog (1)

Chose promise, chose due. Voici donc un mini tuto pour intégrer les gravatars dans votre thème wordpress. A quoi ça sert ? A faire joli et surtout à structurer la discussion car comme le dit fredmac : cela simplifie la lecture des commentaires et permet de voir rapidement celles et ceux qui participent. Et même qu’il rajoute Sympa. Bon,vous êtes convaincus ? On peut commencer alors.

get_avatar

Avec la version 2.5 de wordpress, vous n’avez plus besoin de passer par un plugin ou par 30 lignes de code pour intégrer la tête de vos lecteurs dans les commentaires. Tout se fait désormais très simplement à l’aide de la fonction get_avatar().

get_avatar( $id_or_email, $size = '80', $default = '<path_to_url>' )

get_avatar prend 3 paramètres

1. id_or_email est l’id ou l’email du propriétaire de l’avatar. Ici, on peut passer à la place de l’email ou de l’id l’objet commentaire de la boucle commentaire de wordpress.
2. size est comme son nom l’indique la taille de l’avatar (en pixel). La taille max est de 80 pixels
3. path_to_url est l’image que vous souhaitez afficher par défaut, si par hasard vos lecteurs ne sont passez fashion, geek ou web2.0 pour avoir leur avatar personnalisé (ouh les nuls). Comme wordpress 2.5 fait les choses bien, vous avez déjà un avatar par défaut : dont la taille est de 64 pixels par 64.

get_avatar() retourne un tag img complet auquel est associé la classe avatar, pratique pour contrôler l’affichage.

Modifier la boucle des commentaires

Une fois qu’on sait comment la fonction get_avatar fonctionne, il ne reste plus qu’à la mettre en oeuvre dans votre thème. Le fichier qui gère l’affichage des commentaires dans wordpress est comments.php. C’est donc lui que nous allons modifier.

Dans comments.php, recherchez le petit bout de code php for each $cpomments as $comments lequel représente le début de la boucle qui affiche l’ensemble des commentaires associés à un billet. C’est là que vous allez insérer la fonction get_avatar, Juste après le<li>. Comme nous l’avons vu, la fonction peut prendre 3 paramètres.

• Pour afficher l’avatar d’un utilisateur, il faut lui passer en premier paramètre son email. On l’obtient en allant interroger la propriété comment_author_email de l’objet $comment. En php, ça se fait comme ça : $comment->comment_author_email. On peut également passer tout l’objet $comment à la fonction get_avatar. Celle-ci aura se débrouiller toute seule pour retrouver la propriété comment_author_email. Ce qui nous donne get_avatar($comment).
• Si vous souhaitez contrôler la taille de l’affichage de l’avatar, vous devez passer une taille en deuxième paramètre, 50 pixels par exemple : get_avatar($comment, ’50’).
• Enfin, si certains de vos lecteur n’ont pas encore d’avatars, vous pouvez leur en attribuer un par défaut en indiquant en troisième paramètre le chemin vers l’image : get_avatar($comment, '50', '/images/avatardefaut.png').

Au final, ça donne quelque chose comme ça :

<?php foreach ($comments as $comment) : ?>
<li>
<?echo get_avatar($comment, '80' );?>
<p class=“commentmetadata”><cite title=“type”><?php comment_type(__('Commentaire'), __('Trackback'), __('Pingback')); ?></cite> de <cite title=“auteur”><?php comment_author_link() ?></cite> déposé le <cite title=“date, permalien”><a href=“#comment-<?php comment_ID() ?>”><?php comment_date('j F Y') ?></a></cite></p>
<?php if ($comment->comment_approved == '0') : ?><p><em>Votre commentaire attend d'être odéré.</em></p><?php endif; ?>
<blockquote> <?php comment_text() ?> </blockquote>
<?php edit_comment_link('Editer le commentaire','<p>','</p>'); ?>
</li>
<?php endforeach; /* fin de chaque commentaire */ ?>
</ol>

Contrôler l’affichage

Normalement, si vous respectez le code que je vous propose (à savoir afficher l’image du gravatar tout de suite après l’ouverture du tag li), un simple float: right suffit à caler l’avatar en haut à droite des commentaires. Nous avons vu au début de ce tutoriel que la fonction get_avatar renvoyait un tag img avec une classe avatar. Pour contrôler la mise en forme de cette image, il suffit de cibler toutes les images qui ont pour classe avatar. En css, cela se fait comme ça

.avatar {
float: right;
display: block;
/* un peu de cosmétique */
border: 1px solid #999; /* une bordure grise */
padding: 1px; /* séparée d'un pixel de l'image pour une effet visuel sympa */
margin-right: .3em /* un peu de marge à gauche de l'image pour que l'image de l'avatar ne cogne pas avec le texte du commentaire */
}

Rajoutez cette classe dans votre fichier style.css et le tour est joué.

Contournement avec Internet Explorer

Pour ma part, après les commentaires de redpeppers (euh j’ai l’impression que l’affichage part en sucette), j’ai dû rajouter des styles spécifiques pour internet explorer. Internet Explorer est capricieux : dès qu’on utilise la propriété float, pourtant très propre et très utile, il faut utiliser un contournement (la méthode clearfix) pour que cet abuti de navigateur daigne se comporter correctement. Pour ce faire, j’utilise les commentaires conditionnels. Les commentaires conditionnels permettent de d’afficher du code (html, css ou js) que seul Internet explorer interprétera. C’est propre et standard : les autres navigateurs ne verront qu’un bout de code commenté.

Ouvrez header.php et à l’intérieur du tag head, rajoutez ce bout de code :

<!--[if IE]>
<style type=“text/css” media=“screen”>
#comments, .post code {width: 95%}
#comments li {height: 1%}
#comments .avatar {margin-top: .3em}
</style>
<![endif]-->

Gérer les avatars depuis otre interface d’administration

Cerise sur le gateau, l’intégration des avatars avec la fonction get_avatar vous permet de gérer le tout se gère directement dans l’interface de wordpress :
panneau settings » onglet discussion :