Souhaitez-vous afficher une liste d'articles similaires sur votre site WordPress et préférez utiliser du code plutôt qu'un plugin ?
Chez WPBeginner, nous soulignons souvent l'importance d'engager votre audience et de la maintenir à l'exploration de votre contenu. Une stratégie efficace que nous avons vue utilisée sur d'innombrables sites WordPress réussis est l'affichage d'articles similaires.
Lorsque les visiteurs de votre blog ont fini de lire un article qui les intéresse, proposer une liste d'articles similaires les maintiendra engagés et les aidera à trouver du nouveau contenu à lire.
Dans cet article, nous vous montrerons comment afficher des articles similaires avec WordPress en utilisant du code, sans aucun plugin requis.
Pourquoi afficher des articles similaires dans WordPress ?
Lorsque votre blog WordPress commence à grandir, il peut devenir plus difficile pour les utilisateurs de trouver d'autres articles sur le même sujet.
Afficher une liste de contenu similaire à la fin de chaque article de blog est un excellent moyen de garder vos visiteurs sur votre site et d'augmenter les vues de page. Cela aide également à améliorer la visibilité de vos pages les plus importantes en affichant votre meilleur contenu là où les gens peuvent facilement le trouver.
Si vous n'êtes pas familier avec le code, il vous sera plus simple de choisir l'un des nombreux plugins d'articles similaires pour WordPress qui peuvent afficher des articles similaires sans code.
Mais, si vous vous êtes déjà demandé si vous pouviez afficher des articles similaires sans utiliser de plugin, nous allons partager deux algorithmes différents que vous pouvez utiliser pour générer des articles similaires avec des miniatures en utilisant uniquement du code :
- Méthode 1 : Comment afficher des articles similaires dans WordPress par tags
- Méthode 2 : Comment afficher des articles similaires dans WordPress par catégorie
- Guides d'experts sur les articles similaires dans WordPress
Note : Si vous souhaitez afficher une miniature avec chaque article similaire, assurez-vous d'abord d'ajouter une image à la une à ces articles.
Méthode 1 : Comment afficher des articles similaires dans WordPress par tags
Un moyen efficace de localiser du contenu similaire est de rechercher d'autres articles qui partagent les mêmes tags. Les tags sont souvent utilisés pour se concentrer sur les détails spécifiques contenus dans un article.
Dans cet esprit, vous pourriez vouloir ajouter des tags communs aux articles que vous souhaitez relier entre eux. Vous pouvez les saisir dans la boîte « Tags » de l'éditeur WordPress.
Une fois que vous avez ajouté des tags à vos articles, la prochaine étape consiste à ajouter le fragment de code suivant au modèle single.php de votre thème.
Si vous avez besoin d'aide pour ajouter du code à votre site, consultez notre guide sur comment coller des extraits du web dans WordPress.
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>5, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
Ce code recherche les balises associées à une page, puis exécute une requête de base de données pour récupérer les pages avec des balises similaires.
Où devez-vous placer le code ? Cela dépend de votre thème, mais dans la plupart des cas, vous devriez pouvoir coller le code dans le modèle single.php de votre thème, après le message principal et juste avant la section des commentaires.
Si vous utilisez le thème Twenty Twenty-One, comme nous le faisons sur notre site de démonstration, un bon endroit pour coller le code est dans le fichier template-parts/content/content-single.php, après l'en-tête et juste après <?php the_content();.
Cela affichera automatiquement du contenu similaire sur n'importe quel article WordPress.
Vous devrez modifier le style et l'apparence de vos articles similaires pour qu'ils correspondent à votre thème en ajoutant du CSS personnalisé.
Astuce : Au lieu de modifier les fichiers de votre thème, ce qui pourrait endommager votre site web, nous vous recommandons d'utiliser un plugin d'extraits de code comme WPCode.
WPCode permet d'ajouter du code personnalisé en toute sécurité et facilement dans WordPress. De plus, il est doté d'options d'insertion qui vous permettent d'insérer et d'exécuter automatiquement des extraits à des emplacements spécifiques de votre site WordPress, comme après un article.
Pour plus de détails, consultez notre guide sur comment ajouter du code personnalisé dans WordPress. Vous pouvez également consulter notre avis détaillé sur WPCode pour en savoir plus sur le plugin.
Méthode 2 : Comment afficher des articles similaires dans WordPress par catégorie
Une autre façon d'afficher du contenu connexe est de lister les articles qui se trouvent dans la même catégorie. L'avantage de cette méthode est que la liste des articles connexes ne sera presque jamais vide.
Comme pour la méthode 1, vous devez ajouter un extrait de code au modèle single.php de votre thème ou dans un plugin d'extraits de code comme WPCode. Pour plus de détails, reportez-vous à la méthode 1 et à notre guide sur comment ajouter du code personnalisé dans WordPress.
$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
Vous verrez maintenant une liste de contenu connexe en bas de chaque article.
Si vous souhaitez modifier le style et l'apparence de vos pages liées, vous devrez ajouter du CSS personnalisé pour qu'il corresponde à votre thème.
Guides d'experts sur les articles similaires dans WordPress
Vous souhaitez en savoir plus sur l'affichage des articles similaires dans WordPress ? Consultez ces tutoriels utiles sur les articles similaires :
- Comment afficher les articles similaires dans WordPress (étape par étape)
- Comment afficher les articles similaires du même auteur dans WordPress
- Comment afficher les articles récents dans WordPress
- Comment afficher les articles récents d'une catégorie spécifique dans WordPress
- Comment ajouter des articles similaires en ligne dans les articles de blog WordPress
- Comment afficher des articles aléatoires dans WordPress
- Comment afficher les pages similaires dans WordPress
Nous espérons que ce tutoriel vous a aidé à apprendre comment afficher des articles similaires avec des miniatures dans WordPress sans plugins. Vous voudrez peut-être aussi apprendre comment suivre les visiteurs de votre site WordPress, ou consulter notre liste de 24 astuces pour accélérer votre site web.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
imranhunzai
Absolument génial ! et oui, ça aide.
8MEDIA
amazing post ,, thanks
shaileshtr
C'est bien d'afficher des articles similaires dans un blog WordPress sans plugin. Cela consommera moins de bande passante et de temps de chargement. http://shareitto.com Merci pour votre suggestion.
zioneyemedia
J'ai une question à ce sujet : Je me bats avec le code pour capturer les articles des catégories enfants par rapport aux catégories parentes. Des conseils ?
AmandaLong
C'est génial... Merci !
dustinporchia
J'essaie d'utiliser les articles similaires par catégorie et j'ai remarqué que vous avez dit que le code devait venir avant les commentaires dans la boucle principale. Dans mon code, je veux que les articles similaires viennent après les commentaires dans la boucle. Quand je fais cela, je remarque que mon plugin de commentaires Disqus prend plus de temps à charger maintenant. Est-ce à cause d'une erreur avec les commentaires ou est-ce normal ?
dustinporchia
Laissez tomber… je suis passé à livefyre car c'est plus ce que je recherche dans un système de commentaires de toute façon… merci !
subzerokh
s'il vous plaît
quelqu'un pourrait-il aider un débutant comme moi à personnaliser ce script afin qu'il affiche les articles similaires de manière horizontale ?
de gauche à droite..
au lieu de les afficher actuellement de haut en bas, verticalement...
zioneyemedia
Salut,
La façon dont je l'ai fait est de remplacer les codes et par mon propre html et css. Les codes créent des listes pour chaque article, et cela se fait généralement de manière verticale.
——————
<a href="” rel=”bookmark” title=””> <a href="” rel=”bookmark” title=””>
——————
J'ai remplacé l'ouverture par et j'ai remplacé la fermeture par comme mes balises html. Ensuite, j'écris mon CSS pour qu'il corresponde aux besoins de cette classe div spécifique sur votre site Web. Par exemple, une classe pleft d'exemple pourrait ressembler à ceci :
.pleft {float:left; padding:2px; margin:10px; width:278px; height:190px;}
J'utilise le sélecteur float: dans mon CSS pour déplacer les articles horizontalement, et les marges et le padding pour donner à chaque article un espacement entre eux. J'ai ajouté une largeur et une hauteur spécifiques pour des exemples supplémentaires.
J'espère que cela vous aide.
Simos
@zioneyemedia merci !
gcog
J'ai bien des tags similaires, mais quand j'ajoute le code, je ne vois rien. De plus, lorsque j'ajoute votre code pour restreindre à un type d'article personnalisé, cela me donne une erreur. J'ai bien changé le type d'article pour mon type d'article spécifique.
subzerokh
@wpbeginner bonjour
merci pour votre réponse rapide...
mais je suis un vrai novice dans tout ce que vous dites..
pouvez-vous me donner un petit exemple ?
pour les rendre horizontaux comme sur votre propre blog ?
peut me contacter par mon e-mail : khiloc at gmail dot com
wpbeginner
@subzerokh Il faudrait modifier le style. Ce n'est pas si difficile. Il suffit d'encapsuler chaque article dans une div. Spécifiez une largeur pour cette div, puis définissez une propriété float left. Ajustez les marges et autres, et voilà.
subzerokh
bonjour à tous !! merci pour ce script merveilleux !!
C'est la seule chose que j'ai trouvée qui fait exactement ce que je voulais !!!
Mais il affiche les articles similaires de manière verticale (de haut en bas)
Je voudrais que ce soit affiché de gauche à droite (horizontalement)
Comment faire s'il vous plaît ??
ConnectIndia
Erreur Erreur fatale : Appel à la fonction indéfinie the_post_thumbnail() dans /home/connec92/public_html/wp-content/themes/weekly/single.php à la ligne 59 Quelqu'un peut m'aider. site web http://www.connectindia.co.in
xavpro
salut,
excellent article ! peut-être pourriez-vous m'aider :
j'ai une miniature automatique si aucune n'est définie,
if ($thumb_array[‘thumb’] == ”) $thumb_array[‘thumb’] = ‘lien vers votre image miniature par défaut’;return $thumb_array;
maintenant, ma question est de savoir comment définir une miniature pour chaque catégorie, qui sera utilisée si aucune n'est définie dans l'article.
dehahs
fonctionne bien, merci de partager !
AdnanAsif
Salut
merci pour votre excellent article..
Mais y a-t-il un moyen d'obtenir les articles par catégories mais pas en ul et li et pas en miniature..
Je veux dire que les articles complets s'affichent dans les articles liés.. tout comme sur la page d'accueil, avec un lien lire la suite.
merci
j'attends votre réponse..
AdnanAsif
Salut
merci pour votre excellent article..
Mais y a-t-il un moyen d'obtenir les articles par catégories mais pas en ul et li et pas en miniature..
Je veux dire que les articles complets s'affichent dans les articles liés.. tout comme sur la page d'accueil, avec un lien lire la suite.
merci
j'attends votre réponse..
ibadullah25
Puis-je avoir un CSS pour cela s'il vous plaît
Personnel éditorial
Le CSS que nous avons utilisé était pour le site d'un client. Vous pouvez ajouter votre propre CSS sur la façon dont vous souhaitez afficher cela.
Admin
titusmagnet
Merci.. je cherche ce genre de code
jaffa
C'est génial, exactement ce que je cherchais. Je me demande cependant, comment pourrais-je combiner les deux ci-dessus et s'il n'y a pas de tags, alors il affiche les articles de la même catégorie ?
J'essaie de comprendre mais je n'avance pas beaucoup pour l'instant
nikbanks
Merci pour le code, ça a fonctionné mais comment puis-je le styliser ? Je voudrais qu'il y ait 4 articles côte à côte comme les vôtres. Sur mon site, ils sont affichés un par-dessus l'autre et non comme les vôtres.
Personnel éditorial
C'est du CSS. Nous n'utilisons pas ce code pour afficher les articles similaires. Deuxièmement, je pense que vous parlez des articles mis en avant dans notre barre latérale. Nous avons écrit un autre article à ce sujet sur notre site.
Admin
Coolguy
y a-t-il un moyen d'afficher les miniatures dans les articles liés sans utiliser d'images mises en avant ou de miniatures d'articles ??
c'est-à-dire utiliser n'importe quelle image utilisée dans l'article...
Personnel éditorial
Oui, vous pouvez utiliser les techniques de repli partagées par d'autres développeurs qui récupèrent la première image de l'article. Mais nous recommandons d'utiliser les miniatures d'articles WordPress...
Admin
Hetal
Merci pour cet article. Je me demandais s'il y avait un moyen d'étiqueter automatiquement les articles sans avoir à les saisir manuellement.
Personnel éditorial
Non, vous devez étiqueter chaque article manuellement.
Admin
Sisko
Génial !
Et si je veux afficher les articles liés par catégorie sans miniatures ?
Merci
Personnel éditorial
Just remove the thumbnail code from the code above
Admin
Terry
Merci pour ce tutoriel, il m'aide beaucoup.
Adrian
Salut... Je voulais juste dire que je construis mon site WordPress à partir de zéro et que ce code fonctionne parfaitement pour moi avec WP 3.1... Tout ce que j'ai à faire maintenant, c'est de styliser le CSS et d'obtenir des miniatures pour les articles. Merci pour votre aide avec le code.
new car release
merci, je cherchais ce hack depuis si longtemps et vous l'avez trouvé !
Patricia
Salut, y a-t-il un moyen d'exclure des catégories ? J'ai deux catégories principales auxquelles toutes les catégories sont assignées. Les catégories principales ont des sous-catégories et je voudrais afficher uniquement les articles similaires des sous-catégories.
Est-ce possible, en excluant les identifiants des catégories principales ?
Merci pour vos conseils !
Au fait… j'adore le code… et il fonctionne à merveille !!!
Personnel éditorial
Vous devriez pouvoir utiliser la catégorie non incluse dans <<
Admin
usman
Je cherchais un article lié avec des plugins miniatures mais le code que vous avez collé ci-dessus a résolu mon problème.
John
Juste une question, y a-t-il un moyen de ne récupérer que les tags du même type d'article ? Peut-être en utilisant quelque chose comme 'post_type=videos' ?
John
D'ailleurs, j'ai aussi trouvé la solution :
Ajoutez-le simplement au tableau :
$args=array(
‘category__in’ => $category_ids,
‘post__not_in’ => array($post->ID),
‘posts_per_page’=> 2, // Nombre d'articles liés qui seront affichés.
‘caller_get_posts’=>1,
‘post_type’=>’videos’
);
marion
Bonjour,
Merci pour ce tutoriel. Je me demande cependant s'il existe un moyen de randomiser les produits liés ? J'ai consulté différents produits de la même catégorie et les mêmes produits liés étaient affichés.
Merci
Personnel éditorial
Oui, utilisez le paramètre Query_Post pour l'ordre et vous pouvez le randomiser.
Admin
Clarence Johnson
Bon à savoir.
phdean
Bonjour,
J'aimerais aussi randomiser les articles affichés pour les catégories, car sinon, ils afficheront toujours les 2 mêmes. Pouvez-vous me donner le code pour faire cela ?
Many thanks in advance
John
Laissez tomber, j'ai trouvé la solution. Merci pour l'article !
Personnel éditorial
quel était le problème ?
Admin
John
Je n'avais pas d'autres articles avec les mêmes tags, c'est-à-dire pas d'articles liés. Erreur stupide.
John
J'ai copié ce code et l'ai mis dans mon single.php sans rien changer et rien ne s'affiche. Y a-t-il un problème avec mon code ? pastebin.com/kg0SkrAg
James
Cela ne fait pas apparaître de miniature — il n'y a même pas d'appel pour une image dans le code. Je ne vois pas comment quelqu'un peut faire fonctionner cela.
Personnel éditorial
Le code pour l'image est : the_post_thumbnail(); << Ce n'est pas du HTML statique où vous verrez le code src de l'image. La fonction appelle la base de données pour rechercher une image mise en avant, alias une miniature, qui est attachée à chaque article. Si elle est trouvée, elle affichera l'image. Maintenant, si vous n'avez pas les miniatures de publication activées dans votre thème, vous devez d'abord les ajouter :
https://www.wpbeginner.com/wp-themes/how-to-add-post-thumbnails-in-wordpress/
L'article l'indiquait clairement dans la section Note :. Vous devriez envisager de le lire attentivement.
Admin
Roberto Silva
Salut mec, j'adore ton blog !
J'ai une question ?
Peux-tu faire le même truc mais "PAR AUTEUR" ?
afficher les derniers articles par auteur ?
you will save my life
Au fait, merci pour ce site !
Personnel éditorial
Yes we will que the article soon
Admin
Roberto Silva
ouais, merci...
Ce sera un excellent article.
car "les derniers articles par auteur sans plugin" est difficile à trouver sur internet.
tu es le meilleur.
Quinn
Merci pour ce code ! Je l'ai essayé et ça marche plus ou moins.
Je peux obtenir une liste des articles liés, ce qui est un énorme avantage.
Mais je n'arrive pas à faire apparaître d'images.
Les articles ont des images si ce code les récupère.
Je suis même allé créer des images pour chaque article avec la balise personnalisée "relatedthumb". Mais hélas, toujours pas d'images.
Y a-t-il autre chose que je doive faire ?
Merci beaucoup d'avance !
Quinn
Personnel éditorial
Cette astuce utilise les miniatures par défaut de WordPress qui ont été ajoutées dans WP 2.9. Si vous avez une image attachée comme cette miniature, alors elle sera récupérée.
Admin
Anthony
Est-il possible d'exclure une catégorie de ce module ?
Merci beaucoup,
Anthony
Personnel éditorial
Il n'affichera que les articles de la catégorie dans laquelle se trouve l'autre article...
Admin
Madhav Tripathi
Bonjour, merci pour ce bon tutoriel, j'utilise actuellement le thème Thesis, donc je voudrais savoir s'il existe un moyen dans le thème Thesis d'implémenter ce code .php.
Sophie
J'essaie de modifier son code afin de l'utiliser avec des catégories dans un type de publication personnalisé. Quelqu'un peut-il m'aider ? Je suis assez nouveau en php.
Merci !
rulethenation
ok, j'ai réussi à le faire fonctionner, y a-t-il un moyen de mettre une image par défaut si une miniature n'est pas disponible
Personnel éditorial
Oui, vous pouvez utiliser le paramètre 'if' pour vérifier s'il y a des plugins... sinon, vous pouvez afficher une image par défaut.
Admin
rulethenation
comment ferais-je pour faire ça ? je suis un noob en php lol
Quickbrown
Pour utiliser des images par défaut lorsqu'aucune miniature de publication n'est disponible, remplacez par <?php if (has_post_thumbnail()) {the_post_thumbnail()} else {echo '’;} ?>
Placez ensuite un fichier default-image.jpg dans le dossier d'images de votre thème.
rulethenation
je n'arrive pas à faire fonctionner ça, ça gâche tout mon agencement près des commentaires, est-ce que je manque quelque chose ? j'ai dû l'enlever de mon site
Clarence Johnson
Mes articles sont maintenant enrichis grâce à vous et à ce tutoriel.
Heather Hill
Salut !
Merci pour cette information ! C'est exactement ce que je cherchais.
Y a-t-il un moyen d'ajouter un extrait à cela, ainsi qu'à la photo ?
Merci encore pour votre aide !
Personnel éditorial
Oui. Ajoutez simplement the_excerpt(); là où vous voulez que l'extrait s'affiche.
Admin
Jez
Merci pour ceci, exactement ce que je cherchais ! J'adore la façon dont vos articles vont droit au but, sans confusion.
Omer Greenwald
Merci pour le partage. J'utilise ce code depuis un moment mais il a un problème : lors de l'ajout de tags à un article, WP les trie par ordre alphabétique indépendamment de la priorité que je leur ai donnée. Donc ce code affiche les articles liés correspondant au premier tag uniquement, ce qui est parfois moins pertinent.
Peut-être avez-vous une idée sur la façon d'empêcher ce tri automatique des tags par WordPress ou une autre solution ?
Personnel éditorial
Il n'utilise pas le premier tag. Ce code utilise tous les tags des articles pour trouver les articles liés.
Admin
Clarence Johnson
J'ai le même problème aussi.
Doug C.
Tout ce que le premier code a fait, c'est de mettre deux instances du même article sur la page. Il n'a rien affiché de lié.
Personnel éditorial
Doug, veuillez nous contacter via le formulaire avec un exemple de lien direct, et nous pourrons vous aider. Nous savons que ce code fonctionne car plusieurs sites de nos clients l'utilisent.
Admin
Noor
Article très utile, merci pour la mise à jour
Liam
Excellent tutoriel. Quelqu'un pourrait-il me montrer un fichier single.php fonctionnel avec ce code ?
J'apprends encore le php.
Malheureusement
Parse error: syntax error, unexpected T_ENDIF in C:\xampplite\htdocs\mock\wp-content\themes\scwd\single.php on line 76
Personnel éditorial
Voici un exemple fonctionnel Flowtown Blog.
Notez que ce code est conçu pour fonctionner à l'intérieur de la boucle. Où essayez-vous de poster ceci ? Si c'est en dehors de la boucle, ajoutez simplement le code de fin if endif; << comme ceci.
Admin
Liam
http://pastebin.com/m60c96f5f
J'espère que le lien fonctionne. Merci.
Personnel éditorial
Je ne sais pas ce qui pourrait mal se passer. Après la classe clearfloat, cela devrait fonctionner correctement. C'est comme ça que nous l'avons mis sur Flowtown et cela fonctionne parfaitement.
Liam
Je vais terminer le thème et l'essayer sur un site en ligne au lieu de xamp. Je vous tiendrai au courant.
Shahab
Super tutoriel !
Pour l'instant, j'utilise YARPP mais j'aimerais bien essayer celui-ci !
Merci
Suriya Kumar P
Vous faites vraiment un excellent travail. Merci beaucoup.
Vivek @ InfoEduTech
Merci pour cet article. Je cherche depuis longtemps à afficher des miniatures avec mes articles et je n'y arrive pas. J'ai essayé de nombreux plugins WordPress mais je n'ai pas réussi. J'espère que cela m'aidera.