Comment : articles connexes avec des vignettes dans WordPress sans plugin

Vous souhaitez afficher une liste d’articles associés sur votre site WordPress et préférez utiliser du code plutôt qu’un plugin ?

Lorsque les visiteurs de votre blog ont fini de lire un article qui les intéresse, proposer une liste d’articles connexes les maintiendra engagés et les aidera à trouver du nouveau contenu à lire.

Dans cet article, nous allons vous montrer comment afficher les publications associées avec WordPress à l'aide de code, sans plugin requis.

Pourquoi afficher les pages associées dans WordPress ?

Lorsque votre blog WordPress commence à se développer, il peut devenir plus difficile pour les utilisateurs de trouver d’autres articles sur le même sujet.

Afficher une liste de contenus associés à la fin de chaque article de blog est un excellent moyen de garder vos visiteurs sur votre site Web et d'augmenter le nombre de pages vues. Cela contribue également à améliorer la visibilité de vos pages les plus importantes en affichant votre meilleur contenu là où les gens peuvent le trouver facilement.

Si vous n’êtes pas familier avec le code, il vous sera plus simple de choisir l’un des nombreux plugins de publication liés à WordPress qui peuvent afficher les publications associées sans code.

Mais si vous vous êtes déjà demandé si vous pouviez afficher des publications associées sans utiliser de plugin, nous partagerons deux algorithmes différents que vous pouvez utiliser pour générer des publications associées avec des miniatures en utilisant uniquement du code :

Remarque : Si vous souhaitez afficher une miniature avec chaque publication associée, assurez-vous d'abord d'ajouter une image sélectionnée à ces publications.

Méthode 1 : Comment afficher les articles associés dans WordPress par balises

Un moyen efficace de localiser du contenu connexe consiste à rechercher d’autres publications partageant les mêmes balises. Les balises sont souvent utilisées pour se concentrer sur les détails spécifiques contenus dans une publication.

Dans cet esprit, vous souhaiterez peut-être ajouter des balises communes aux publications que vous souhaitez relier les unes aux autres. Vous pouvez les saisir dans la case « Balises » de l’éditeur WordPress.

Après avoir ajouté des balises à vos publications, la prochaine chose à faire est d'ajouter l'extrait de code suivant au modèle single.php de votre thème. Si vous avez besoin d'aide pour ajouter du code à votre site, reportez-vous à notre guide sur la façon de 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ù 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 la publication principale et juste au-dessus de la section des commentaires.

Si vous utilisez le thème Twenty Twenty-One comme nous le sommes sur notre site de démonstration, alors un bon endroit pour coller le code est dans le fichier template-parts/content/content-single.php après le en-tête et juste après <?php the_content();.

Cela affichera automatiquement le contenu associé sur n’importe quelle publication WordPress. Vous devrez modifier le style et l’apparence de vos publications associées pour qu’elles correspondent à votre thème en ajoutant du CSS personnalisé.

Conseil : Au lieu de modifier vos fichiers de 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 facilement et en toute sécurité du code personnalisé dans WordPress. De plus, il est livré avec des options « Insertion » qui vous permettent d'insérer et d'exécuter automatiquement des extraits de code à des endroits spécifiques de votre site WordPress, par exemple après une publication.

Pour plus de détails, consultez notre guide sur la façon d'ajouter du code personnalisé dans WordPress.

Méthode 2 : Comment afficher les articles associés dans WordPress par catégorie

Une autre façon d’afficher du contenu associé consiste à répertorier les publications appartenant à la même catégorie. L’avantage de cette méthode est que la liste des publications associées 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 la façon d'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 associé au bas de chaque article.

Si vous souhaitez modifier le style et l'apparence de vos pages associées, vous devrez alors ajouter du CSS personnalisé pour correspondre à votre thème.

Nous espérons que ce didacticiel vous a aidé à apprendre à afficher les publications associées avec des vignettes dans WordPress sans plugins. Vous souhaiterez peut-être également apprendre à suivre les visiteurs de votre site WordPress ou consulter notre liste de 24 conseils pour accélérer votre site Web.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.