Afficher un message personnalisé quand il n’y a pas de résultat dans un listing généré avec Divi

15 juillet 2021
Divi est un outil fantastique mais il lui manque parfois quelques fonctionnalités pour personnaliser l'expérience utilisateur. C'est le cas lorsque vous souhaitez afficher un listing généré avec Divi qui ne fournit aucun résultat !
Tips du jour

Personnaliser l'UX des listings Divi

Il est parfois nécessaire de garder en ligne une page de listing de contenus alors qu'elle n'affiche temporairement plus de résultats. Cela peut par exemple être le cas d'une liste d'offre d'emploi ou encore de biens immobiliers répondant à un critère spécifique.

Pour éviter de laisser les visiteurs de votre site WordPress sur une expérience plutôt décevante, Divi affiche un message par défaut. Si vous êtes arrivés jusqu'ici, c'est que vous cherchez très certainement à le personnaliser !

L'agence web O'Aka, spécialisée sur le thème Divi, vous propose une solution pour afficher un message personnalisé dans le cas où votre listing Divi n'afficherait aucun résultat grâce à l'extension Content Visibility for Divi Builder. 

Le thème

Thème graphique Divi de Elegant Themes

Le thème Divi est un thème populaire qui complète WordPress avec un ensemble de fonctionnalités très utiles. Il met notamment à disposition une richesse de mises en page pré-fabriquées, faciles à prendre en main et qui demandent peu de connaissances techniques.

L'extension

Le plugin Content Visibility for Divi

L'extension Content Visibility for Divi Builder ajoute un champ dans le volet "avancée" de Divi sur tous les types d'élément (section, module, etc.). Ce champ peut faire appel à une fonction PHP qui affiche ou non l'élément en fonction de la valeur booléenne qui est retournée.

La solution

Comment afficher un message alternatif quand il n'y a pas de résultat dans un listing Divi ?

Nous allons découvrir ensemble comment tirer parti de l'extension Content Visibility et du thème Divi pour afficher un message personnalisé quand il n'y a pas de résultat dans un listing Divi (module Blog ou Portfolio) et optimiser l'expérience utilisateur sur un site WordPress.

Configuration du module Blog dans le theme builder de Divi

Au travers du Thème Builder de Divi, mettez en place un module Blog dans le modèle de page d'une archive (index du blog ou taxonomie). Activez le "Messages pour la page en cours" qui est d'ailleurs une très mauvaise traduction française ! Cela signifie que le module va afficher dynamiquement les articles en fonction de la catégorie en cours.

capture vidéo du module blog Divi

Nous convenons que l'explication est un peu sommaire à ce stade mais l'intérêt n'en est pas moins important ! En effet, cela permet d'avoir un seule modèle de page pour toutes les listings d'articles (ou portfolio) de votre site internet. Ainsi les modifications futures ne se feront qu'à un seul endroit et donc beaucoup plus rapidement. Si cela vous intéresse, consultez notre article sur le design systems.

Comportement par défaut de l'affichage Divi

Avant de rentrer dans les détails de la solution technique que nous vous proposons, analysons le comportement par défaut de Divi lorsqu'on cherche à afficher un module blog ou portfolio alors qu'il n'y a pas de résultat à afficher. Divi affiche le texte générique suivant :

Aucun résultat La page demandée est introuvable. Essayez d'affiner votre recherche ou utilisez le panneau de navigation ci-dessus pour localiser l'article.

Nous pouvons constaté le cas évoqué sur le listing des FAQ pour la catégorie ExpressVitale du site internet imedica.fr. Même si le message reste compréhensible, le résultat n'est pas très clair pour l'internaute qui a perdu son temps en affichant cette page. L'expérience utilisateur est ainsi altérée et l'internaute risque de quitter le site internet. Il aurait été préférable d'avoir un message personnalisé qui invite l'internaute à découvrir d'autres FAQ, voire de lui suggérer de soumettre ses questions (User Generated Content).

Capture d'écran de la base de connaissances du site imedica.fr

Utilisation de l'extension Content Visibility for Divi Builder

Nous avions déjà évoqué l'extension Content Visibility dans un précédent article avec ACF. Si ce n'est pas déjà fait, activez l'extension dans votre WordPress et vérifiez qu'elle est bien installée en contrôlant la présence du champs "Content Visibility" dans l'onglet "Avancé" d'un élément Divi.

Nous allons maintenant utiliser l'un des listings de produits d'une boutique WooCommerce pour illustrer la suite de ce tutoriel.

divi builder, avancé et onglet visibilité

Masquer le listing de résultat si il n'y a pas d'éléments à afficher grâce à l'extension Content Visibility for Divi Builder

Dans le champ "Content Visibility" du module Blog de Divi qui devrait afficher vos résultats, saisissez le nom de la fonction PHP qui sera appelée. Nous utiliserons par exemple "oaka_visibility_listing()". Ainsi, nous déclarons cette fonction dans le fichier functions.php du thème enfant de Divi que nous avons créé pour l'agence immobilière ID-IMMO de Colmar (68).

function oaka_visibility_listing() {

$posts_a_afficher = FALSE ; global $wp_query; // Si il y a du contenu à afficher, on renvoie TRUE if ( $wp_query->post_count > 0 ) { $posts_a_afficher = TRUE; } return $posts_a_afficher; }

Si vous avez déjà manipulé les Query de WordPress, vous constaterez qu'il n'y a rien de compliqué :

  1. On récupère la variable globale $wp_query qui charge la requête de la page courante ;
  2. On analyse le nombre de résultats obtenus grâce à $wp_query->post_count ;
  3. On définie la variable TRUE ou FALSE qui est renvoyée par la fonction oaka_visibility_listing() ;

Il n'y a pas grand chose de plus à expliquer... testez par vous même ! Ainsi, le module Divi Blog que vous utilisez dans votre modèle de page sera masqué si il n'y a pas de résultat dans la page courante.

Créer un message alternatif personnalisé

L'idée est d'afficher un module Divi (ou une ligne Divi) si il n'y a pas de résultats à afficher. Pour ce faire, on va créer un module texte que l'on voudrait voir apparaitre lorsqu'il n'y a pas de résultat.

Dans le Page Builder Divi non loin du module blog ou portfolio qui vous génère le résultat vide, créez une nouvelle ligne Divi qui contient un module Texte. Affichez-y votre message de substitution...

Désolé !
Nous n'avons plus de biens immobiliers correspondant à ce critère pour le moment. Vous pouvez cependant consulter le listing complet de tous nos biens à la location.

À ce stade du tutoriel, vous devriez toujours avoir le résultat vide ("Aucun résultat ...") retourné par votre module Blog accompagné du message personnalisé. Pour illustrer nos propos, cela ressemble à cela sur le site id-immo.alsace.

Capture d'écran du site internet id-immo.alsace

Afficher le message alternatif si il n'y a pas de résultat à afficher grâce à l'extension Content Visibility for Divi Builder

Le procédé est plus ou moins le même que pour le listing de résultat mais en sachant que l'on souhaite la valeur inverse. Si le listing s'affiche, le message alternatif est masqué et si le listing ne doit pas s'afficher alors on affiche le message de substitution.

Dans le champ "Content Visibility" de la ligne ou du module qui contient votre message personnalisé, saisissez le nom de la nouvelle fonction PHP qui sera appelée. Dans notre exemple, nous déclarons à nouveau la fonction dans le fichier functions.php et nous la nommons "oaka_visibility_bloc_default()".

function oaka_visibility_bloc_default() {

// Si il y a du contenu à afficher, on affiche pas le message alternatif if ( oaka_visibilite_listing() ) { return FALSE; }
return TRUE; }

Que fait la fonction oaka_visibility_bloc_default() ? Elle appelle tout simplement la fonction que nous avons créé tout à l'heure et renvoie la valeur inverse. Donc si oaka_visibility_listing() est VRAI, alors on renvoie FAUX. Si oaka_visibility_listing() est FAUX, alors on renvoie VRAI. Ainsi on est toujours sûr d'afficher le message personnalisé OU le listing des résultats.

Nous pourrions bien évidemment optimiser tout cela avec une variable globale et éviter de faire plusieurs appels à la fonction oaka_visibility_listing() afin d'optimiser les performances. Ce n'est pas le cas ici car l'objectif de cet article est uniquement de vous expliquer le principe de fonctionnement !

Si vous n'y arrivez pas, sachez que O'Aka est une agence web en Alsace. Nous développons des sites internet avec WordPress et le thème Divi. N'hésitez pas à prendre contact avec nous pour nous parler de vos projets digitaux.

 

 À propos de l'auteur

Portrait de Yoann PIERRE souriant avec une barbe et des lunettes

Yoann PIERRE

Tout d’abord chef de projet digital, puis responsable d'une équipe de développement web, Yoann a fait ses premières armes dans une agence eCommerce strasbourgeoise. En quête de nouveaux challenges, c'est en 2020 qu'il fonde l'agence O'Aka.
Lien d'affiliation avec Elegant Themes
Publicité pour le thème Wordpress Divi
Cultivez vos compétences numériques

Cultivez vos compétences numériques

Connaissez vous la plateforme Pix ? C’est le service public en ligne pour évaluer, développer et certifier ses compétences numériques. Voilà une bonne façon d’enrichir ses compétences numériques pour la rentrée !

Publier une vidéo sur Youtube en 2020

Publier une vidéo sur Youtube en 2020

Vous avez déjà une chaine Youtube mais vous ne savez pas comment envoyer une vidéo de votre ordinateur sur Youtube ? Cette vidéo vous montre pas à pas comment faire avec l’interface de Youtube en 2020.

Thématiques associées :

Le A Coeur blanc et transparent de la marque Alsace

O'Aka, Implantée au coeur de l'Alsace

Pin It on Pinterest