😊Hello, -20% sur le Thème WordPress DIVI d'ElegantThemes.com 🔥

Afficher les articles similaires en image et sans plugin !

Voici une petite astuce qui vous permet d’afficher en bas de chaque articles ou pages les miniatures des articles traitant du même sujet ; un module « Articles similaires ». Ce module est particulièrement utilisé pour optimiser le trafic d’un blog, pour atteindre le visiteur afin qu’il soit capté et ainsi faciliter la naviguation dans le contenu de votre blog. En y ajoutant une image, ce principe peut être multiplié par 10.

Ce module fonctionne grâce à un bout de code que je vous avais publié ici ;
Lire : Afficher les miniatures des articles de votre blog. Ce code récupère la première image que vous avez envoyée sur votre serveur pour illustrer votre article ou votre page. Cependant, il faudra configurer la taille des miniatures dans les réglages de WordPress.

La bonne méthode

Pour afficher les articles similaires en image, il vous suffit de coller le code suivant, là où vous souhaitez apparaitre ce nouveau module. Une fonctionnalités regroupant beaucoup de lignes de codes, mais cela vous permet, selon les mots-clefs de vos articles d’afficher les relations. Nous avons ajoutés une fonctionnalité pour afficher l’image de présentation des articles. Entièrement personnalisable, il vous suffit de modifier la présentation pour avoir le résultat voulu.

[php]
< ?php $backup = $post; //Sauvegarde des objets $tags = wp_get_post_tags($post->ID);
$tagIDs = array();
if ($tags) {
$tagcount = count($tags);
for ($i = 0; $i < $tagcount; $i++) { $tagIDs[$i] = $tags[$i]->term_id;
}

$args=array(
‘tag__in’ => $tagIDs,
‘post__not_in’ => array($post->ID),
‘showposts’=>4,
‘orderby’=>rand
);

$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post();
?>

< ?php global $post; $args = array( 'post_type' => ‘attachment’,
‘post_mime_type’ => ‘image’,
‘numberposts’ => 1,
‘orderby’ => ‘menu_order’,
‘order’ => ‘ASC’,
‘post_parent’ => $post->ID
);

$images = get_posts($args);
?>

< ?php // 4. Loop through the images and show them if($images) { foreach($images as $image) { echo wp_get_attachment_image($image->ID, $size=’medium’);
}
}
else
{
echo  »;
}
?>

 » rel= »bookmark » title= »Lire l’article : < ?php the_title_attribute(); ?>« >< ?php getpostgk_img($post->ID); ?>

< ?php endwhile; } } $post = $backup; wp_reset_query(); ?>[/php]

Comme dit plus haut, voici une petite astuce pour inclure un fichier de votre dossier thème dans single.php ou n’importe qu’elle autre fichier. Si par exemple le fichier contenant le code précédant s’appelle « related.php », nous allons utiliser cette fonction. (Uniquement pour ceux qui veulent un code propre)

[php]
< ?php include (TEMPLATEPATH . "/related.php"); ?>
[/php]

Partager sur facebook
Facebook
Partager sur whatsapp
WhatsApp
Partager sur linkedin
LinkedIn
Partager sur twitter
Twitter

Allez plus loins

64 réponses

  1. Merci pour la précédente réponse sur le problème de colonne !

    Là je suis parvenu à mettre une bordure autour de mes miniatures, mais je ne parviens pas à trouver comment ajouter un espace entre l’image et la bordure, donnant ce rendu « polaroid » (comme sur la bannière). Est ce avec du cellpading ou du genre ou pas du tout ?

    1. Hum, non ce n’est pas possible… il faut alors utiliser les champs personnalisé, mais c’est une autre histoire. Tu peux par exemple uploader vite fait une image dans ton article, sans pour autant l’afficher dans l’article…. En effet, le code récupère l’image stocké dans la bibliothèque de l’article.

  2. Merci pour ton article ;)

    Ca marche bien et c’est beaucoup plus sympa d’afficher des petites miniatures qu’une liste de liens dans la même catégorie. Et le tout sans
    plugin !

  3. Très utile ! ça rend toute de suite plus attrayante cette liste de lien relatif … hormis que moi aussi j’ai la plupart de mes illustrations d’hébergée sur le net et non sur mon serveur (pas une place illimité).

    Du coup, je vais essayer d’uploader une miniature à chaque fois mais, si quelqu’un avait la solution pour le faire en champs personnalisés je suis preneur :P

    Merci pour cette astuce en tout cas, y a toujours plein de geekeries intéressantes ici :)

  4. Super ! Excellente astuce. C’était la grosse galère pour avoir ce résultat avec des plugs in qui ne fonctionnaient pas vraiment sur WP.

    Par contre j’ai une petite question : serait-il possible d’ajouter le titre de l’article lié en dessous des images ?

    Est-ce que ça serait abuser de te demander ton css ? (juste pour l’utiliser comme base)

    Bonne continuation et félicitations

    1. Pour le CSS, je l’ai plus désolé, mais il suffit de mettre dans la classe de t’a div .img, un margin, pour espacer les images.

      Pour le titre de l’article c’est très simple : < ?php if ( get_the_title() ) { the_title(); } else { echo "Aucun nom d'article"; } ?>

  5. Merci Valentin

    Pour avoir l’image, le titre et un extrait, voici dc le code :lol:

    post_content);
    $excerpt = getWords($mycontent, 45);
    $a_title = $excerpt . "..."; ?>

    <a rel="nofollow" href="" title=" ">ID); ?>
    <a href="">

  6. Je préfère de loin « Similar Post » et « Post Plugin Library » qui restent avant tout les meilleurs plugins pour afficher des liens similaires. Malgré qu’ils ne soient pas rendus « compatibles » avec WP 2.7.*, je suis entièrement satisfait de ces plugins.
    En espérant que WP intègre ces fonctionnalités dans ses prochaines versions, tout comme la possibilité d’insérer ses smileys au-dessus de la zone des commentaires sans être obligé par une extension.

  7. Bonjour,
    je rencontre un problème avec ce code. Cela ne m’affiche pas les articles similaires mais les derniers articles de la même catégorie. Comment rendre les articles similaires aléatoires ?

    Merci d’avance :)

    Cordialement Batou

  8. Oui enfin je n’ai rien changé à avant et les images apparaissaient avant mais plus maintenant. Je n’ai aucun code d’erreur et j’ai bien recopié le code. Je n’ai pas pris la méthode de l’include mais celle où j’ai mit directement le code php dans le fichier single.php . (j’ai deux images part articles une de 125×125 et une autre de 500×375)

      1. Merci , tout à fait, l’erreur est humaine :)
        Par contre il y a toujours le problème de l’ordre, il m’affiche toujours
        les derniers articles de la catégorie :s

    1. Oui je sais bien mais les articles affichés sont toujours les derniers articles de la même catégorie, mais tous mes articles dans une catégorie ont un tag en commun donc c’est pour ça je ne comprends pas trop il m’affiche les derniers articles avec les tags en communs :s

    1. D’accord, je n’y avais pas pensé et je doit dire que c’est vraiment pas mal ! Surtout pour faire baisser le taux de rebond ! Vu que les articles sont aléatoire à chaque visite !

      La fonction est à jour et permet maintenant d’afficher les articles similaires aléatoirement et selon les tags suivit d’une image ;) Sans plugin ;)

      1. Ca marche nickel maintenant :)
        J’espère que ça en aidera d’autres, en tout cas votre blog est génial ;)
        A ou autre chose, si tu retrouves ton CSS de ton exemple, fait m’en part ^^ il m’intéresse :) (je suis nul de chez nul pour le css :s)

  9. Bonjour,

    Voilà mon problème, j’ai ce message d’erreur :

    Fatal error: Call to undefined function getpostgk_img() in /home/site1817/web/www/wp-content/themes/……/articles_similaires.php on line 19

    J’ai l’impression qu’il ne peut pas récupérer l’image !

  10. En effet j’ai bien renseigné le fichier « functions.php !

    En fait qu’en j’enlève ça de « single.php » : getpostgk_img($post->ID); Je n’ai plus d’erreur mais rien qui s’affiche !

    Merci pour la rapidité de réponse :)

    1. Vérifie bien que la fonction « getpostgk_img » est bien entre les < ?php et ?> du fichier fonctions.php. Si tout est bon : la fonction dans le bon fichier, et si tu appel bien le nom de la fonction dans ton single.php tout devrait fonctionner… :/

      Tiens moi au courant si tu a une erreur, copie la dans ton prochain commentaire par exemple

  11. Salut Valentin ! Super site encore au passage, j’aime trouver de joli plugin continu ainsi !

    Bon j’ai une question pour toi en espérant que tu saches me répondre.

    J’utilise déjà un code dans mes articles pour générer des miniatures que j’appel « screen »

    J’ai testé ton code cela marche bien mais j’ai besoin maintenant d’un coup de pouce :

    1/ Comment utiliser mes images « screen » ?

    2/ Comment redimensionner les images à 120×120 par exemple ?

    3/ comment afficher l’image avec un « alt » qui donne le nom de l’article ?

    4/ comment afficher les 5 images suivit des 5 titres des articles juste en dessous ?

    Merci d’avance !

    1. Salut,
      En fait le code en lui-même affiche les articles similaires, mais d’une façon aléatoire. Tu peux modifier la variable « orderby ».

      Pour afficher t’es images personnalisés « screen », il faudrait complèter ce code pour afficher la miniature si aucune variable « screen » n’est trouvé.
      < ?php $values = get_post_custom_values("screen"); if (isset($values[0])) { ?>
      < ?php $values = get_post_custom_values("screen"); echo $values[0]; ?>
      < ?php } ?>

      Pour re dimensionner t’es images tu peux utiliser le plugin « Regenerate Thumbnails. Tu pourras, mettre la taille des miniatures en 120x120px

      Pour l’étape trois, je te conseille également le plugin « WP Smart Image (fr) » Il te permet de gérer les miniatures de ton blog.

      Et pour t’a sixième question, il te suffit de mettre la fonction « title » de wordpress dans la boucle. Remplace le loop par celui-ci

      < ?php the_title(); ?>
      < a href="" rel="bookmark" title="Lire l'article : < ?php the_title_attribute(); ?>">< ?php getpostgk_img($post->ID); ?>

  12. merci pour ces précisions !

    Je me doutait bien du Orderby mais je ne sais pas quoi mettre pour qu’ils s’affichent dans l’ordre de mon 2e plugin (similar post)

    pour le code PHP que tu me donnes, je dois l’intégrer dans related.php je suppose ? comment mettre une image « défaut » quand aucun « screen » n’est trouvé ?

    vu que tu parle de plugin de gestion image, as tu une idée pour que je remplisse la partie « screen » contenant une url d’une image depuis Live Writer ? J’ai un doute sur la faisabilité car en général la partie Screen attend un URL (et Live Writer entre des URL temporaire jusqu’a envoi de l’article)

    Enfin tu me parles de : sixième question, de quoi parles tu ?

    Merci de ton aide c’est sympa de ta part :)

    1. Je me suis trompé ^^ Je voulais dire « Pour ta quatrième question »…

      Concernant la fonction orderby, il te suffit de supprimer l’attribut pour avoir un ordre normal.
      Le code que je t’ai donné doit remplacer le code suivant : < a href="" rel="bookmark" title="Lire l'article : < ?php the_title_attribute(); ?>">< ?php getpostgk_img($post->ID); ?>< /a>

      Pour mettre une image par défaut, je n’en est aucune idée. Le plugin sert avant tout a personnalisé l’affichage des images de tes articles. Tout est automatique. Il te suffit simplement de suivre les codes php donné dans la partie « Paramètres ».

      Tu peux choisir différentes options, une pour chaque image ou plusieurs combinaisons pour un max de personnalisation

  13. Pour ma part je n’arrive pas à le mettre en fonction.

    Quand j’insère le première gros code dans fonction.php le blog ne fonctionne plus et me sort une erreur :

    Warning: Cannot modify header information – headers already sent by (output started at /homepages/45/d205945162/htdocs/pow/wp-content/themes/pow/functions.php:78) in /homepages/45/d205945162/htdocs/pow/wp-includes/pluggable.php on line 850

      1. Je viens de désactiver un plugin qui ne me servais pas « Clic Tag » et il n’y a plus de problème. Par contre je ne vois pas d’image en bas de mon post.

  14. Tu as bien mit « < ?php getpostgk_img($post->ID); ?> » dans le loop des articles similaires ?

    Je doit te préciser que le code utilise les tags et les miniatures des images enregistré dans chaque article.

    1. Pour ce qui est de « ID); ?> » je le met dans le single.php ?

      Pour ce qui est des articles aucun n’est tagué. est-il possible qu’il ce base plutôt sur les mots contenu dans les titres ?

  15. :) Salut Val, 2 remarques:

    1)regardes ta phrase « pour la récupération de l’ID de l’article l’article et ainsi généré la liste des articles similaires grâces aux catégories« , elle prête à confusion (le mot article 2 fois de suite, tu te réfère aux catégories, alors qu’il s’agit des tags – si j’ai bien compris ta démarche.

    2)Je n’utilise que les catégories, j’ai donc modifier en conséquence ton code (Cf. plus bas), ça marche très bien, thubnails et tout, sauf que le code me tire à chaque fois les 2 mêmes articles, quelque soit le nombre d’articles demandé (je teste pour l’instant en Local, avec EasyPhp

    3) Késaco?

  16. Bonjour,

    Excellent article et très facile à mettre en place, cependant j’ai un conflit avec ma page functions.php.

    Quand je rajoute ton morceau de code je n’ai plus accès à mon interface d’administration, le problème c’est que je ne m’y connais pas du tout.

    Pourrais-tu me donner un ptit coup de main ? je travaille en local mais je peux envoyer mon fichier functions.php par mail si ça peux faciliter.

  17. Bon ben j’ai essayé plusieurs réglages mais c’est lié entre le fichier related.php ET functions.php. C’est à en perdre la tête ! Si une âme charitable peut m’aider dans ma démarche je suis preneur.

  18. Salut,

    Moi j’ai beau rentré le code dans le fichier function.php et single.php je fais un tour sur mon blog, rien ne change..

    Pourrai tu m’éclairer stp ?

    J’ai voulu également affiché le nombre de fois qu’un article est vu en entrant un bout de code mais la aussi rien n’a changé.

  19. Ah ben, je ne vois pas mon commentaire ? Oui, je l’utilise sur presque tous mes sites … et je l’ai traduit :-) Il me semble qu’il gère même les images externes maintenant et peux gérer les champs personnalisés. Il est vraiment très bien :-))

    1. Tu devrais les voir maintenant. Je viens d’améliorer le module commentaire ;p. Réponse dynamique (qui ne marchait pas avant, bizarre) par exemple. Oui j’ai vu que tu l’avais traduit ! Il est dans notre catégorie « Traduits » je crois.

      Merci à toi :)

  20. C’est très bien effectivement, mais moi qui débute dans le code et qui connait bien wp, dans quel fichier et à quel endroit dois-je mettre le premier bout de code que tu donne ? dans quel fichier dois-je le glisser pour que ce module s’ajoute sous les articles (le plus bas possible)
    (j’utilise le thème TheSource par elegant thèmes)

    Merci

  21. Salut,

    merci pour cet article, maintenant est il possible de faire la même chose, mais en tenant compte des mots présents dans les titres? Car je n’utilise pas les tags et dans mon activité il serait intéressent d’afficher des articles en fonctio des titres.

    cdlt

  22. Bonjour, je suis un peu perdu. Quelle méthode convient-il d’utiliser? Si c’est ‘la bonne méthode’, il suffit juste de coller le premier code dans le single.php? Faut-il aussi modifier le fichier functions.php si on utilise cette méthode?
    Merci.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

👋 Hello,

Bienvenue sur BlogInfos.com !

Vous allez bientôt être redirigé vers notre partenaire ElegantThemes.com

Si vous ne souhaitez pas être redirigé vers notre partenaire et accéder à l’article, cliquez sur Fermer Maintenant.

FERMER MAINTENANT

DIVI - THÈME WORDPRESS

-20%

👋 Le site ElegantThemes.com propose une réduction de 20% et elle ne sera disponible que pendant quelques temps. Ne manquez pas ça !

En cliquant sur le lien « Fermer Maintenant » vous acceptez d’aider ce site et d’être redirigé vers notre partenaire ElegantThemes.