Implémenter hReview dans votre thème WordPress

Après avoir présenté rapidement un avis personnel sur l’installation facile de l’extension hReview sur WordPress, je m’essaye ici en amateur non programmeur à localiser un article publié le mois dernier par Joost de Walk, consultant SEO et développeur web au Pays-Bas pour plonger plus à fond dans le microformat de publication de critique : hReview. Comme d’habitude pour toutes les traductions, ce billet est un chantier en cours. Publié ici à seule fin d’exercice personnel pour imaginer le futur de sites personnels de critiques. En attendant une implémentation valide sur ce blog, merci de considérer que seul le lien original Implementing hreview in your WordPress theme fait référence.

Dans son billet précédent sur Yoast, Frederick expliquait pourquoi vous devriez utiliser les Microformats pour accroître le taux de clic (CTR) provenant de Google. Dans les commentaires de ce billet, les personnes demandaient s’il existait des extensions pour implémenter facilement ceci dans votre thème. Même si ce peut être un peu difficile à faire, j’ai pensé que ce serait bien d’expliquer comment j’ai implémenté hReview dans mon thème.

Comment j’active un avis critique

J’ai fait allusion à cela dans le  dernier podcast de mardi avec Dougal Campbell : Quand j’ajoute un champ personnalisé « rating » à un billet, mon thème marque désormais automatiquement ce billet sous forme de microformat hReview. Aussi simple que ça :

Le champ « rating » est entre 0 et 5, parce qu’ainsi Google comprend au mieux et nous n’avons pas à donner à Google quelque métadonnée complémentaire à son propos.

La fonction hreview_echo

Pour faire en sorte que ce processus soit facile, j’ai créé une fonction dans mon fichier functions.php appelée hreview_echo. Elle ressemble à ça :

function hreview_echo($val) {
global $post;
$rating = get_post_meta($post->ID, 'rating', true);
if ($rating) {
echo $val;
}
}

Nous utiliserons cette fonction sur les différents endroits où nous avons besoin d’ajouter des classes supplémentaires pour produire le hreview. (NDT : figure 1)

La classe pour contenir tout : hreview

La première classe que nous devrions ajouter est ce qui va contenir tout le microformat : la classe hreview. Celle-ci devrait être sur la div entourant le billet (cette div devrait contenir le titre et l’auteur). Dans le thème par défaut (NDT : et à cette heure ce n’est pas le mien !), ça ressemble à ça :

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

Dans ce cas, la classe de cette div est en fait extraite par la fonction au coeur de WordPress post_class(), aussi devrons nous accrocher à cette fonction. Heureusement, elle nous permet de faire facilement ça en utilisant un filtre, que nous produirons en utilisant les fonctions ci-dessous, que vous poserez aussi à l’intérieur de votre fichier functions.php :


function hreview_post_class($classes, $class, $post_id) {
global $post;
$review = get_post_meta($post->ID, 'rating', true);
if ($review) {
$classes[] = 'hreview';
}
return $classes;
}
add_filter('post_class','hreview_post_class',10,3);


Si votre thème n’utilise pas la fonction post_class(), c’est encore plus facile ! (NDT : c’est mon cas) Imaginons que la div de votre billet ressemble à cela :

<div class="post">


Vous pouvez alors simplement utiliser notre fonction hreview_echo() :

<div class="post<?php hreview_echo(' hreview'); ?>">


L’item critiqué : le titre

Ensuite, dans la lignée des choses à ajouter, c’est une classe sur le titre du billet. Le titre a besoin de deux noms de classe : les classes item et fn. Dans mon cas, ça ressemblait à cela :

<h1><?php the_title();?></h1>

Ceci peut être facilement transformé dans ce qui suit, en utilisant à nouveau la fonction hreview_echo créée précédemment : (NDT : figure 3 – adaptation – dans mon cas le billet contenait d’autres classes)

<h1 <?php hreview_echo(' class="item fn"'); ?>>
<?php the_title();?>
</h1>

La date de la critique

Pour la date nous allons devoir travailler ça un peu. Le microformat hReview détermine que la date doit figurer en format ISO. Ce qui veut dire que la date du jour doit être sous cette forme là pour le 7 mars 2010 : 2010-03-07.
Votre thème a probablement une autre façon d’afficher la date. Ma date sur mon thème ressemblait à ça :

<span class="date"><?php the_time('d F Y');?></span>


Maintenant pour faire en sorte que ça ressemble encore à ça et que nous puissions donner aussi au microformats une date correctement formatée, nous utiliserons un truc : en ajoutant un span avec une classe ayant la valeur value-title et puis en ajoutant la date correcte dans le title de ce span, les parseurs de microformats ignoreront l’autre contenu et extrairont la valeur provenant de ce title.

Par conséquent, nous le transformerons ainsi :

<span class="date<?php hreview_echo(' dtreviewed') ?>">
<?php
hreview_echo('<span class="value-title" title="'.
get_the_time('Y-m-d').'"/>');
the_time('d F Y');
?>
</span>

Ce qui donne :

<span class="date dtreviewed">
<span class="value-title" title="2010-03-07"/>
7 mars 2010
</span>


Solution élégante, non intrusive, n’est ce pas ? (NDT : l’adaptation pour ce thème a été + facile ayant déjà implémenté le modèle de classe « value » : cf figure 4)

Le critique : l’auteur

La classe suivante que nous devons ajouter est la classe reviewer, parce que c’est l’auteur de la critique. Aussi une classe simple à implémenter, c’est l’auteur du billet. Dans mon thème, le bloc « author » ressemble à cela :

<span class="author"><?php the_author(); ?></span>


Maintenant, à nous de jouer :

<span class="author<?php hreview_echo(' reviewer'); ?>">
<?php the_author(); ?>
</span>


Facile, non ? Vous pouvez faire quelque chose de la sorte avec n’importe quel type d’affichage du nom de l’auteur. D’autres fonctions qui pourraient être utilisées dans votre thème seraient par exemple the_author_link() ou the_author_posts_link(). (NDT : souvenons-nous néanmoins que la propriété « reviewer » a besoin d’être une hCard !)

Le contenu de la critique

Nous avons à ce stade fait plus de la moitié du travail ! Continuons avec les contenus de la critique. Dans le microformat hReview, ceci a besoin de la classe description. Dans mon thème, tout comme dans le thème par défaut Kubrick, le contenu est emballé dans la div suivante :

<div class="entry">

Vous avez pigé maintenant, non ? Allons-y :

<div class="entry<?php hreview_echo(' description'); ?>">

(NDT : dans le cas de ce blog motorisé avec hAtom, j’ai ajouté la description sur la classe « entry-content »)

En passant, si vous voulez aussi marquer les articles de votre page d’accueil sous forme de hReview, et que vous utilisiez des extraits de résumés au lieu d’articles complets, comme je le fais, vous devriez utiliser summary, au lieu de description :

<div class="entry<?php hreview_echo(' summary'); ?>">

Pour conclure : la note ! (rating)

Et maintenant pour conclure, il est temps pour nous d’ajouter la note, parce que c’est bien tout l’intérêt de ce format, non ? Il existe plusieurs moyens d’afficher une note, j’ai pour ma part choisi de le faire dans un HTML qui ressemble à ça :

<div class="rating">Ma note :</div>
<div title="4.5 sur 5 étoiles" class="rating_bar">
<div style="width:90%"></div>
</div>

Ce qui donne ça :

(NDT : à l’étude sur ce code, l’idée serait d’utiliser la sous-propriété best pour changer l’échelle de notation sur 20.)

La seconde div (classe rating_bar) affiche la note, et contient les étoiles vides. La div qui contient les étoiles jaunes, remplit les étoiles là où elles doivent être.

La CSS pour ces 3 divs ressemble à ça :

.rating { float: left;
margin-right: 10px;
}

.rating_bar { float: left;
width: 55px; background: url(images/stars.gif) 0 0 repeat-x;
}

.rating_bar div {
height: 12px; background: url(images/stars.gif) 0 -13px repeat-x;
}

Téléchargez l’image des étoiles ici.

Maintenant, nous devons faire deux choses : produire dynamiquement la taille de la div intérieure dans la rating_bar, et rendre la note lisible pour un parseur de microformats.

Pour afficher la note, parce que c’est une valeur entre 0 et 5, nous la multiplierons par 20. Pour faire que ce rendu soit parsable par un analyseur de microformat, nous utiliserons le même truc value-title utilisé précédemment. Pour finir, nous transformerons tout cela dans une fonction pour afficher la note, que nous déposerons à l’intérieur de notre fichier functions.php, tout comme les deux fonctions précédentes.

<?php
function display_hreview_rating() {

global $post;
$rating = get_post_meta($post->ID, 'rating', true);

if ($rating) {
?>
<div class="rating">
Ma note:
<span class="value-title" title="<?php echo $rating; ?>"/>

</span></div>
<div title="<?php echo $rating; ?> sur 5 étoiles" class="rating_bar">

<div style="width:<?php echo ($rating*20); ?>%"></div>
</div>

<?php
}
return $output;
}
?>

Ainsi, vous pouvez désormais utiliser simplement la fonction display_hreview_rating() n’importe où dans votre billet, à l’endroit où vous voulez ajouter la note.

S’il n’y a pas de note, cela n’affichera rien.

Tester votre hReview

Tester votre marquage hReview peut se faire avec plusieurs outils, mais j’ai personnellement trouvé l’Outil Google Rich Snippets extrêmement utile. Si vous utilisez Quix, saisissez simplement ‘snippet’ sur le billet que vous voulez tester ! Dans mon cas, pour ce billet, cela produit un fragment comme ça :

Bonus : pricerange & tags

Comme vous pouvez le constater dans le snippet au-dessus, cela contient quelque chose qui n’est documenté nulle part dans la documentation officielle de Google pour les avis, mais que Google supporte vraiment : le pricerange.

Crédit : j’ai trouvé d’abord cet attribut pricerange quand mon collègue Eduard m’a indiqué ce billet posté par les types de SEOgadget, qui pointait vers ce Knol. Extrêmement utile et cela semble autoriser toutes sortes de texte. Les gens l’utilisent pour afficher une échelle de prix dans un style €€ – €€€, ou pour afficher une « vraie » fourchette de prix, comme € 100 – € 150. Dans le cas d’un avis individuel, vous pouvez simplement l’utiliser pour dire ce que vous avez payé (NDT : en monnaies libres !).

Parce que ce que j’ai payé pour un produit ne fait pas vraiment partie de mon thème, je fais ici au plus simple : quand je dis que l’extension est gratuite, je marque cette ligne comme ça :

cette extension est
<span class="pricerange">gratuite</span>

Si vous voulez vraiment placer la valeur dans un champ personnalisé et l’afficher, vous pourriez adapter facilement l’une des fonctions au-dessus pour faire ça, je vous laisserai cela pour exercice.

Une autre chose trouvée que Google reconnaît est la classe tags. C’est vraiment facile à faire : j’ai juste ajouté la classe ‘tags’ autour de mes tags. Je ne sais pas néanmoins si Google utilise ça, je ne l’ai vu nulle part dans la jungle. (NDT : je conseillerai d’ajouter tout simplement le microformat rel= »tag »)

Un dernier mot

Si vous avez modifié votre thème pour le marquer sous forme de hReview, assurez-vous SVP d’utiliser ce formulaire pour faire savoir à Google que vous l’avez. Ils pourraient ne pas l’afficher si vous ne correspondez pas à sons segment de test, parce que comme Google le déclare dans le Knol :

Actuellement les sites de critiques et les sites sociaux de réseaux/personnes sont éligibles. Nous prévoyons à l’avenir d’étendre les « Rich Snippets » à d’autres types de contenus.

J’espère que vous trouverez ce billet utile, faites-moi savoir dans les commentaires si vous l’avez utilisé pour ajouter hReview à votre thème (premium), et sentez-vous à l’aise pour poster des liens vers des exemples. J’aimerais tant les voir. Si vous vous posez la question : tous les exemples de code sur ce site, sauf déclaration contraire, sont sous licence MIT : libres en distribution, libres en modification. Ajoutez SVP un lien vers l’endroit où vous avez reçu le code original.

A mon humble avis, des ajouts comme ceux-ci devraient être intégrés dans tous les thèmes premium, parce que c’est ce qui -selon moi- rend vraiment un thème premium. Happy coding!

Mots-clés : google, hreview, microformats, rich snippets, WordPress