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.

Un bon moyen de maintenir le visiteur plus longtemps sur votre site est d’afficher les articles similaires à celui en cours de lecture. Toutefois, les présenter en liste n’est pas très attractif. Pour remédier à cet inconvénient, une solution consiste à les afficher sous forme de miniatures, nettement plus attrayant et tape à l’œil. Toutes les explications simples et détaillées dans la suite de l’article.

Étape 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, Post-Plugin Library servant de base au plugin Similar Posts :

Similar Posts

Affichez vos articles relatifs en fonction de critères personnalisées dont l'insertion d'une miniature. Nécessite Post-Plugin Library.

Taille : 41,0 KiB  •  Date : 10 avril 2010 •  Hits : 1 851

Post-Plugin Library

Plugin permettant d'offrir un code commun à d'autres extensions WordPress dont Similar Posts. Inutilisable en l'état.

Taille : 27,3 KiB  •  Date : 10 avril 2010 •  Hits : 1 446

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}" alt="" />{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>
    </ul>
    </div>
  • Text and codes after the list : même chose que précédemment, mais cette fois, après la liste ;
  • 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
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 dun champ personnalisé à un article

Réitérez l’opération pour chaque article.

Étape 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.

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 !

47 commentaires

  1. Mealin

    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

  2. Mealin

    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 !

  3. durdurlecode

    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

  4. Benjamin Denis

    @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

  5. Wolforg

    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

    < ?php similar_posts(); ?>

    dans le thème à l’endroit choisi (single.php, page.php, etc…)

    Ré@gissons, p@rticipons…

  6. Aurélien Denis

    @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.

  7. Shatter

    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

  8. zefulon

    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!

  9. zefulon

    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.

    1. Benjamin Denis

      @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

  10. zefulon

    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.

    1. Benjamin Denis

      @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)

  11. gwenm

    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?

  12. Manuela

    Est-ce que cela signifie que pour tous les articles que nous créons, il faut créer une miniature de photo et la glisser dans le dossier image ?
    N’existe-t-il pas un moyen de créer directement une miniature de la première photo insérée dans l’article ?
    Merci pour votre réponse !

    1. Aurélien Denis auteur de l’article

      Il faut que tu utilises de préférence un thème qui supporte la gestion des miniatures.

      Pour ajouter une miniature à un article, 2 méthodes existent :

      1/ Utiliser un custom field Thumbnail ou Image puis indiquez l’URL ;
      2/ Utiliser la fonction d’upload d’image de WordPress puis définir celle-ci en tant que miniature ;

      Dans les 2 cas, j’insiste sur le fait que le thème doit être compatible.

      Évidemment, 2 problèmes apparaissent dès lors :

      1/ Les miniatures doivent être redimensionnées ;
      2/ Aucun automatisme de capture de la première image de l’article n’existe ;

      Ces 2 problèmes peuvent être résolus en passant par un thème premium de chez WooThemes ou ElegantThemes dont les prix sont très accessibles – il en existe certains gratuits.

      Ces thèmes prennent très bien en charge la gestion des miniatures avec le script de mise en cache et de redimensionnement automatique timthumb.php

      Bien souvent, la première image de l’article peut également être utilisée comme miniature, ce qui simplifie encore plus le processus.

      1. Manuela

        Merci Aurélien pour ces infos !
        Toute la première partie me semble être du chinois…
        Et je retiens que c’est plutôt impossible sauf dans le cas d’un thème payant qui facilite bien les choses.
        Ce n’est pas une question de prix, mais j’aime le design de celui que j’ai pris !!!
        Pourquoi un pluggin comme linkwithin arrive à prendre la première image par défaut et à en faire un joli carré (même avec mon thème tout pourri) ??!!

        1. Aurélien Denis auteur de l’article

          Il est possible que le plugin dont tu parles utilise automatiquement la première image.

          Je ne connais pas de plugin de gestion des miniatures depuis que WordPress l’a intégré par défaut…

          Si tu veux apprendre avec WordPress – pour que cela ne soit plus du chinois, lis le codex de WordPress (une petite partie de base est en français, le reste en anglais) ou sinon tu trouveras le dernier bouquin WordPress 3.0 chez Pearson (je devrais le présenter prochainement sur ce site).

  13. Thomas

    Bonjour,

    j’utilise le thème Graphène, et j’ajoute à chacun de mes articles une « image à la une ». Serait-il possible d’utiliser celle-ci pour les miniatures des articles ?

    Au fait, je ne vois plus les images dans les articles relatifs sur votre site. Pourquoi avez-vous décidé de les supprimer ?

    Merci.

    1. Aurélien Denis auteur de l’article

      J’ai supprimé les images pour un souci d’optimisation des performances d’autant plus qu’une petite taille n’est pas forcément très incitatif… Pour répondre à votre question, le module « Image à la une » sert généralement pour les miniatures.

  14. joe

    Bonjour!
    Quelqu’un a peut être déjà posé la question, mais parmis tous vos commentaire je n’ai rien vu…
    Je ne suis pas trés doué, et j’ai suivit le tuto à la lettre, mais je n’ai pas compris ou il fallait copier les style de la dernière étape??
    Pouvez vous m’eclairer?
    Merci!!

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX