Les articles relatifs sur WordPressPour améliorer la pertinence d’un blog et augmenter la fidélité des visiteurs, un module d’articles relatifs peut être un véritable plus.

Sur WordPress, il existe un plugin qui surpasse de loin les autres : YARPP (Yet Another Related Post Plugin).

Pourquoi choisir YARPP?

Comme je l’ai sous entendu, il existe des dizaines de plugins qui permettent de mettre en place un bloc d’articles relatifs sur WordPress. Il existe également plusieurs hacks qui permettent de faire la même chose.

YARPP est cependant la solution la plus aboutie : c’est le seul plugin d’articles relatifs qui prend en compte à la fois le titre, le contenu, la ou les catégories et les mots clés de l’ensemble des publications. Les résultats sont donc plus pertinents pour le visiteur et pour le moteur de recherche.

En plus, le plugin intègre une fonction de mise en cache et peut être facilement personnalisé, alors pourquoi se priver?

Installation du plugin d’articles relatifs

Commencez par installer le plugin, soit avec un logiciel FTP, soit avec le menu disponible dans l’administration de WordPress, puis activez-le. Avec votre logiciel FTP, vous allez devoir créer une copie des fichiers suivant :

  • yarpp-template-example.php
  • yarpp-template-list.php
  • yarpp-template-photoblog.php
  • yarpp-template-random.php
  • yarpp-template-thumbnail.php
  • yarpp-template-wpml.php

Vous les trouverez dans ce répertoire du plugin :

www.monsite.com/wp-content/plugins/yet-another-related-posts-plugin/yarpp-templates

Il faudra les copier dans le répertoire de votre thème :

www.monsite.com/wp-content/themes/nomdevotretheme/

Rendez-vous ensuite dans le menu « Réglages » => « Related Posts (YARPP) » pour paramétrer chacun des éléments suivants.

Depuis les dernières version, les deux menus suivants ne s’affichant pas par défaut : il faut cliquer sur « Options de l’écran » en haut à droite pour cocher l’affichage de ces deux blocs de YARPP

Le Corpus

De base, ne changez rien dans ce bloc, sauf si vous souhaitez exclure certaines catégories, certains mots clés ou encore les articles datant d’il y a plus d’un an. Je pense en effet qu’il vaut mieux prendre en compte tous les contenus d’un site pour mettre en place un maillage interne efficace pour le visiteur et le SEO.

Je déconseille également d’inclure les articles protégés par un mot de passe dans les articles relatifs, car s’ils protégés, c’est qu’il y a une bonne raison à cela…

Options de complémentarité

Ce menu est sans doute la partie la plus intéressante du plugin. Vous allez pouvoir définir les critères utilisés pour afficher les articles relatifs dans vos pages WordPress.

Le seuil de complémentarité est une note qui est attribuée aux articles pour chaque publication affichée. Par exemple, ce tutoriel sur YARPP va avoir une note différente dans chacun des autres posts de SeoMix. Plus la note est élevée, plus il a de chances d’apparaître. Pour ma part, j’ai mis le seuil à 2. En dessous, la publication n’est pas prise en compte. A vous d’adapter la note en fonction de vos contenus.

D’ailleurs, quand vous allez rédiger un article, vous verrez un nouveau widget qui vous affichera (après avoir sauvegardé le post) les articles relatifs de celui-ci.

Les entrées complémentaires dans un Widget
Les entrées complémentaires dans un Widget

Le deuxième point important est la liste des éléments à prendre en compte. Voici également mon paramétrage qui optimise la pertinence des résultats. Attention, ce n’est pas forcément le meilleur paramétrage car les résultats dépendant énormément de vos contenus, donc n’hésitez pas à tester d’autres paramètres.

  • Titres : prendre en compte avec plus d’importance
  • Contenus : prendre en compte
  • Tags : nécessite d’avoir au moins 1 tag en commun
  • Catégories : prendre en compte
YARPP Yet Another Related Post Plugin complémentarité
Options de complémentarité de YARPP

Cochez également la complémentarité croisée, car vos pages peuvent être toutes aussi pertinentes que vos articles.

Réglages de présentation pour le site

Tout comme pour le menu suivant, vous pouvez cocher l’option qui va ajouter automatiquement les articles relatifs dans votre thème. En général, cela fonctionne bien. Si par contre vous voulez le placer à un endroit différent, il faudra utiliser ce code dans votre thème :

<?php if (function_exists('related_posts')) related_posts();?>

Si vous souhaitez ajouter un titre au dessus, rien de plus simple. Juste avant le code précédent, vous pouvez ajouter l’un de ces 3 lignes (à vous de tester pour savoir ce qui rend le mieux) :

<h2>MON TITRE<h2>
<h3>MON TITRE</h3>
<strong>MON TITRE</strong>

Définissez ensuite le nombre maximal d’articles relatifs à afficher. Là aussi, cela va dépendre du thème de votre blog. En ce qui me concerne, j’ai choisi d’en afficher trois mais j’aurais très bien pu en vouloir 10… Là, c’est plus une question de bon sens pour l’utilisateur qui peut parfois se retrouver noyer sous une masse trop importante d’informations.

Cochez la case « utiliser un modèle personnalisé« , et sélectionnez l’un des template par défaut proposé par le créateur du plugin. Pour que cela fonctionne, il faut bien entendu avoir copié ces fichiers dans le répertoire de votre thème WordPress comme indiqué précédemment.

Vous n’avez plus qu’à vérifier sur votre site que l’affichage des articles relatifs est correct, comme ici avec le modèle par défaut « Example ».

Affichage par défaut des articles relatifs, avec YARPP
Affichage par défaut des articles relatifs

Réglage de présentation pour les flux RSS

Le plugin permet également d’afficher les articles relatifs dans le flux RSS de votre blog. Pour ma part, je n’utilise pas cette fonctionnalité, mais cela peut être un bon moyen de montrer plus de contenus à vos lecteurs. Bref, à vous de voir.

Personnaliser l’affichage des articles relatifs

Comme vous avez pu le voir sur l’image précédente, le rendu par défaut n’est pas vraiment esthétique, voir même moche (si si, on peut le dire) … Heureusement pour nous, on peut personnaliser tout ça pour avoir un rendu comme celui de SeoMix :

Exemple d'affichage des articles relatifs sur WordPress
Exemple d’affichage des articles relatifs sur WordPress

La première étape consiste à activer les thumbnails, c’est à dire les miniatures de vos articles. Pour cela, ajoutez ces deux lignes dans le fichier functions.php de votre thème. Les deux chiffres 200 correspondent au nombre de pixels (largeur et hauteur) de vos image et « true » signifie que l’image sera coupée pour obtenir ces dimensions (false risque d’aplatir ou d’écraser vos images).

add_theme_support('post-thumbnails');
add_image_size('seomixthumb', 200, 200, true);

Toujours dans le fichier functions.php, vous aller copier ce code. Il servira à récupérer la première image d’un article, cela uniquement si l’utilisateur n’a pas défini d’image à la une.

function get_post_thumbnail() {
 $files = get_children('post_parent='.get_the_ID().'&post_type=attachment&post_mime_type=image');
 if($files) :
 $keys = array_reverse(array_keys($files));
 $j=0;
 $num = $keys[$j];
 $image=wp_get_attachment_image($num, 'large', false);
 $imagepieces = explode('"', $image);
 $imagepath = $imagepieces[1];
 $thumb=wp_get_attachment_thumb_url($num);
 return $thumb;
 endif;
}

Remplacez ensuite le contenu du modèle YARPP que vous avez choisi par ce contenu :

<?php if (function_exists("icl_register_string")) {icl_register_string("Yet Another Related Posts Plugin","related posts header","Related Posts");icl_register_string("Yet Another Related Posts Plugin","no related posts message","No related posts.");}?>
<?php if ($related_query->have_posts()):?>
  <div class="solcol">
    <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
        <div class="solb">
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
          <img src="<?php $id = $post->ID;$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($id),'seomixthumb');$thumb=$thumbnail_src[0];
            if (!$thumb) {$thumbdirectory = get_bloginfo('template_directory');$thumb= $nothumb.'/images/nothumb.jpg';}
            echo $thumb;?>" alt="<?php the_title(); ?>" class="article-thumb" height="200" width="200">
          <span><?php the_title(); ?></span>
        </a>
      </div>
      <div class="solbe"></div>
    <?php endwhile; ?>
  </div>
<?php else: ?>
  <p>Pas encore d'article similaires</p>
<?php endif; ?>

Attention, vous allez devoir trouver une image par défaut, de la même taille que celle que vous avez défini auparavant. Une fois que vous l’aurez trouvé, vous allez devoir la placer dans le répertoire « images de votre thème sous le nom nothumb.jpg. Cela permet de mettre en place le système des miniatures même si vous n’avez pas associé d’image à votre article, comme dans cet exemple :

2 articles avec une miniature par défaut
2 articles avec une miniature par défaut

Le souci, c’est que vos miniatures n’existent pas encore. Dans ce cas de figure, WordPress va récupérer l’image originale, ce qui pose deux problèmes : d’une part de le poids des images est énorme, et d’autres part vos miniatures vont être pixélisées ou écrasées. Il faut donc forcer WordPress à régénérer toutes les anciennes miniatures. Un autre plugin WordPress fait cela très bien : Regenerate Thumbnails. Installez-le puis demander à WordPress de créer vos miniatures d’articles relatifs. (Dans « Outils » => « Regen. Thumbnails« ).

WordPress regenerate thumbnails
WordPress regenerate thumbnails

Le second problème est que le système de miniature ne fonctionne correctement que si vous avez associez manuellement une image à chaque article. Si vous ne le faites pas, il va récupérer la première image qu’il va trouver dans chaque post, ce qui pose là aussi les mêmes problèmes : le poids des images est trop grand et elles sont écrasées. Il va donc falloir vous rendre dans chaque article puis cliquer sur le bouton « Mettre une image à la une » qui est présent dans un nouveau Widget.

Widget WordPress "Mettre une image à la une"
Le Widget « Mettre une image à la une »

Là, il vous suffit de cliquer sur l’onglet Galerie, de sélectionner l’image que vous désirez utiliser pour vos articles relatifs, puis de cliquer sur « Utiliser comme image à la une ».

WordPress utiliser une image à la une
Associez une image à la une à vos articles

Maintenant que chacun de vos articles possède une image associée, il faut mettre le tout en forme, car le rendu par défaut n’est pas optimal :

Le rendu par défaut de vos miniatures d'articles
Le rendu par défaut de vos miniatures d’articles

Ouvrez le fichier style.css de votre thème WordPress, et ajoutez à la fin ces quelques lignes

.solb,.solbe{
	text-align:center
}
.solcol{
	margin:0.5em 0 1em;
	padding-top:0.2em;
	width:900px
}
.solb{
	display:table-cell;
	margin:0 4px 0 4px;
	padding:6px;width:200px;
	background:#e9f0f8;
	border:1px solid #b2d6ff
}
.solbe{display:table-cell;
	margin:0 4px 0 4px;
	padding:6px;
	width:6px;
	background:transparent
}
.solb:hover{
	background:#b2d6ff
}
.solb a{
	text-decoration:none
}
.solb a span:hover{
	text-decoration:underline
}

Cela va mettre en forme vos différents articles relatifs. Vous pouvez bien entendu adapter ce code selon vos besoins et vos envies. Pour ma part, j’y ajoute un peu de CSS3 pour les navigateurs récents (ombrage et arrondi) :

.solb{
	-moz-box-shadow:0 2px 3px rgba(0,0,0,.4);
	-webkit-box-shadow:0 2px 3px rgba(0,0,0,.4);
	box-shadow:0 2px 3px rgba(0,0,0,.4)
}
.solb{
	border-radius:7px;
	-moz-border-radius:7px;
	-khtml-border-radius:7px;
	-webkit-border-radius:7px
}

Et voilà, le tour est joué. Vous avez désormais un bloc d’articles relatifs pertinents pour les moteurs de recherche et pour vos visiteurs !