Afficher les articles relatifs sous forme de miniature pour votre blog WordPress
Un bon moyen de maintenir le visiteur plus longtemps sur votre site est d’afficher les articles similaires en bas du post. Toutefois, les présenter en liste n’est pas très attractif. Pour remédier à cet inconvénient, la solution est de les afficher sous forme de miniature, nettement plus attrayant et tape à l’œil. Toutes les explications simples et détaillées dans la suite de l’article.
Etape n°1 – Mise en place d’un module d’articles relatifs
Installation des plugins
2 extensions sont nécessaires pour la réalisation de ce tutoriel (cf. Dossier Installation d’une extension WordPress), la première servant de base à la seconde :
Post-plugin Library (27,3 KiB, 216 hits)
Similar Posts (41,0 KiB, 255 hits)
Une fois téléchargés, téléversez-les dans le dossier /wp-content/plugins/ puis activez ces derniers dans l’ordre à partir de votre administration WordPress.
Configuration de Similar Posts
Commencez par dérouler le menuRéglages puis cliquez sur le module Similar Posts. Ouvrez l’onglet dénommé Output et complétez les champs comme suit :
- Output template : c’est ici que l’on va styliser notre liste d’articles similaires et faire appel à un champ personnalisé pour les miniatures ;
<li><a href="{url}"><img src="{custom:Image}">{title}</a></li> - Text and codes before list : si vous souhaitez donner un titre ou afficher un texte avant la liste, c’est maintenant qu’il faut le faire ;
<div id="similar-posts"><h3>Articles relatifs</h3><ul>
- Text and codes after the list : même chose que précédemment, mais cette fois, après la liste ;
</ul></div>
- Default display if no matches : si il n’y a aucun article relatif, vous pouvez soit afficher un texte pour le signaler ou laisser vide ;
- Show nothing if no matches ? : Yes, si vous souhaitez ne rien afficher quand il n’y a pas d’articles similaires ;
Capture d'écran - Output, configuration de Similar Posts
Pour terminer la configuration, n’oubliez pas de sauvegarder les modifications en cliquant sur Save Output Settings.
Création du champ personnalisé
Dans la partie précédente, nous avons indiqué que le plugin devait faire appel au champ personnalisé Image pour générer les miniatures. Il nous faut donc modifier chaque article du site et ajoutez le champ personnalisé Image ainsi que l’URL d’accès à cette dernière.
Pour cela, ouvrez un article via l’administration WordPress. En bas de la page, dans le module Champs personnalisés, cliquez sur le lien Saisissez-en un nouveau. Entrez comme Nom, Image et comme Valeur le chemin d’accès à votre miniature, autrement dit son URL. Pour valider l’opération, cliquez sur Ajouter un champ personnalisé.
Capture d'écran - Ajout d'un champ personnalisé à un article
Réitérez l’opération pour chaque article.
Etape n°2 – Apparence du module final
Création du design de la liste
Si vous vous arrêtez maintenant, votre liste ne sera pas stylisée, ce qui serait dommage ! Dans l’onglet Output de l’extension, nous avons indiqué que la liste devait être encadrée d’une balise DIV nommée « similar-posts ». Nous allons devoir la créer ainsi que tous les styles qui en découlent tels h3, ul, li, etc.
Pour vous facilitez la tâche, vous pouvez copier / coller ces différents styles dans votre feuille de style en cascade (CSS) et les modifier à votre guise par la suite – pour aller encore plus vite, utilisez Firebug !
Pour information, nous utilisons actuellement les styles suivants sur Protuts :
#similar-posts {
float:left;
margin-bottom:30px;
}
#similar-posts h3 {
color:#093E56;
font-size:2em;
margin:1em 0;
}
#similar-posts ul {
margin:20px 0;
padding:0;
text-align:center;
}
#similar-posts ul li {
float:left;
list-style-image:none;
list-style-position: outside;
list-style-type:none;
margin:0 28px 0 0;
padding:0;
width:100px;
color:#1C3E4D;
font-size:12px;
font-weight:bold;
line-height:1.2em;
}
#similar-posts ul li a:hover {
color:#0099CC;
text-decoration:none;
}
#similar-posts img {
padding:0 10px 0 0;
background:#F1F1F1;
border:5px solid #F7F7F7;
height:80px;
margin:0 6px 0 0;
padding:2px;
width:80px;
}
N’oubliez pas de sauvegarder votre feuille de style.
N.B : redimensionnez vos images à la bonne taille pour optimiser le temps de chargement (cf. Guide d’optimisation WordPress). Dans le cas présent, nous avons utilisé des images au format 80px par 80px.
Exemple d’utilisation : le cas Protuts.net
Capture d'écran - Cas concret d'affichage des articles relatifs sous forme de miniature (Protuts)
Remarque : l’utilisateur peut, soit cliquez sur la miniature, soit sur le titre de l’article pour accéder à ce dernier. Pratique non ?
Après avoir essayé des tonnes de plugins différents pour réaliser ce « module », cette solution est vraiment la plus simple et pratique à mettre en place. Petite astuce pour terminer : vous pouvez utiliser le même champ personnalisé pour les miniatures des articles situés à gauche de l’extrait, et celles des articles relatifs. Ainsi, une seule image pour un double emploi : optimisation maximale !
39 commentaires pour “Afficher les articles relatifs sous forme de miniature pour votre blog WordPress”
Laisser un commentaire
Retrouvez des performances optimales sous Windows Vista avec ce guide gratuit réunissant les meilleures astuces pour optimiser Vista.
Télécharger e-Book "Booster Windows Vista"
Télécharger GRATUITEMENT l'ensemble des thèmes packs pour Windows 7 proposés sur Protuts.net.
Accéder aux thèmes
L'équipe Protuts.net a lancé le projet WordPress Channel, LA chaîne des tutoriels WordPress francophone multi-diffusion (iTunes, YouTube, DailyMotion, Facebook).
Accéder à WordPress Channel
J’avais essayer de mettre en place ce système à partir d’un tuto trouvé je ne sais où … et à l’époque impossible de comprendre pourquoi ça ne fonctionnait pas !
Du coup je vais essayer votre méthode et je vous tiens au courant ! Merci d’avance
Il peut être utile de préciser l’activation dans « Placement »
Pour le mettre à la suite d’un article : Output after post: Yes
si l’on veut dans son flux RSS Output in RSS feeds: Yes
Sinon ça marche mais comme il n’y a pas de redimensionnement automatique il est en effet nécessaire de prendre des images de bonnes tailles !
Merci pour le tuto Protuts !
Merci merci pour ce tuto ^^
On peut voir le rendu quelque part ?
@Mealin : merci pour ces précisions !
@Axiol : avec plaisir !
@Mr Xhark : bien entendu, comme indiqué en fin d’articles, en fin de chaque tutoriel.
Ah
j’ai loupé le coche, j’ai scrollé trop vite et cru que c’était les vrais billets relatifs ^^
Et bien moi ça ne marche pas snif!!!
donc OUI j’ai bien mis Image avec une majuscule au I
OUI j’ai activé les plugins
mais NON ça marche pas !!!!!!!!!!!!!!!!!
c’est surement un bout de code qui manque dans index. php ou single
car la configuration de mon blog fait qu’il s’ouvre d’abord sur une page index et affiche ensuite les derniers articles
Si je pouvais avoir une petite aide ça serait bien sympa …..
en tout cas merci pour les tutos
@durdurlecode: Exactement le même problème..
Une âme charitable ?
@durdurlecode @bernard : Pour que je puisse vous répondre plus facilement, inscrivez vous sur le forum (gratuit). Ainsi vous pourriez poster plus facilement vos captures d’écran et morceaux de code sinon cela risque difficile pour vous dépanner.
Merci de votre compréhension
aussitôt dit aussitôt fait, et crois bien que repasserai souvent par ici..très instructif ce site
Au plaisir de te revoir rapidement sur Protuts.net
certainement..au fait çà marche mais le conteneur en lui même ne s’affiche pas..bref, me suis mis à firebug, bien pratique effectivement
S@lut,
Très bon tuto explicatif, ça m’a motivé pour le mettre en application (Un exemple ici)
Petit complément d’infos, il peut être utile d’ajouter
dans le thème à l’endroit choisi (single.php, page.php, etc…)
Ré@gissons, p@rticipons…
@Wolforg : je suis là !
Tu peux m’envoyer un bout de code par mail. J’éditerais ensuite ton commentaire… c’est nulle comme méthode, mais je n’ai jamais trouvé de solution simple pour insérer du code dans les commentaires de WordPress.
@Wolforg : correction effectuée ! Il faut utiliser la balise pre au lieu de code. Et merci pour le lien du plugin que tu m’as envoyé dans le lien.
Pas de souci, je sais bien que tu n’es pas très branché plugins, mais des fois c’est assez utile
Nickel cet article ! Comme beaucoup d’autres sur Protuts dont je me suis inspiré !
Juste une petite remarque pour celui-ci, j’ai dû aller dans l’onglet Placement et mettre Output after post à Yes comme l’a dit Mealin, mais j’ai également dû supprimer le contenu de Parameters car il contenait , ce qui fait que le css prend en compte la class et non l’id…
Je ne sais pas si j’ai su m’expliquer, mais en bref j’ai du vider le contenu de Parameters pour que ça marche
Arff, le commentaire m’a supprimé le code…
Je reprend : …car il contenait
, ce qui fait que…@Shatter : je ne suis pas sur de t’avoir bien saisi tes propos mais au final tout fonctionne pour toi ?
[...] Tous les renseignements disponibles dans ce tutoriel. [...]
[...] de vos article : ne le laissez pas partir ! Et maintenez-le sur votre site en affichant les articles relatifs sous formes de miniatures en fin d’article grâce à Similar Posts. Quand à Post-Plugin Library, il est nécessaire à [...]
[...] Wordpress | 3 954 vues | 12 commentaires Dans la même lignée que l’article « Afficher les articles relatifs sous forme de miniature« , je vous propose aujourd’hui d’utiliser un champ personnalisé pour [...]
Bonjour et merci pour cet article!
Pour ma part, je m’arrache les cheveux, j’arrive bien à avoir les articles en dessous de mes articles, mais y’a rien a faire, pas moyen de réussir a y intégrer les images!
Si quelqu’un pouvait m’aider ou simplement me donner un lien pour un tuto simple à comprendre pour le gros nullos que je suis, j’apprécierais bcp.
Merci d’avance et bonne continuation à protuts!
@Zefulon: Tu peux m’envoyer un lien vers un site de test pour que je constate le code ? Sinon, saisies l’URL complète de tes miniatures, ça vient peut être de là
Tiens moi au courant !
Merci pour cette réponse si rapide!
Voici le lien d’un article ou tu trouveras en bas de la page ce que ça donne quand je met le code….
Arf, oui, je sais, c’est pas l’effet escompté
Je ne vais pas pouvoir longtemps laisser le site comme cela, je pense que tu comprends.
@Zefulon: Heu tu n’as pas mis ton lien dans ton commentaire…
arf, c’est tout moi ça
Le voici: http://zefulon.info/alma-premier-court-metrage-danimation-de-rodrigo-blaas/
@zefulon: Apparemment tu as un problème au niveau du css car le code s’affiche dans tes articles relatifs. As tu bien copié, le code CSS de l’article dans ta feuille de style généralement appelée style.css (en ayant pris soin de bien copier coller le code sans oublier une { ) ? En effet, après inspection de ta feuille de style, ces codes n’y apparaissent pas
[...] Tous les renseignements disponibles dans ce tutoriel. [...]
arf… deja merci.
Ensuite, tu me parle pas chinois, mais presque, je vois bien la feuille de style, mais apres, ou mettre ce que tu me dis exactement? de plus quel est le code css d’un article?
Enfin comme tu peux le voir, je suis un sacré boulet.
J’ai bien essayé, mais rien^^
@zefulon: je vais détailler un max la procédure en étant le plus simple possible ;D :
1. Connectes toi à l’admin WP (jusque là ça va?)
2. Cliques sur Editeur (Onglet Apparence)
3. Cliques sur style.css dans la colonne de droite (en bas généralement)
4. Colles les lignes de l’article tout à la fin après la dernière }
5. Cliques sur Enregistrer (ou sauvegarder)
6. Regardes si ça change quelque chose en prenant soin d’actualiser le cache de ton navigateur (sous Firefox c’est CTRL+R)
Bonjour,
Je bloque a l’ etape 2,
» Nous allons devoir la créer ainsi que tous les styles qui en découlent tels h3, ul, li, etc…copier / coller ces différents styles dans votre feuille de style en cascade (CSS) et les modifier à votre guise par la suite »
de quelle feuille de style?
Celle de « similar-posts »? on colle n’ importe où?
je ne comprend pas ou exactement coller ce code, peut être que quelqu’ un peut m’ indiquer le chemin?
Hello, sinon, tu as ce plugin merveilleux:
http://www.linkwithin.com/learn
Excellent!! Merki!
pas de quoi m’ssieur. Pour ce qui veulent voir ce que ça donne, un ptit tour sur mon blog pour voir tout ça!
C’est une bonne alternative en effet… reste à savoir si cela produit un code bonne qualité.
J’ai l’impression que ton commentaire « Je suis une fille » a disparu…
disparue..