S’il y a bien une chose importante sur un site Internet, c’est la facilité avec laquelle on peut trouver l’information dont on a besoin.

Que ce soit pour une boutique en ligne ou des articles de blogs, personne n’aime passer plus de 5 minutes (et je suis gentil) à farfouiller dans les méandres d’un site pour dénicher enfin ce qu’il cherche.

Amazon et WallMart ont publié des études il y a quelques années expliquant que chaque seconde de temps de chargement supplémentaire leur faisait perdre des millions de dollars par an.

Bon, de notre côté, nous n’en sommes pas encore à de tels chiffres, mais je vais vous présenter une extension qui risque de révolutionner vos développements de sites, et améliorer l’expérience client.

On ne va pas parler de cache, de serveur, d’amélioration ou encore d’optimisation. Nous allons nous centrer ici sur la recherche et la filtration de toutes les données de votre site via le plugin WPGridBuilder.

Cerise sur le gâteau : vous n’aurez pas besoin de code, tout se fait visuellement, et c’est en français.

Qu’est ce qu’une recherche WordPress à facettes ?

Non, cela n’a rien à voir avec les boules.

Les recherches à facettes sont des recherches permettant de filtrer vos contenus suivant différents critères : le prix, les notes des clients, la couleur, la marque, etc.

Je suis sûr que vous en avez déjà vu, par exemple sur les sites de voyage lorsque vous définissez un budget, une date et enfin une destination.
Vous en avez probablement croisé également sur des sites de chaussures ou vêtements lorsque vous sélectionnez des tailles, puis des couleurs, et que cela vous affiche les produits restants correspondant.

Et bien c’est cela une recherche à facettes : rapide, fluide, comportant différents critères et permettant à un utilisateur de trouver ce qu’il souhaite rapidement.

un exemple de recherche à facettes sur Amazon
La recherche à facettes d’Amazon si vous cherchez une marmite.

Utiliser ce système sur votre site WordPress peut grandement améliorer la conversion de vos ventes et le nombre de visites sur vos articles.

Allez, c’est parti !

WPGridBuilder, un plugin clé-en-main pour filtrer vos recherches

WPGridBuilder est une sorte de super extension premium, vendue à partir de 49$/an pour un site et permettant de créer ce type de fonctionnalité sur votre site WordPress.

Elle a plusieurs cordes à son arc, vous fera gagner d’une part un temps fou, et d’autre part la possibilité de vous lancer sur des projets qui ne vous semblaient pas à portée de main jusqu’à maintenant.

Alors que propose concrètement ce plugin ?

WPGridBuilder vous permet de créer des grilles filtrables en temps réel, sans aucun rechargement de la page, avec n’importe quel contenu (articles, produits WooCommerce, projets de portFolio, type de contenu personnalisé….).

Les filtres sont entièrement personnalisables, et vous pouvez en ajouter autant que vous le souhaitez, sur n’importe quel type de critères.

Il est ainsi possible d’avoir des facettes classiques telles que le prix ou la couleur d’un produit, mais aussi des facettes plus intéressantes provenant de champs ajoutés via Advanced Custom Fields, de champs WordPress personnalisés ou de toute autre donnée possible.

Vous l’aurez compris : les possibilités sont donc infinies.

Pourtant, WPGridBuilder ne s’arrête pas là et propose deux autres fonctionnalités très utiles :

  • Il permet aussi de créer des sliders sur-mesure, toujours en y ajoutant n’importe quel type de données.
  • Il permet également de créer des cartes de contenu filtrables, à la manière d’AirBnb pour présenter les biens disponibles.

Vous vous souvenez quand je vous ai dit que vous alliez surement vous lancer dans des projets que vous pensiez impossibles il y a quelques minutes ?

Fonctionnement et mise en place

Après avoir installé et activé le plugin, nous allons commencer par faire un tour du propriétaire.

Retrouvez notre tutoriel pour installer un plugin dans les règles de l’art si vous ne savez pas comment faire.

WPGridBuilder se divise en différents onglets de réglages permettant de paramétrer ses grilles facilement, et de réutiliser ses facettes ou cartes pour plusieurs d’entre elles.

Nous allons le découvrir à travers un cas concret : une boutique en ligne de produits Apple avec des filtres spécifiques suivant les produits (mémoire RAM, couleur, prix, etc).

Voici le type de grille filtrable que nous allons créer dans cet article pour notre boutique en ligne WooCommerce :

Un exemple de grille WordPress créée avec WPGridBuilder

Allez c’est parti !

Les cartes

Les cartes représentent l’affichage de chacun de vos contenus dans la grille. Pour notre exemple concret, cela correspond aux produits WooCommerce.

WPGridBuilder intègre plus de 20 modèles de cartes préconçus pour articles blogs ou produits à importer et utiliser directement, mais vous pouvez tout à fait en créer un de toutes pièces, ou modifier un modèle existant.

Voici un exemple des cartes proposées pour démarrer vos premières grilles :

Modèles de cartes sur WPGridBuilder

Vous pouvez donc partir sur une carte préconstruite, l’éditer, ou en créer une nouvelle.

WPGridBuilder embarque un constructeur visuel maison pour l’édition, permettant de modifier l’ensemble du design via des glisser-déposer en utilisant des blocs.

Il en existe de toutes sortes et dédiés à toutes les utilisations :

  • Des blocs dédiés aux articles: titres, métas, contenus…
  • Aux produits WooCommerce : tarifs, notations, promotions…
  • Aux utilisateurs WordPress : nom, prénom, email, avatar…
  • Aux termes et catégories,
  • Aux ajouts de boutons et d’icônes
  • A l’ajout de champs personnalisés

Dans notre exemple, nous allons partir du modèle de carte nommé “Carnelian”.

Modèle de carte WordPress sur WPGridBuilder

Le système de mise en page est assez similaire à Gutenberg, ou même Elementor.

Chaque élément est personnalisable et dispose d’options pour éditer la couleur, la police, le type de champ, la taille, l’arrière-plan, ajouter du CSS personnalisé…

Édition d'une carte sur WPGridBuilder

J’ai édité un peu la mise en forme pour arriver au résultat suivant :

J’y ai ajouté un champ Advanced Custom Field correspondant à un produit offert pour l’achat de ce produit, un bouton “En savoir plus” renvoyant vers la page produit, et modifié un peu la typographie.

Une fois nos cartes bien en place et comportant toutes les informations voulues, passons maintenant à la seconde partie…

Formez-vous à Elementor

Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.

Les facettes

Nous voici maintenant dans la partie la plus importante et intéressante de la mise en place de notre grille : la création de facettes.

Ce sont tous les types de filtres possibles que vous pouvez ajouter à votre grille.

Les filtres de facettes WordPress disponibles dans le plugin

Les facettes sont divisées en 4 catégories :

  • Filtrer : pour filtrer le contenu de votre grille via des boutons, sélecteurs, avis clients
  • Charger : pour charger plus de contenu, avec par exemple la possibilité d’ajouter un scroll infini à votre grille, ou encore une pagination.
  • Trier : pour créer un menu déroulant de choix personnalisés, comme un affichage par ordre alphabétique.
  • Réinitialiser : pour ajouter un bouton de réinitialisation des choix du visiteurs et réafficher la grille par défaut.

Tout comme les cartes, WPGridBuilder propose d’importer une dizaine de facettes de base pour démarrer votre projet.

Je vous conseille de les installer toutes, car d’une part elles sont utiles, et d’autre part cela vous donnera un exemple pour en créer des personnalisées par la suite.

Nous allons créer notre première facette, qui permettra de filtrer notre grille de produits. Cette facette permettra de trier les produits suivant une taxonomie personnalisée WooCommerce nommée « Mémoire Vive” précédemment mise en place dans nos produits.

Nous ajoutons donc une facette “Mémoire Vive” de la manière suivante :

Nommage de la facette

Jusque là, rien de compliqué, il suffit de nommer son filtre.

Passons maintenant à l’onglet Comportement, qui va nous permettre de définir l’utilisation notre facette :

Comportement sur WPGridBuilder

Nous souhaitons afficher un filtre permettant au visiteur de cocher les différents types de mémoire vive pour affiner sa sélection. Nous avons donc besoin du type de filtre “Case à cocher”.

Suivant le filtre, vous pouvez bien sûr en sélectionner un autre.

Nous sélectionnons ensuite le type de données à filtrer. Il s’agit de la taxonomie “Produit Mémoire Vive” créée précédemment via WooCommerce.

La logique de filtre est ici paramétrée sur le choix “OU” qui permet de cocher plusieurs cases à la fois contrairement au choix “ET” qui ne permet que d’en définir un seul.

Les autres options permettent d’afficher ou non les sous-catégories, le nombre de produits disponibles suivant l’attribut ou encore de choisir l’ordre des choix affichés par le filtre.

Il nous reste maintenant une étape primordiale : la création de notre grille.

Les grilles

Nous allons maintenant construire et paramétrer notre grille pour afficher exactement les éléments que nous souhaitons.

L’onglet Grille comprend de très nombreuses options pour affiner précisément l’affichage. Nous allons voir ici uniquement les principales.

Onglet Nommage

Onglet nommage

L’onglet Nommage permet de définir le nom de votre grille, ce qui est utile si vous en créez plusieurs, de lui définir une classe CSS personnalisée ou encore de récupérer le shortcode permettant de l’afficher sur vos pages.

Vous pouvez ensuite éditer les différents messages d’erreur si jamais le filtrage du visiteur ne renvoie aucun résultat.

Onglet Requête de contenu

Onglet requête du contenu

L’onglet Requête de contenu va nous permettre de définir précisément ce que va afficher notre grille.

On peut choisir le type de contenu, les taxonomies, et même filtrer par champs personnalisés.

Ici nous avons par exemple sélectionné le type de publication “Produits” ayant comme terme de taxonomie MacBook Pro. Notre grille va donc afficher uniquement les produits de cette catégorie.

Vous pouvez prévisualiser l’aspect de votre grille à tout moment en cliquant sur le bouton violet “Prévisualiser” en haut à droite.

Onglet Formats des médias

Onglet Formats des médias sur WPGridBuilder

Cet onglet est très pratique car il vous permet de gérer l’affichage des médias sur les cartes.

Il permet par exemple de :

  • Récupérer automatiquement la première image d’un contenu si aucune image à la Une n’est définie
  • Gérer des galeries d’images en tant qu’image de la carte
  • Afficher la première image de la galerie WooCommerce au survol de la carte
  • Récupérer automatiquement l’image à la Une provenant de YouTube ou Vimeo si vous les affichez sur vos cartes
  • Ouvrir les vidéos dans une visionneuse

Il vous permet également de définir une image par défaut si vous n’affichez aucune image automatiquement, ou encore de gérer le ratio de vos images.

En effet, l’image définie sera automatiquement affichée dans son format original. Si toutes vos images n’ont pas le même format cela peut alors nuire au design de votre grille. Pour corriger ceci, le fait de définir un ratio peut vous être très utile.

Dans mon exemple, j’affiche les images à la Une de tous mes produits. Étant toutes du même format, je ne définis pas de ratio particulier.

J’ai choisi de laisser tous les autres réglages par défaut, puisqu’ils conviennent très bien à ce cas précis.

Onglet Mise en page

Onglet Mise en page sur WPGridBuilder

L’onglet Mise en page permet de définir le comportement de l’affichage de votre grille.

D’une part le type de mise en page parmi 3 possibilités :

  • Masonry
  • Métro
  • Justifié

Ces 3 mises en page sont dépendantes du type de carte choisie pour vos contenus. J’y reviens juste après.

Vous pouvez ensuite définir le sens d’affichage de vos cartes et leur donner une hauteur égale. Très pratique pour conserver un design impeccable.

La section Réactivité de la grille vous permet de gérer facilement le côté responsive en définissant le nombre de colonnes affichés dans la grille suivant les supports ainsi que l’espace entre chaque carte.

Pour notre grille, ici, j’ai choisi de privilégier l’affichage de 3 produits maximum par ligne et un espacement de 20 pixels entre chacun d’eux, de manière à ce que le design reste aéré et que les informations ne soient pas trop les unes sur les autres.

Onglet Carrousel

Onglet Carrousel

L’onglet Carrousel vous permet en un clic de transformer votre grille de produits en un carrousel entièrement paramétrable.

Il suffit de sélectionner l’option Carrousel et hop : vous voilà avec un slider de produits.

Différentes options vous permettent d’affiner le comportement de votre carrousel :

  • Vitesse de défilement,
  • Nombre de produits,
  • Lecture automatique ou non,
  • Taille des boutons,
  • Position des diapositives…

Ce modèle personnalisable de carrousel avec le contenu de notre choix est simple de fonctionnement, et très pratique pour éviter d’installer une extension supplémentaire et afficher un slider personnalisé avec le contenu de notre choix.

Voici ce que l’on peut par exemple mettre en place avec les options par défaut :

Un exemple de carrousel sur WordPress créé avec WPGridBuilder

Onglet Constructeur

Onglet Constructeur

L’onglet Constructeur vous permet de mettre en forme toutes vos facettes et de les organiser autour de votre grille.

Il suffit ainsi de les glisser-déposer à gauche, à droite, au-dessus ou en-dessous, dans l’ordre que vous souhaitez, pour qu’elles apparaissent ensuite sur votre page.

WPGridBuilder vous permet également d’afficher votre grille via un shortcode ou des blocs Gutenberg. Je vous explique tout ça un peu plus loin dans l’article

Onglet Style de cartes

Onglet Style de cartes

Cet onglet permet de définir quel modèle de cartes sera utilisé suivant le type de contenu présent dans la grille.

Dans notre cas nous n’avons défini que la carte par défaut, car nous n’avons qu’un seul contenu produit, et il s’agit du modèle Carnélian que nous avons mis en forme tout à l’heure.

Onglet Animations

Onglet Animations

Une animation par défaut est paramétrée pour l’affichage des cartes de votre grille lorsque vous chargez la page.

Vous pouvez l’éditer ou la supprimer ici si vous le souhaitez, sans avoir à entrer une ligne de code.

Onglet Chargement

Onglet Chargement

Vous pouvez ici paramétrer une animation de préchargement de votre grille pour faire patienter vos visiteurs pendant l’affichage de la page.

Notez qu’il est également possible d’afficher des images floutées pendant le chargement, un peu à la manière de Twitter, ou encore d’activer le lazy load pour ne charger les images que lorsqu’elles sont visibles. 
Cela permettra d’optimiser les performances de votre page.

De mon côté, je n’ai activé que le lazy load pour charger plus rapidement ma grille.

Onglet Personnalisation

Onglet Personnalisation sur WPGridBuilder

L’onglet Personnalisation offre la possibilité d’ajouter du code CSS ou Javascript au besoin directement dans les réglages de la grille.

Une fois tout ceci paramétré, il nous reste à afficher notre grille sur notre page.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Afficher la grille sur un site WordPress

Il existe différentes possibilités pour afficher la grille sur votre site WordPress.

Afficher la grille via les blocs Gutenberg

WPGridBuilder embarque deux nouveaux blocs Gutenberg permettant d’ajouter des grilles et facettes directement dans nos pages ou articles : un bloc Facette et un bloc Grille.

Les deux nouveaux blocs Gutenberg pour intégrer des facettes à WordPress

Vous n’avez ensuite plus qu’à sélectionner la grille ou les facettes à afficher pour pouvoir visualiser votre grille filtrable.

Bloc Gutenberg de facette et de grille sur WPGridBuilder

Cela vous donne ensuite un affichage de ce type :

grille wpgridbuilder

Afficher la grille avec un code court

Lorsque vous créez une grille, WPGridBuilder vous génère un code court (shortcode) automatique pour pouvoir l’afficher n’importe ou sur votre site.

Par exemple sur notre grille affichant les MacBooks, nous pouvons voir que le code court est [wpgb_grid id="15"]

shortcode de la grille créée avec WPGridBuilder

Il vous suffit ensuite de le copier-coller dans vos pages, articles ou modules textes pour que votre grille soit affichée.

C’est la solution que j’ai utilisé dans cet exemple ; et voici le résultat obtenu :

Afficher la grille “sur-mesure” via des constructeurs de pages comme Divi ou Elementor

Si vous choisissez de ne pas intégrer les facettes lors du paramétrage de votre grille, vous pouvez les ajouter ensuite via différents shortcodes fournis par WPGridBuilder.

Nous venons de voir que chaque grille disposait d’un code court prédéfinie. Eh bien c’est aussi le cas pour les facettes, à une petite différence près, que nous allons voir.

Si l’on prend notre facette “Mémoire Ram”, voici le code court disponible pour l’afficher : [wpgb_facet id="12" grid="0"]

Un attribut supplémentaire est ajouté : grid="0".

Cela va nous permettre de rattacher notre facette à une grille précise lorsque nous choisissons de les afficher séparément.

WPGridBuilder permet d’afficher une grille construite sans facettes à la base, puis de les ajouter séparément ensuite à la page. Ainsi vous pouvez les placer au-dessus, en-dessous, à gauche, à droite, etc.

Pour les relier, il suffit de remplacer la valeur “0” de l’attribut “grid” par l’identifiant de votre grille.

Dans le cas de notre grille affichant les MacBook Pro, vous pouvez voir dans son code court que l’identifiant est 15, ce qui nous donnerait [wpgb_facet id="12" grid="15"] pour afficher notre facette et la relier à notre grille.

Cette dernière solution sera la plus flexible en termes de design et de mise en page, si vous avez besoin de quelque chose de poussé.

Les addons disponibles

WPGridBuilder vous paraît déjà complet ?

Bien qu’il supporte déjà parfaitement l’intégration de contenus WooCommerce ou Advanced Custom Fields,  sachez qu’il vous réserve encore quelques surprises, puisqu’il embarque des addons supplémentaires qui pourraient vous intéresser.

La facette Carte

Facette carte de WPGridBuilder

Cet addon ajoute un nouveau type de facette nommé Carte permettant de créer une carte filtrable dans le style de ce que vous pouvez voir sur AirBnb.

Il intègre la possibilité d’utiliser Google Maps, Leaflet Map ou encore MapBox, et fonctionne en utilisant la latitude et longitude des différents contenus.

Cela peut-être très pratique pour certains de vos projets.

Cache

Un addon de mise en cache de vos grilles est également disponible pour améliorer les performances d’affichage des grilles.

Learndash

Cet addon dédié à l’extension de LMS Learndash, pour créer des cours en ligne, ajoute de nouveaux blocs dans l’onglet de création de cartes pour afficher différentes informations sur vos cours.

Multilingue

L’addon multilingue permet d’améliorer la compatibilité de WPGridBuilder avec Polylang et WPML et vous évite de dupliquer vos grilles dans tous les langages.

Un must-have si votre site est disponible en plusieurs langues, pour gagner du temps.

Conclusion

Nous avons donc créé et paramétré une facette, designé une carte de contenus pour afficher nos éléments, et mis en place notre grille pour afficher l’ensemble sur notre site, le tout de manière visuelle, sans une ligne de code.

La suite consisterait à ajouter de nombreuses autres facettes pour trier encore plus finement nos produits… maintenant que vous savez comment en ajouter une, nul doute que vous saurez vous débrouiller pour tous les cas et besoins.

Simple à prendre en main et entièrement en français, elle vous fera gagner beaucoup de temps sur la mise en place de fonctionnalités complexes et poussées.

Son prix abordable de 49$/an pour un site en fait une extension rentable sur n’importe quel projet.

Petit bonus : en cas de problème le support de Loïc, le développeur, est très réactif et vous répond en français.

Alors, prévoyez-vous d’utiliser cette extension pour vos futurs projets ?