Les articles relatifs de WordPress avec YARPP
Pour 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.
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
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
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 :
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) :
<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
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
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_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.
$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 ($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
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
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.
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".
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
Ouvrez le fichier style.css de votre thème WordPress, et ajoutez à la fin ces quelques lignes
.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{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 !
On a plein d'articles à mixer !
Référencer WordPress en 15 minutes
Ouvrir les liens de WordPress dans une nouvelle fenêtre
Voici les thématiques abordées par Les articles relatifs de WordPress avec YARPP:
- Articles relatifs -
- Référencement WordPress -
- SEO Wordpress -
- Thumbnail WordPress
Bruno - Le 19 mai 2011, 10:19
Très très bon article, mais personnellement je n’ai jamais accroché aux systèmes de ce type en automatique, j’utilise un plugin qui me laisse choisir à la main les articles liés.
maniT4c - Le 19 mai 2011, 10:41
Je suis complètement d’accord avec Bruno. Je trouve que tous les articles n’ont pas nécessairement besoin d’être liés à d’autres. Mais pour le coup, pour ceux qui aiment ce genre d’automatisation ce plugin à l’air très puissant !
Brice - Le 19 mai 2011, 12:48
Une bonne description du plugin en effet… Malgré ma préférence pour les hacks qui surchargent moins le serveur, je vais me laisser tenter par celui-ci ^^
Diije - Le 19 mai 2011, 13:06
Customisation très intéressante, merci Daniel :)
@Bruno : c’est quoi ce plugin ?
Pierre - Le 19 mai 2011, 13:09
Excellent plugin je confirme, et merci pour les lignes de code. A quand un test des meilleurs plugins d’affiliation ?
Fabien - Le 19 mai 2011, 14:04
Hello. Je prépare en ce moment un article sur la mesure d’efficacité des articles relatifs et populaires.
Les résultats sont très décevants avec un CTR (sur le bloc complet d’articles relatifs) de 0,7% quand il y a des images et de 0,3% quand il n’y en a pas. Je me demande si ça vaut vraiment la peine de les laisser donc…
Un bémol toutefois : je n’ai pas une audience de grande qualité, et j’ai un nombre de PV/visite très bas de toutes façons (1,6). Quelqu’un à des retours là-dessus ?
Daniel Roch - Le 19 mai 2011, 14:26
@fabien : je n’ai pas encore de données, mais j’effectue le suivi des articles relatifs dans Analytics depuis 2 jours, donc je ne devrais pas tarder à avoir des données.
Après, je conseille toujours d’avoir ce type de module, car même si l’utilisateur n’y fait pas appel, il est très utile pour le référencement et le maillage internet (et c’est là aussi où le plugin YARPP a les meilleurs résultats en termes de pertinence).
4h18 - Le 19 mai 2011, 15:49
EN ce qui me concerne, j’utilise désormais ZigConnect, qui me permet de selectionner les articles à lier.
Cela se fait manuellement, et prend un peu plus de temps. L’avantage ? Le lien est réciproque entre les articles, et d’un point de vue performances, le plugin ne balaie pas toute la base de données pour trouver des articles plus ou moins en rapport.
Finalement, tout les avantages des articles relatifs, sans les inconvénients :)
Daniel Roch - Le 19 mai 2011, 15:55
J’avais justement lu ton article à propos de ZigConnect. C’est vrai que si l’on peut faire manuellement ce travail, c’est mieux. Mais c’est ingérable dans deux cas :
- un blog qui a déjà beaucoup d’articles
- De nouveaux articles qui obligent à revenir sur ceux d’avant pour optimiser les articles relatifs
Cédric G. - Le 19 mai 2011, 16:54
Ahhh un article qui m’a « poussé » à faire une petite mise à jour de mon blog.
J’utilisais jusqu’alors l’excellent Simple Tags (que j’avais laissé en version 1.8 car depuis la version 2.0, Amaury avait supprimé la fonctionnalité « articles relatifs » que je trouvais bien pratique et je n’avais pas trop envie de réinstaller un n-ième plugin)
Du coup j’ai mis à jour Simple Tags et installé YARPP, et bien m’en a pris, car la pertinence n’a… rien à voir :) Merci Daniel !
Pascal CAMLITI - Le 20 mai 2011, 07:53
Excellentes explications et détails de code.
J’ai une question : Est-ce que le cumul de plugin ne ralentissent pas trop le chargement des pages ? Merci
Daniel Roch - Le 20 mai 2011, 09:18
Pour la part, le plugin d’article relatif YARPP ne ralentit pas mes pages, vu qu’il met en cache son calcul (à chaque sauvegarde d’un article)
Jérémy - Le 25 mai 2011, 15:05
Merci pour cet article et son explication détaillée.
Néanmoins j’ai une question existe-il ou peut-on adapter ce plugin pour la gestion de page similaire à la page sur laquelle se trouve l’internaute ?
Merci d’avance pour votre réponse =)
Daniel Roch - Le 25 mai 2011, 18:27
YARPP permet déjà de faire cela avec les différentes pages d’un blog WordPress. Par contre, la réponse est non si tu souhaites faire cela sur un autre CMS. ;)
Jérémy - Le 26 mai 2011, 15:55
Ahhh mais c’est une très bonne nouvelle ça =)
Au niveau du fonctionnement, il y a un réglage différents à faire à quel niveau?
Daniel Roch - Le 26 mai 2011, 18:28
c’est le même code. Il faut juste penser à cocher « Complémentarité croisée entre articles et pages » pour que le plugin YARPP puisse fonctionner partout. ;)
Jérémy - Le 27 mai 2011, 08:33
Ok cool, je me plonge dedans début de semaine prochaine! Merci pour tes tutos!
D’ailleurs j’ai une question (désolé elle est plus en rapport avec l’article) tu utilises un plugin wp pour agrandir tes images?
Daniel Roch - Le 27 mai 2011, 09:09
Je faisais appel à Wp-Fancy Box, mais j’ai codé cet effet directement dans mon thème.
Jérémy - Le 27 mai 2011, 09:25
Ok, c’est une belle réussite =)
Nicolas - Le 13 juillet 2011, 16:42
Hello! J’ai uploadé le plugin dans le répertoire de WP, activé dans la console principale, mais une fois que je vais dans le paramétrage de YARPP, j’ai une page blanche, pas de paramétrages possibles… Est-ce parce que je n’ai pas copié les fichiers « yarpp-template-example.php » (entre autres) dans le répertoire de thème? Please help!
Merci d’avance!
Nico
Daniel Roch - Le 15 juillet 2011, 08:29
On dirait plutôt que le plugin a été mal installé (rien à voir avec les templates donc). Essaie de le supprimer entièrement puis de le réinstaller. Sinon, essaie d’activer le thème par défaut et de désactiver les autres plugins pour voir s’il y a une incompatibilité avec YARPP.
mélisande - Le 26 juillet 2011, 15:02
Bonjour,
Merci ! J’étais en effet bien intéressée par la présentation en vignettes mais en ce qui me concerne ça ne fonctionne pas…
La mise en forme via le .CSS ne donne rien et mes vignettes restent l’une sous l’autre avec le lien à droite…
- J’ai fait le test en local avec une installation vierge de la dernière version de WP + BDD vierge.
- J’ai testé avec les 2 thèmes par défaut de WP 3.2.1 (twentyten, twentyeleven)
- J’utilise Firefox
- Version YARPP : 3.3.1
- Cache Vidé
D’autres rencontrent-ils ce problème ?
Par avance merci,
Mélisande
Daniel Roch - Le 26 juillet 2011, 18:53
@Mélisande : le plus simple serait de nous donner l’url de votre site pour savoir d’où peut venir le problème.
mélisande - Le 26 juillet 2011, 21:44
Bonjour,
Merci pour la réponse.
Oui en effet mais je travaille en local pour le moment.
:os
Mélisande
Daniel Roch - Le 27 juillet 2011, 07:59
Si c’est en local, je ne peux malheureusement rien faire… Êtes-vous sûr de n’avoir manqué aucune étape ?
mélisande - Le 04 août 2011, 12:48
Bonjour,
Je reviens vers vous car il y a une petite chose que je ne comprends pas…
Vous dites d’insérer :
.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}
Mais cette classe .solb elle vient d’où ?
Elle n’est pas appelée par YARPP, si ?
Daniel Roch - Le 04 août 2011, 22:30
Le code que j’avais mis dans l’article avait planté. On y retrouve les fameuses balises manquantes. Encore désolé pour le bug.
mélisande - Le 04 août 2011, 22:40
C’est peut-être pour ça que ça ne fonctionnait pas chez moi… :o))
Je testerai un peu plus tard… Mais à mon avis ça va aller mieux…
Une dernière question : ne faut-il pas un antislash avant le ‘ de la phrase « Pas encore d’article similaires » ?
Pardon pour le dérangement et merci pour votre aide
Mélisande
Daniel Roch - Le 05 août 2011, 09:58
Non, normalement vous n’aurez pas besoin d’Antislash.
Julien - Le 08 août 2011, 20:00
Bonjour !
Dans cette partie :
« Remplacez ensuite le contenu du modèle YARPP que vous avez choisi par ce contenu : »
Je ne trouve pas quel fichier modifier s’il vous plait ?
Merci de m’aider.
Cordialement,
Julien
Daniel Roch - Le 24 août 2011, 11:30
@Julien : Yarrp fournit plusieurs fichiers qui correspondent à différentes mises en page possible. Dans le menu d’administration du plugin, on peut choisir lequel utiliser. Il faut donc regarder lequel a été choisi, puis remplacer le contenu de ce fichier par le code donné dans ce tutoriel.
Firasofting - Le 27 septembre 2011, 17:40
En effet ce plugin est très performant, j’ai beaucoup hésité avant de passer à l’automatisation des articles relatifs (à cause de certains plugins franchement médiocres), mais faut dire que YARRP se démarque de la concurrence.
D’ailleurs merci pour ton article qui m’a convaincu à passer le pas.
Julien - Le 17 octobre 2011, 11:36
Bonjour Daniel,
Je souhaite mettre des pages relatives à des pages (et non à des posts / articles) mais je galère…
La version 3.3.2 que je viens de télécharger ne comporte pas d’option de complémentarité entre articles et pages. Je n’ai donc pas de contenu relatif pour mes pages.
Sais tu comment je peux remédier à ceci ? La 3.3.3b2 propose-t-elle ceci ?
Merci
Daniel Roch - Le 17 octobre 2011, 15:19
Ce menu est bel et bien présent dans la dernière version de yet Another Related Post plugin, mais juste caché… En haut à droite, il y a un bouton « Options de l’écran ». En cliquant dessus, on peut choisir d’afficher certains blocs supplémentaires de YARPP, notamment celui avec les options de complémentarité.
Julien - Le 18 octobre 2011, 12:05
Effectivement, merci beaucoup :)
Gregory ADAM - Le 07 novembre 2011, 11:56
Merci Beaucoup pour ce tuto Daniel !
Dans sa mise en place j’ai rencontré une super toute petite coquille.
Une fois la configuration faite les « related posts » ne ce sont pas affichés comme liens car le « a » et le « href » de la balise sont collés :) (dans le script du YARPP).
Après les avoir décollé et le tunning est réussit !!!!
Daniel Roch - Le 07 novembre 2011, 12:26
La coquille est corrigée. Merci de l’avoir signalée. ;)
Christophe - Le 23 novembre 2011, 19:36
Bonjour,
le plugin a t-il été mis à jour récemment ?
Je viens de l’installer, et je ne vois nulle part dans la partie « réglage » les fonctions complémentarités… comment sélectionner les catégories, tags…
Je n’ai que Réglage de présentation pour le blog et le flux RSS…
Je pensais installer ce plugin sur l’annuaire réalisé avec Directorypress…
Merci de votre aide :)
Daniel Roch - Le 23 novembre 2011, 22:02
Ces deux menus sont toujours présents mais sont cachés par défaut dans la nouvelle version : dans l’admin de YARPP, il faut cliquer en haut à droite sur options de l’écran puis cocher les deux menus en question. J’ai mis à jour mon article pour le signaler. ;)
Christophe - Le 24 novembre 2011, 14:53
Merci !
En route pour le test :)
Christophe - Le 24 novembre 2011, 17:58
Une petite question…
Comment faire apparaître un titre à notre nouveau module ?
Comme sur seomix par exemple. J’ai bien réussi à avoir mes 3 blocks, mais pas de titre…
Alors comment faire et même comment insérer une image dans le titre comme vous vous l’avez fait Daniel ?
Daniel Roch - Le 25 novembre 2011, 09:30
Pour ajouter un titre avant, il suffit de copier un code comme par exemple
ou
Pour ce qui est des images dans les articles relatifs, tout est expliqué dans l’article. ;)
Tech'Paf - Le 21 décembre 2011, 09:59
Merci beaucoup pour la petite astuce permettant d’avoir accès à l’intégralité de la page de configuration de ce plugin (via « options d’écran »).
Sans ça impossible de faire fonctionner YARPP avec les anciens articles de notre site ;)
racharrach - Le 14 mars 2012, 13:25
tout d’abord merci pour ton super site que je viens de decouvrir, et pour cet article sur le plugin yarpp, que je ne connaissais pas non plus.
par contre dans la condition:
if (function_exists(‘related_posts’)) echo related_posts();
il ne faut pas mettre echo car la fonction related_posts() gere deja l’affichage.
en esperant que les prochains ne se prennent pas la tete 1 heure comme moi pour trouver l’erreur.
cordialement.
Daniel Roch - Le 14 mars 2012, 16:01
@racharrach : c’est tout à fait exact. En fait, c’est que le plugin avait auparavant besoin d’un echo pour fonctionner mais depuis les versions plus récentes le plugin YARPP n’en a plus besoin. J’ai corrigé l’article.
Guide du chien - Le 21 mars 2012, 12:16
Bonjour,
Merci beaucoup pour cet article, j’utilisai jusqu’à présent » Related post slider » qui lie les articles uniquement par mots-clés. Avec Yarpp, les possibilités sont supérieurs et surtout, grâce à votre tuto, on peut ajouter des images aux articles liés et modifier à notre guise le design grâce au CSS.
K-rip - Le 11 avril 2012, 09:44
Bonjour Daniel,
Merci pour ce tuto très complet, je ramais depuis plusieurs jours après avoir testé de nombreux plugins sans trouver ce qui me conviendrait… J’avais délaissé YARPP car je n’avais pas remarqué les menus « Le corpus » et « Options de complémentarité », or c’est justement ce dont j’avais besoin.
Je bloque cependant sur un point : vous parlez d’un lien vers un fichier nothumb.jpg qu’il faut remplacer, mais il est absent de votre code. Où dois-je placer ce lien vers mon image ?
Merci d’avance pour votre réponse.
Daniel Roch - Le 11 avril 2012, 13:56
@K-rip : c’était un oubli dans mon code. J’ai corrigé le snippet donné pour afficher une image par défaut. Et merci d’avoir fait remonter le problème.
K-rip - Le 11 avril 2012, 14:52
Merci beaucoup pour votre réponse rapide !
Cependant ce nouveau code ne fonctionne pas chez moi, Firebug m’indique un attribut src= »" vide pour les articles n’ayant pas d’image, et l’attribut src= »/images/nothumb.jpg » pour les articles ayant une image à la une. De plus, mon image nothumb.jpg n’est pas trouvée avec ce chemin relatif (message de Firebug : « Failed to load the given URL », pourtant l’image existe bel et bien).
Je précise qu’avec le code précédent les miniatures s’affichaient correctement pour les articles ayant une image à la une.
Est-ce une erreur dans le code ou un problème de mon côté (peut-être lié au thème) ? Je précise que je n’ai pas installé le plugin Regenerate Thumbnails, je ne sais pas si cela peut avoir une influence.
Merci d’avance et désolé pour le dérangement.
Daniel Roch - Le 12 avril 2012, 08:46
Je viens de corriger le code pour la miniature donc il devrait (enfin) fonctionner.
Pour l’image nothumb.jpg, celle-ci a bien été placée dans le répertoire « images » du thème ?
K-rip - Le 12 avril 2012, 09:42
En fait, c’était votre boucle « if » qui posait problème chez moi. Je l’ai un peu modifiée et ça fonctionne !
if (!isset($thumb)) {
$thumbdirectory = get_bloginfo(‘template_directory’);
$thumb= $thumbdirectory.’/images/nothumb.jpg’;
}
emilien - Le 03 mai 2012, 01:28
Bonsoir,Merci pour ton tuto.
Je suis une quiche monumentale en code. J’ai réussit à faire ce tuto, mais j’aimerai maintenant pouvoir voir les posts relatifs sur des pages et non pas sur des posts. Est-ce possible ?
Daniel Roch - Le 03 mai 2012, 11:05
@Emilien : c’est tout fait faisable. Dans l’administration de Yarrp, il y a une option à activer pour plus de qualité dans les résultats : « Inclure tous les types d’entrées dans les résultats ». Et ensuite, il suffit de copier dans le fichier de template des pages (en général page.php) le même code que celui donné ici pour les article relatifs, à savoir :
Emilien - Le 03 mai 2012, 14:01
merci pour ta réponse.
Il me reste un seul problème.
J’aimerai pouvoir mettre 6 articles relatifs. Pour cela, je dois les disposer sur 2 lignes, car au-delà de trois, les box s’affiche sur la sidebar:
un exemple: http://webodysseum.com/art/the-best-of-google-street-view/
Que faut-il faire ? (j’aimerai pouvoir chercher au lieu de demander, mais j’ai toujours été extrêmement allergique au codage).
Merci encore pour ton aide.
Daniel Roch - Le 04 mai 2012, 10:18
Effectivement, cela dépasse. Pour diviser les articles relatifs de WordPress sur deux lignes, il faut forcer un saut à la ligne au bout du 3ème article relatif. Pour cela, suivez cette procédure :
Juste avant
Après le « ?php » de la même ligne, ajoutez
Juste avant
Ajoutez
Juste avant
Ajoutez
emilien - Le 04 mai 2012, 10:20
Petit complément sur le commentaire du dessus, je voulais dire « au delà de 3 colonnes ».
emilien - Le 04 mai 2012, 10:39
Merci. Ca ne fonctionne pas pour le moment. Voici le code modifié, au cas où j’ai fait une erreur, mais je ne crois pas: pastebin.com/1ur1gxis
Et le résultat sur mon site: webodysseum.com/videos/space-footage-from-nasas-cassini-voyager-missions/
Daniel Roch - Le 04 mai 2012, 11:14
Petite erreur de ma part. Ce n’est pas :
Mais ce code qu’il faut utiliser
emilien - Le 04 mai 2012, 11:51
C’est presque parfait. Encore un petit problème. Au bout de trois posts relatifs, une nouvelle ligne est bien créée mais elle est crée à chaque post (soit 4 lignes pour 6 posts).
Je vous remercie beaucoup pour le temps que vous consacré à mon probème.
Daniel Roch - Le 04 mai 2012, 15:55
Rajoutez
Après
ce qui donnera
emilien - Le 04 mai 2012, 16:50
Parfait ! Merci beaucoup.
Simon - Le 09 mai 2012, 20:56
Bonsoir. Super article comme d’hab que j’avais mis de coté afin de me lancer dans la customisation de YARPP. Seulement aujourd’hui j’ai voulu tenter de customiser YARPP mais la case à cocher pour utiliser les templates est grisée… Je ne peux donc utiliser de template. Y’a t’il quelque chose à faire pour débloquer cette fonctionnalité ? Merci
EDIT : Autant pour moi le problème venait de YARPP il ne voyait pas en quelque sorte le template dans le dossier de mon thème (en local)… Problème résolu en changeant le droit. Je continue donc. A bientôt
Jean-christophe - Le 21 mai 2012, 23:26
Bonsoir,
J’ai beaucoup apprécié cet article hyper complet, néanmoins mes images ne s’affichent pas.
Voici ce que j’ai dans mes articles à l’onglet entrées complémentaires :
Fatal error: Call to a member function get_post_types() on a non-object in /homez.443/arretezd/www/wp-content/plugins/yet-another-related-posts-plugin/class-admin.php on line 237
Serait-il possible de me dire ce qu’il faut faire pour que mes images s’affichent ?
Enfin, comment afficher un texte comme sur votre site du genre « découvrez aussi avant les photos ?
Merci d’avance
Daniel Roch - Le 22 mai 2012, 10:21
Il s’agit malheureusement d’un bu du plugin. L’auteur a publié un correctif en version bêta sur le site officiel de WordPress. Il suffit d’installer la version bêta de YARPP et le problème devrait disparaître.
Arnaud - Le 27 juin 2012, 10:38
Bonjour à tous, cela fait 2 heures que je planche sur YARPP grâce à ton très bon tuto ! Tout marche bien, à part une chose :
je n’arrive pas à faire afficher les images à la une !
Concrètement, voilà ce que j’ai : boxetcoffret.com/makeupline-maquillage/
C’est à dire il m’affiche bien le nothumb.jpg que j’ai mis par défaut, mais il ne veut pas m’afficher les images à la une associées. Si quelqu’un à une idée, je ne vois pas du tout d’où ça viendrait !
Fred - Le 23 juillet 2012, 10:08
Bonjour,
Merci pour ce tuto. J’ai cependant deux problèmes que je n’arrive pas à régler:
- Mes thumbnails font 200×200 pixels (défini dans les paramètres de mon template Elegant Themes « DelicateNews »). Si je modifie le code de functions.php en
add_image_size(‘seomixthumb’, 100, 100, true);
, mon image passe en 100×100 mais est affichée en 200×200, ce qui la rend très moche et ne correspond pas à la taille d’affichage que je souhaite.
- Beaucoup plus gênant, les thumbnails s’affichent bien les uns à côté des autres sous Firefox mais pas sous IE8 (testé sur 2 PC différents) où ils s’affichent les uns SOUS les autres.
Ce serait sympa de m’aider sur ces deux problèmes qui m’empêchent pour l’instant d’utiliser cette fonction. Merci par avance ;)
Daniel Roch - Le 23 juillet 2012, 21:02
@Fred : il faut régéner les miniatures. Pour cela, il faut utiliser un plugin comme Regenerate Thumbnail ou Ajax Thumbnail Rebuilt.
Pour IE8, aurais-tu une URL pour que je puisse tester et corriger ?
Fred - Le 24 juillet 2012, 11:41
@Daniel: merci pour ta réponse rapide.
Pour les miniatures, j’ai :
- modifié leur taille à 100×100 dans Réglages/Médias/Taille des miniatures
- puis j’ai modifié functions.php
- enfin je les ai régénérées avec Regenerate Thumbnails
Le résultat c’est que mes images sont redimensionnées en 100×100 mais affichées dans un cadre en 200×200, ce qui les rend floues. Quand je fais « Informations sur l’image » sur l’une d’entre elles dans FF, ça me dit: « 100px × 100px (redimensionné à 200px × 200px) ». Je me demande si c’est pas un effet de mon thème qui provoque ça. Malheureusement, il n’y a pas de paramétrage dans le thème pour la taille des miniatures …
Pour le 2ème problème avec IE8, voir par exemple: bidouilles-numeriques.com/2012/07/06/tizzbird-f30-jaquettes-manquantes-la-suite/
Entre temps, j’ai modifié le code en suivant certains commentaires précédents, afin de n’afficher que 4 miniatures par ligne pour ne pas dépasser du thème. Ça ça fonctionne bien, mais ça n’a rien changé au fait que IE8 les affiche les unes au dessous des autres.
Merci pour ton aide !
Daniel Roch - Le 25 juillet 2012, 12:35
@Fred : je viens de tester. Cela s’affiche parfaitement sur IE8 chez moi.
Par contre, les images sont bien en 100/100 et redimensionnées en 200/200. Il faut changer
en
Puis regénérer les miniatures.
Fred - Le 25 juillet 2012, 13:48
IE8: c’est incompréhensible, je viens de refaire l’essai sur 2 PC différents avec des versions différentes d’IE8 (8.0.7600.16385 et 8.0.6001.18702) et j’ai bien le défaut sur chacun …! En revanche, sous FF, Opera, Safari ou Chrome, pas de problème.
Miniatures: en reprenant ton code, elle sont bien affichées en 200×200, la définition est de nouveau correcte, mais ça ne prend pas la dimension de 100×100 que je voulais, et ce malgré la modification dans Réglages/Médias/Taille des miniatures. Bon, c’est pas grave, ça restera comme ça !
Par contre pour IE8, un autre lecteur pourrait-il faire le test de son côté ?
Merci ;)
Fred - Le 26 juillet 2012, 10:21
Bonjour Daniel,
Je confirme le défaut sur 2 PC supplémentaires (ça en fait 4 en tout) avec IE8 ! l’un d’entre eux bénéficiait même d’un IE8 tout neuf, on ne peut même pas incriminer du cache ou je ne sais quoi qui viendrait perturber l’affichage.
Bon, je crois que je vais me passer de cette fonctionnalité … dommage.
Je continuerai néanmoins à suivre ton site avec intérêt, j’y ai trouvé plein de choses sympas.
Daniel Roch - Le 26 juillet 2012, 18:17
@fred : pour la taille d’image, il faut aussi changer les CSS. Vérifie que .solb ait bien la valeur width:200px;
Et pour IE8, je viens de tester de chez moi et cela fonctionne parfaitement.
Fred - Le 27 juillet 2012, 09:37
Pour IE8, je pense avoir trouvé l’explication: quand on fait F12 sous IE8 pour entrer dans les outils de développement, dans la barre de menu il faut être en « Mode document: Normes IE8″. Par défaut, ceci est positionné sur « Normes IE7″ et là les miniatures se retrouvent les unes sous les autres. Tu avais dû modifier ton IE8 en conséquence.
Y a-t-il quelque chose que tu puisses modifier dans ton code pour que ça s’affiche correctement en Normes IE7 ? Ceci afin qu’un utilisateur lambda d’IE8, qui n’aura même pas l’idée d’aller modifier ce paramètre, ait un affichage correct.
Petite requête supplémentaire (je sais j’abuse !): je cherche à faire en sorte que les miniatures ne s’affichent pas dans une catégorie spécifique d’articles. Sais-tu comment procéder ?
Merci encore du temps que tu nous consacres ;)
EDIT : Pour le coup de supprimer l’affichage des miniatures dans certains articles: c’est bon je me suis débrouillé avec le plugin « Custom CSS » qui permet d’ajouter du CSS spécifique à l’article de son choix. J’ai utilisé:
.solcol {display: none!important;}
et ça fait l’affaire !
Guilhem GLEIZES - Le 30 août 2012, 09:57
Help
Je viens de finir de configurer YARPP mais chez moi la case Utiliser un modèle personnalisé reste grisé ?
Comment faire ?
Daniel Roch - Le 30 août 2012, 14:30
@Guilhem : il faut auparavant copier les fichiers de template de YARPP et les placer dans le répertoire du thème. C’est expliqué dans l’article. ;)
Guilhem GLEIZES - Le 30 août 2012, 18:22
Merci
Nickel … je suis passé trop vite sur l’article ;-)
ouvrela - Le 03 septembre 2012, 19:43
Bonsoir,
Les modifications fonctionnes parfaitement pour les articles mais j’ai un couic avec les sous catégories où là les modifs ne fonctionnent pas correctement.C’est a dire que le lien est là mais pas l’image … pour voir : ouvre-la.com/jeux-paralympiques/607
une idée , une piste ? merci
cordialement
Daniel Roch - Le 04 septembre 2012, 12:09
Il semblerait que vous ayez réussi à corriger de vous même le problème des images manquantes dans vos articles relatifs. ;)
ouvrela - Le 04 septembre 2012, 14:47
Effectivement quelques erreurs modifiées
merci encore
Laetitia - Le 21 septembre 2012, 23:19
Bonjour,
Merci pour cet excellent tuto que je viens de mettre en place sur mon blog et ca fonctionne nickel.
Etant nulle en programmation, j’aimerai juste ajouter un titre (Articles similaires) au dessus des images… mais je ne sais pas ou ni omment faire cela !
Merci de votre aide
Daniel Roch - Le 23 septembre 2012, 12:11
@Laétitia : j’ai mis à jour l’article pour l’ajout d’un titre au dessus des articles relatifs. ;)
Laetitia - Le 23 septembre 2012, 14:30
@Daniel Roch : Merci beaucoup. En effet c’est très simple il suffit d’y penser :-)
Matthieu - Le 08 avril 2013, 21:23
Hello Daniel, déjà merci pour tous ces articles :D
Ensuite, j’allais dire que j’avais un pb mais j’ai réussi à le résoudre… Bref, j’en profite pour te dire que j’ai vu une petite faute dans la paragraphe « Réglages de présentation pour le site » : « vous pouvez cochez l’option » => « vous pouvez cocher l’option »
Merci encore :-)
Daniel Roch - Le 09 avril 2013, 09:34
C’est corrigé ;)