Afficher des contenus similaires sous WordPress avec l’extension Gutty Related Posts

Dans le monde des blogs et des sites d’information, capter l’attention de l’utilisateur est essentiel pour augmenter le temps passé sur le site, diminuer le taux de rebond et, en fin de compte, fidéliser les lecteurs. L’une des méthodes les plus efficaces pour encourager les visiteurs à explorer davantage de contenu est de leur suggérer des contenus relatifs comme des articles ou des produits similaires.

Dans cet article, nous allons explorer comment afficher des articles relatifs sous WordPress et examiner différentes méthodes pour les mettre en place facilement.

Pourquoi afficher des contenus relatifs sous WordPress ?

Les contenus relatifs sont des recommandations automatiques de contenu additionnel susceptible d’intéresser le lecteur en fonction de l’article qu’il consulte. Voici quelques avantages à intégrer cette fonctionnalité dans votre site WordPress :

1. Amélioration de l’expérience utilisateur : les visiteurs accèdent facilement à des publications en lien avec leur lecture actuelle, enrichissant ainsi leur expérience ;
2. Augmentation du temps passé sur le site : en proposant des contenus pertinents, les visiteurs restent plus longtemps sur votre site. C’est une métrique essentielle pour les annonceurs ;
3. Réduction du taux de rebond : lorsque les visiteurs trouvent des articles intéressants et bien organisés, ils sont moins enclins à quitter le site diminuant de facto le taux de rebond. Là encore, il s’agit d’une métrique clé pour les annonceurs ;
4. Optimisation SEO : les liens internes renforcent le référencement en permettant aux moteurs de recherche de mieux comprendre la structure et la pertinence des contenus. On parlera d’optimisation du maillage interne ;

Ces suggestions sont légions sur les sites éditoriaux et e-commerce et sont devenues un incontournable des sites Web tournés vers la conversion.

Comment afficher des contenus relatifs sous WordPress ?

Méthode n°1 – Utiliser l’extension gratuite Gutty Related Posts

Fraîchement débarquée à l’automne 2024, Gutty Related Posts est une extension WordPress facile à utiliser qui exploite la puissance de l’édition complète de site – le fameux Full Site Editing ou FSE, et de l’éditeur de blocs pour afficher des publications connexes pertinentes sur votre site Web.

En utilisant la technologie TD-IDF (Term Frequency-Inverse Document Frequency), l’extension analyse votre base de contenus pour en extraire les relations les plus pertinentes, améliorant ainsi l’engagement de vos visiteurs.

Gutty Related Posts propose les fonctionnalités :

• Suggestions de contenus similaires et pertinents : l’extension suggère automatiquement des publications basées sur l’analyse du contenu à l’aide de la technologie TD-IDF, garantissant ainsi que les lecteurs voient des suggestions pertinentes. Cette analyse est opérée après l’installation de l’extension et à chaque mise à jour de contenu. Les mots-clés sont stockées dans une table dédiée de votre base de données ;
• Support de tous les types de contenus : articles, pages, produits ou tout autre type de contenu personnalisé sont pris en charge par notre extension ;
• Compatible Gutenberg / FSE : conçue pour fonctionner de manière transparente avec l’édition complète de site de WordPress, il vous suffit d’ajouter le bloc à l’emplacement de votre choix et de personnaliser l’affichage de la boucle à votre guise en ajoutant par exemple l’image mise en avant, le titre et l’extrait de la publication ;
• Compatible avec les thèmes classiques : si vous utilisez un thème plus conventionnel, vous pouvez utiliser notre code court ou shortcode pour embarquer le bloc dans la page. Cela fonctionne également avec les constructeurs de pages alternatifs tels que Elementor ou Divi ;
• Personnalisation facile : utilisez l’éditeur de blocs pour personnaliser entièrement l’affichage des publications relatives. Affichez ou masquez les éléments des articles tels que les titres, les vignettes et les extraits à l’aide de simples cases à cocher.
• Pas de publicité, 100% gratuit : profitez d’une expérience sans publicité et sans frais cachés. Gutty Related Posts est gratuit et le restera toujours. Une version premium verra le jour si le projet suscite de l’engouement ;
• Optimisé pour la performance : l’extension affiche des temps de chargement rapides y compris sur des sites de plusieurs milliers de publications ;

Vous pouvez d’ailleurs utiliser les crochets natifs rattachés à la boucle de requête pour personnaliser les données à votre guise. Voici un exemple pour filtrer sur la catégorie d’article en cours d’affichage à l’aide du croche query_loop_block_query_vars :

/* Filter Gutty Related Posts Query Block */
function wpc_randomize_query( $query, $block ) {
	$block = $block->parsed_block;

	if (
		isset( $block['attrs']['className'] )
		&& str_contains( $block['attrs']['className'], 'related-posts' )
	) {
		$current_post_categories = wp_get_post_categories( get_the_ID(), [ 'fields' => 'ids' ] );
		$query['cat']            = implode( ',', $current_post_categories );
		$query['orderby']        = 'rand';
	}

	return $query;
}

add_filter( 'query_loop_block_query_vars', 'wpc_randomize_query', 10, 2 );

Notez qu’il vous faudra ajouter la classe CSS related-posts sur le bloc Modèle de publication via l’interface d’administration. Cela nous permet de cibler l’élément dans la page et en complément d’appliquer des styles personnalisés si tant est que les réglages proposés via l’éditeur fussent incomplets.

Vous pouvez faire de même pour des produits avec un site WooCommerce en filtrant par exemple sur une taxonomie comme un attribut pa_collection dans le cas présent :

/* Filter Gutty Related Posts Query Block */
function wpc_randomize_query( $query, $block ) {
	$block = $block->parsed_block;

	if (
		isset( $block['attrs']['className'] )
		&& str_contains( $block['attrs']['className'], 'related-products' )
	) {

		// Obtenir les termes de la taxonomie 'pa_collection' de l'article en cours
		$current_post_collections = wp_get_post_terms( get_the_ID(), 'pa_collection', [ 'fields' => 'ids' ] );

		if ( !empty( $current_post_collections ) ) {
			$query['tax_query'] = array(
				array(
					'taxonomy' => 'pa_collection',
					'field'    => 'id',
					'terms'    => $current_post_collections,
				),
			);
		}

		// Trier les résultats de manière aléatoire
		$query['orderby'] = 'rand';
	}

	return $query;
}

add_filter( 'query_loop_block_query_vars', 'wpc_randomize_query', 10, 2 );

Contrairement à l’exemple précédent, c’est la classe CSS related-products que nous utilisons ici pour le ciblage.

La méthode d’insertion par bloc reste cependant la plus appropriée et la plus simple si vous n’êtes pas branché code.

En tant que développeur associé au projet, je ne peux que vous conseiller d’utiliser cette extension : elle est place sur ce site en fin d’article si vous souhaitez la voir en action dans un contexte réel.

Méthode 2 : Afficher des contenus relatifs avec du code personnalisé

Pour ceux qui préfèrent éviter les extensions, il est possible d’ajouter des articles relatifs en modifiant directement le code du thème. Cette méthode est recommandée pour les utilisateurs avancés tels que les développeurs.

Voici un exemple de code qui utilise la requête personnalisée WP_Query pour afficher des articles relatifs basés sur les catégories de l’article actuel.

function wpc_related_posts() {
    global $post;

    $categories = wp_get_post_categories($post->ID);
    if ($categories) {
        $args = [
            'category__in' => $categories,
            'post__not_in' => [$post->ID],
            'posts_per_page' => 4,
            'ignore_sticky_posts' => 1,
        ];

        $related_query = new WP_Query($args);

        if ($related_query->have_posts()) {
            echo '<div class="related-posts">';
            echo '<p>' . __('Related Posts', 'text-domain') . '</p>';
            while ($related_query->have_posts()) {
                $related_query->the_post();
                echo '<div><a href="' . get_permalink() . '">' . get_the_title() . '</a></div>';
            }
            echo '</div>';
            wp_reset_postdata();
        }
    }
}

Bien évidemment, ce bout de code doit être ajusté selon vos besoins en matière d’affichage. En l’état, j’affiche une liste de 4 articles issus de la même catégorie avec pour seul élément leur titre. Vous pourriez aller plus loin en récupérant l’image mise en avant et la date par exemple.

En résumé

Afficher des articles relatifs sous WordPress est une stratégie efficace pour améliorer l’expérience utilisateur, augmenter le temps passé sur votre site et optimiser votre référencement. Que vous préfériez utiliser une extension, un bloc Gutenberg, un code court ou du code personnalisé, toutes les options sont à votre disposition selon vos besoins et votre niveau de compétence. Notre préférence se portera naturellement sur l’utilisation du bloc proposé par l’extension Gutty Related Posts qui offre les meilleures performances et la flexibilité attendue pour un site moderne.