Lorsque l’on crée des sites WordPress avancés, il arrive que l’ont ait besoin d’un plugin qui permette à l’internaute de filtrer les contenus disponibles sur le site afin qu’il puisse trouver plus rapidement les informations qu’il recherche. On retrouve les filtres le plus fréquemment sur les sites e-commerce mais ils peuvent servir pour tout type de projets.
Dans cet article, je vous propose un comparatif de deux plugins Premium, FacetWP (licence à 99 $ pour un site) et Search & Filter Pro (licence à 20 $ pour un site).
Spoiler alert ! FacetWP et Search & Filter Pro sont deux outils efficaces pour mettre en place des filtres complets et aboutis. Vous pouvez créer des filtres pour vos pages, pour vos articles mais aussi pour tout autre type de contenus (Portfolios, Produits, Evénements, Locations, etc.). Bien qu’ils proposent tous les deux la même fonctionnalité et possèdent un certain nombre de similitudes, vous verrez qu’ils présentent quelques différences, tant au niveau de leur utilisation que des possibilités qu’ils offrent !
Alors, de FacetWP ou Search & Filter Pro, qui l’emporte ?! Voyons cela ensemble.
Pour explorer avec vous quelques unes des possibilités de ces plugins, j’ai créé un type de contenu personnalisé « Films », avec le plugin Custom Post Type UI (vous pouvez aussi le faire avec Toolset). J’ai ensuite créé un champ personnalisé de type « nombre » avec Advanced Custom Fields pour afficher l’année de sortie du film. Enfin, j’ai créé trois Taxonomies personnalisées, « Genres », « Réalisateurs » et « Acteurs » pour classer les films selon plusieurs critères. Passons maintenant à la mise en place des filtres.
Découverte de FacetWP
Commencez par installer et activer le plugin (si cette procédure ne vous est pas familière, je vous invite à lire cet article), puis rendez-vous dans l’onglet Réglages > FacetWP.
Vous pouvez dès à présent commencer à créer des « Facets » : ce sont les différents éléments qui constitueront votre filtre. Cliquez sur Add New, puis nommez votre Facet. Choisissez ensuite le type de Facet que vous souhaitez mettre en place (Liste déroulante, Bouton Radio, Cases à cocher, etc.).
Dans notre exemple, je vais commencer par l’année de sortie du film, et je choisis de l’afficher sous forme de curseur. Et là, on découvre le premier point fort de FacetWP : il est compatible avec ACF ! Vous pouvez utiliser vos champs personnalisés ACF comme éléments du filtre, ce qui ouvre un champ de possibilités plutôt vaste ! Il suffit, dans la liste déroulante, de choisir votre champ personnalisé dans la section Advanced Custom Fields.
En fonction du type de Facet que vous aurez choisi, vous aurez quelques réglages à effectuer. Ensuite, il faut enregistrer votre Facet, et vous pouvez cliquer sur Retour pour revenir à la page précédente et créer d’autres Facets. Une fois que tous vos Facets sont créés, pensez à cliquer sur Réindexer : attention, c’est une étape indispensable, sans cela, votre filtre ne pourra pas s’afficher.
Ensuite, il suffit d’afficher les shortcodes de vos Facets dans vos pages, articles ou widgets : [facetwp facet=”my_facet”]
my_facet est à remplacer par le nom de votre Facet, que vous avez défini ici (il s’agit de l’élément inscrit en violet) :
Pour ma part, j’ai inséré mes Facets dans des Widgets texte et voici le résultat en Front-end.
Dans votre tableau de bord, à la droite de vos Facets, vous trouvez les templates. Ils permettent de créer des pages d’archives pour vos types de contenu de manière très simple. Le modèle par défaut affiche tous vos types de contenu sur une seule page, mais vous pourrez parfois avoir besoin de n’afficher sur une page que vos articles, vos produits, vos portfolios ou autres. Dans ce cas, cliquez sur Add New, nommez votre template puis, si vous n’êtes pas à l’aise avec le code, aidez-vous du Générateur de requête ouvert. Sélectionnez le(s) type(s) de contenu à afficher sur votre page, puis cliquez sur le bouton Envoyer à l’éditeur.
Dans l’encart Montrer le code, il suffit de copier coller la boucle WordPress, que vous pouvez trouver dans le modèle d’exemple ou dans la documentation : elle va se charger de récupérer et d’afficher les posts présents dans le(s) type(s) de contenu que vous aurez défini(s).
Enfin, pour utiliser ce template, il vous suffit de créer une nouvelle page et d’y glisser ce shortcode: [facetwp template=”my_template”]
La page affichera alors les types de contenu que vous aurez sélectionnés.
Les forces de FacetWP
- FacetWP est compatible avec ACF et les champs ACF sont simples à mettre en place avec FacetWP, c’est clairement ce qui le démarque de ses concurrents. Vous pouvez créer autant de champs que vous le souhaitez puis ensuite les utiliser comme éléments du filtre.
- FacetWP est aussi compatible avec WooCommerce : vous pouvez filtrer les produits en fonction de leurs prix, de leurs catégories, de leurs étiquettes, de leurs attributs, de leur disponibilité, etc.
- Le filtre se met automatiquement à jour en fonction des choix de l’internaute, lui permettant ainsi d’affiner sa recherche. Le filtre est cumulatif et il est recalculé à chaque action de l’internaute afin de pouvoir aboutir systématiquement à un résultat.
- Des add-ons permettent de pousser plus loin l’utilisation de FacetWP.
- La REST API + des hooks permettent aux développeurs de prendre la main sur FacetWP afin de le customiser et d’en modifier les fonctionnalités.
Les faiblesses de FacetWP
- Peu de réglages et d’options disponibles, notamment au niveau de l’affichage des résultats. Il faut passer par les templates, mais je trouve leur utilisation pas très intuitive pour les novices et pas très utile pour les utilisateurs plus avancés. Je préfère créer moi-même mes templates PHP, c’est plus propre et j’ai une meilleure maîtrise de l’affichage de mes contenus. De plus, la plupart des thèmes fournissent déjà les modèles de page de leurs types de contenu, l’utilisation des templates peut donc être redondante…
- Manque d’intuitivité : j’ai été obligée de me référer à la documentation pour ne pas manquer d’étapes (je considère qu’un plugin intuitif et ergonomique peut s’utiliser sans devoir recourir à sa documentation). Je n’avais pas calculé le bouton Réindexer, qui est INDISPENSABLE mais, paradoxalement, manque de visibilité. De plus, les shortcodes à afficher ne sont pas générés directement dans le back office, il faut revenir sur la documentation pour les trouver.
- Son prix assez élevé.
Passons maintenant au crible son concurrent, Search & Filter Pro, pour découvrir s’il fait mieux ou moins bien que FacetWP !
Découverte de Search & Filter Pro
Je vous laisse acheter, installer et activer le plugin.
Dans votre tableau de bord, un onglet Search & Filter est apparu. Cliquez sur Add New Search Form pour créer votre premier filtre.
Contrairement à FacetWP, vous ne créez pas plusieurs Facets à agencer ensuite dans vos pages / widgets à l’aide de shortcodes (vous en avez un pour chaque Facet). Ici, vous créez un filtre global (appelé Search Form) et vous ajoutez / agencez vos éléments à l’intérieur, à l’aide d’un Drag & Drop. Ensuite, vous avez un seul shortcode qui affiche l’ensemble du filtre. Je préfère cette utilisation, beaucoup plus claire et organisée.
Pour créer votre filtre, vous avez tout d’abord une séries de réglages à effectuer. Commencez par choisir le(s) type(s) de contenus que vous souhaitez filtrer. Ensuite vous pouvez configurer le nombre de résultats par page, vous pouvez choisir si le filtre affiche des résultats à chaque action de l’internaute ou non, vous pouvez définir la relation entre les différents éléments du filtre.
Dans l’onglet suivant, vous trouvez des options d’affichage des résultats. Chose intéressante, vous pouvez choisir le template php qui affichera vos résultats. Par défaut, il appelle le template search.php, mais vous pouvez définir le template de votre choix. Je trouve cette option géniale, elle vous permet de créer un template personnalisé et ainsi de customiser de manière poussée l’affichage de vos résultats.
Ensuite, il vous suffit de glisser / déposer les éléments du filtre que vous souhaitez afficher. Les éléments disponibles sont affichés dans la section Available Fields et il vous suffit de les glisser dans l’encart Search Form UI. Pour chaque élément ajouté, vous aurez quelques réglages à effectuer.
Ensuite il vous reste à copier / coller le shortcode du filtre dans vos pages ou à utiliser le widget Search & Filter, disponible dans votre page Widgets.
Présenté ainsi, ça semble plus simple et intuitif que FacetWP. ET ÇA L’EST.
Les forces de Search & Filter Pro
- Search & Filter Pro est également compatible avec WooCommerce. Il fonctionne aussi avec l’extension WP eCommerce.
- On apprécie la possibilité d’ajouter différents modes de tri des résultats et de contrôler leur affichage.
- On peut créer un élément de filtre pour les CPT.
- L’existence du widget Search & Filter facilitera son utilisation pour les novices, qui n’auront pas forcément besoin de recourir aux shortcodes.
- Search & Filter est beaucoup plus accessible que FacetWP au niveau des tarifs.
- Grâce à la création de Search Forms et à son système de Drag & Drop, Search & Filter Pro est flexible et intuitif.
- Il est possible aussi de paramétrer le filtre afin qu’il se recalcule automatiquement à chaque action de l’internaute : mais ce n’est pas automatique, il faut penser à cocher les cases Enable Auto Count et Update the Search Form on user interaction dans les réglages du filtre. Ensuite, pour chaque élément que vous ajoutez dans votre filtre, il faut cocher la case Hide Empty Terms.
Les faiblesses de Search & Filter
- Search & Filter Pro offre moins de possibilités que FacetWP en terme d’affichage : pour les taxonomies par exemple il n’existe que quatre types d’affichage – Checkbox, Dropdown, Radio, Multi-select).
- Search & Filter Pro est aussi compatible avec ACF, mais je trouve cette fonctionnalité moins bien exploitée qu’avec FacetWP, moins mise en valeur et moins intuitive. Il faut glisser / déposer l’élément de filtre Post Meta, sélectionner le slug de votre Champ ACF dans la liste des Meta Key (d’une il faut se souvenir du nom du slug du champ que l’on souhaite afficher, et de deux, chez moi, il est noyé dans une liste sans fin), puis penser à cocher la petite case tout en bas à droite « Is ACF Field ? ».
Le mot de la fin
FacetWP et Search & Filter Pro ont chacun leurs forces et leurs faiblesses. A vous de définir vos besoins et de choisir ensuite votre plugin en connaissance de cause. Search & Filter Pro est plus intuitif, plus simple à utiliser : je le recommande aux utilisateurs novices qui souhaiteraient mettre un filtre en place sans prise de tête. FacetWP est plus puissant pour les profils développeurs, si vous souhaitez mettre en place un filtre complexe et très personnalisé, je recommande FacetWP.
En ce qui me concerne, je resterai fidèle à Search & Filter Pro, il fait le job et il le fait bien : en espérant toutefois qu’il améliore à l’avenir les interactions avec ACF !
Et vous, quel plugin de filtre utilisez-vous ?
Article au top. Petite question concernant le UI du filtre. Ces plugins permettent ils d’afficher le label que l’on souhaite pour chacun des champs ?
Ex:
Au lieu de
“Genre du film: horreur, action, romantique…”
Mettre à la place un pictogramme pour chaque label.
Et toujours niveau UI, peut on jouer facilement avec le style des labels actifs (checked)? Donc s’ éloigner de la classique checkbox.
Merci ^^