Les champs personnalisés sont un moyen puissant d'afficher des informations supplémentaires sur un site WordPress.
Par exemple, vous pouvez les utiliser pour stocker des détails tels que le SKU du produit, la couleur, les ingrédients d'une recette ou le prix d'un bien immobilier.
Cependant, présenter ces données aux visiteurs d'une manière avec laquelle ils peuvent interagir est souvent un défi.
C'est là que la création d'un filtre pour vos champs personnalisés aide les utilisateurs à affiner les résultats et à trouver exactement ce dont ils ont besoin. Heureusement, il existe un moyen simple de permettre aux utilisateurs de trier le contenu en fonction de ces données personnalisées.
Dans cet article, nous vous montrerons comment créer des filtres de champs personnalisés dans WordPress.
Pourquoi les filtres de champs personnalisés sont-ils importants pour votre site ?
Nous savons par expérience que les champs personnalisés sont parfaits pour stocker des données supplémentaires. Mais ces données sont inutiles si les visiteurs ne peuvent pas les utiliser pour trier le contenu.
Imaginez essayer d'acheter une chemise en ligne mais devoir cliquer sur chaque produit juste pour voir s'il est disponible dans votre taille. C'est exactement ce qui se passe lorsque vous n'avez pas de filtres connectés à vos champs personnalisés.
Examinons un site immobilier comme exemple. Vous pourriez utiliser des champs personnalisés pour stocker le nombre de chambres ou la superficie totale d'une maison.
Sans filtre pour ces champs, une famille à la recherche d'une maison de trois chambres doit parcourir toutes les annonces de studios.
Il en va de même pour un blog culinaire. Nous voyons souvent des champs personnalisés utilisés pour des détails spécifiques tels que le nombre de calories ou le temps de préparation.
Si un visiteur souhaite un repas rapide de 30 minutes, il ne devrait pas avoir à lire de longues recettes de mijoteuse pour en trouver une.
Les visiteurs veulent trouver les choses rapidement. S'ils ne peuvent pas filtrer par prix, emplacement ou ingrédients spécifiques, ils quitteront probablement votre site.
L'ajout de ces filtres spécifiques comble le fossé entre les données supplémentaires et l'expérience utilisateur. Cela transforme une liste encombrée en un catalogue organisé.
Voyons maintenant comment vous pouvez facilement configurer un filtre de champs personnalisés dans WordPress.
Créer des filtres de champs personnalisés dans WordPress
La méthode la plus simple pour ajouter des filtres de champs personnalisés consiste à utiliser un plugin tel que WPFilters.
WPFilters est le plugin de filtrage le plus performant, convivial pour les débutants et qui vous permet d'ajouter des filtres de style Amazon à votre site WordPress.
Il vous permet de créer des ensembles de filtres personnalisés basés sur des catégories, des tags ou des données personnalisées et de les placer n'importe où sur votre site.
Cela permet à vos visiteurs de parcourir votre contenu pour trouver exactement ce dont ils ont besoin en quelques secondes.
WPFilters est développé par la même équipe derrière SearchWP. Cela nous donne confiance qu'il fonctionnera parfaitement avec nos résultats de recherche.
Avec WPFilters, vous pouvez transformer un simple champ de texte en cases à cocher, listes déroulantes, curseurs de plage, boutons radio et autres filtres. Cela met la puissance de vos données personnalisées entre les mains de vos visiteurs.
Voyons maintenant comment vous pouvez l'utiliser pour créer des filtres de champs personnalisés sur votre site.
Étape 1 : Installer et Activer WPFilters
Tout d'abord, vous devrez vous rendre sur le site Web de SearchWP pour obtenir votre copie de WPFilters.
Une fois inscrit, connectez-vous à votre espace client et cliquez sur l'onglet Téléchargements.
Ici, cliquez sur le bouton Download WPFilters pour enregistrer le fichier sur votre ordinateur. Nous vous recommandons également de copier votre clé de licence dès maintenant pour l'avoir prête pour plus tard.
Ensuite, vous devez télécharger et installer le plugin sur votre site. Si vous débutez, veuillez consulter ce guide sur comment installer un plugin WordPress.
Après l'activation, l'assistant de configuration apparaîtra. Cliquez sur le bouton « Commencer » pour terminer la configuration initiale.
Étape 2 : Créer un nouvel élément de filtre
Pour commencer, naviguez simplement vers WPFilters » Éléments depuis votre tableau de bord WordPress.
Ensuite, cliquez sur le bouton Ajouter pour commencer à créer votre filtre.
À partir d'ici, vous devriez donner un nom clair à votre filtre en haut. Cela vous aide à garder une trace des choses si vous prévoyez de créer plusieurs filtres plus tard.
Ensuite, regardez la section Type de champ. Vous pouvez choisir l'apparence de votre filtre, comme des cases à cocher, un menu déroulant, un curseur ou des boutons radio.
Par exemple, un curseur fonctionnera mieux si vous souhaitez que les visiteurs filtrent par prix, une case à cocher est idéale pour trier les articles en utilisant plusieurs options, ou un menu déroulant pour sélectionner une marque.
Vous pouvez également permettre aux utilisateurs de filtrer par mots-clés spécifiques en utilisant le champ de filtre de recherche.
Étape 3 : Connecter le filtre à un champ personnalisé
Maintenant, vous devez indiquer au filtre où trouver ses informations. Pour ce faire, faites simplement défiler vers le bas jusqu'à la section Source de données.
Ensuite, cliquez sur le menu déroulant et faites défiler jusqu'à la section Champ personnalisé. À partir d'ici, vous pouvez choisir le champ personnalisé que vous souhaitez utiliser pour créer un filtre.
Par exemple, vous pouvez choisir le prix, la couleur, les marques, le poids, la longueur et d'autres attributs de produit.
WPFilters fonctionne également de manière transparente avec des plugins de champs personnalisés comme Advanced Custom Fields (ACF). Vous pouvez facilement créer un filtre pour n'importe lequel des champs ACF sur votre site.
Étape 4 : Personnaliser les paramètres du filtre
Après avoir connecté la source de données, vous devez rendre le filtre attrayant pour les visiteurs en le personnalisant.
Vous pouvez commencer par faire défiler vers le bas jusqu'à la section Conteneur pour modifier le comportement de la boîte de filtre.
Par exemple, activer l'option « Afficher le titre » permet aux utilisateurs de savoir ce qu'ils filtrent, comme « Gamme de prix » ou « Ingrédients ».
Ou vous pouvez activer l'option « Repliable » pour permettre aux utilisateurs de masquer le filtre afin de gagner de la place. Nous aimons également utiliser l'option « Horizontale » pour placer les choix côte à côte au lieu d'une longue liste verticale.
Ensuite, regardez la section Éléments ci-dessous pour contrôler les choix spécifiques dans la liste.
Ici, vous pouvez activer le « Nombre d'éléments » pour afficher exactement combien de résultats existent pour chaque option, ce qui aide à gérer les attentes des utilisateurs. Nous suggérons généralement de laisser « Afficher vide » désactivé afin que vos visiteurs ne perdent pas de temps à cliquer sur des options qui ne mènent à aucun résultat.
Une fois que vous êtes satisfait de l'apparence de tout, faites simplement défiler vers le haut et cliquez sur le bouton Enregistrer en haut à droite.
Vous verrez également un aperçu du filtre de champs personnalisés dans le panneau de gauche.
Étape 5 : Afficher le filtre de champs personnalisés sur votre site
Le meilleur atout de WPFilters est que vous pouvez placer votre nouveau filtre n'importe où sur votre site web.
Voyons comment ajouter le filtre à une page et à la barre latérale de votre site.
1. Ajout du filtre de champs personnalisés à une page
Le plugin offre une option d'intégration intégrée lors de la création du filtre. Cliquez simplement sur le bouton « Intégrer » dans le coin supérieur droit.
Ensuite, une fenêtre contextuelle s'ouvrira où vous pourrez choisir parmi différentes options d'intégration.
Vous pouvez choisir entre le bloc Gutenberg, un shortcode, ou du code PHP si vous êtes développeur.
Il existe également une option pour ajouter le filtre à une page existante ou en créer une nouvelle.
Par exemple, disons que vous souhaitez utiliser le « Bloc Gutenberg » et l'ajouter à une nouvelle page.
Ensuite, vous devrez entrer le nom de la nouvelle page, puis cliquer sur le bouton « C'est parti ».
Votre filtre de champs personnalisés sera alors préchargé sur la nouvelle page, et vous pourrez le visualiser dans l'éditeur de contenu WordPress.
Ensuite, vous pouvez cliquer sur le bouton « Publier » dans le coin supérieur droit.
D'autre part, vous pouvez également placer le bloc WPFilters manuellement sur n'importe quelle page ou article.
Pour commencer, ouvrez simplement la page ou l'article où vous souhaitez que le filtre apparaisse, cliquez sur le bouton plus (+) pour ajouter un nouveau bloc, et recherchez l'élément WPFilters Element.
Ensuite, vous devrez sélectionner le filtre que vous venez de créer dans le panneau des paramètres.
Cliquez simplement sur le menu déroulant sous l'option « Sélectionner l'élément » et choisissez votre filtre.
Lorsque vous avez terminé, cliquez sur le bouton « Enregistrer ».
2. Ajout du filtre de champs personnalisés à la barre latérale
Vous pouvez également ajouter le filtre à la barre latérale de votre site web. C'est un excellent moyen de garder les filtres visibles pour les utilisateurs afin qu'ils puissent rapidement trier et trouver le bon produit ou contenu.
Pour commencer, vous pouvez accéder à Apparence » Widgets depuis votre tableau de bord WordPress. Notez que cette étape peut différer en fonction du thème WordPress que vous utilisez.
Ensuite, faites défiler jusqu'à la section de la barre latérale et cliquez sur le signe « + » pour ajouter le bloc de widget WPFilters Element.
À partir de là, vous pouvez sélectionner le filtre de champs personnalisés que vous avez créé dans le panneau des paramètres à droite.
Cliquez simplement sur le menu déroulant « Sélectionner un élément » et choisissez votre filtre.
Lorsque vous avez terminé, cliquez sur le bouton Mettre à jour.
Maintenant, visitez la page pour voir le filtre de champs personnalisés en action.
Par exemple, voici à quoi ressemblent différents filtres de champs personnalisés sur notre boutique en ligne de démonstration.
FAQ sur les filtres de champs personnalisés
1. Puis-je utiliser des filtres pour les données des champs personnalisés avancés (ACF) ?
Oui, absolument. Nous utilisons ACF sur plusieurs de nos sites, et WPFilters fonctionne parfaitement avec.
2. Puis-je ajouter plus d'un filtre de champs personnalisés à une page ?
Absolument. Vous pouvez créer des éléments de filtre distincts pour différents champs, comme un pour la « Couleur » et un autre pour la « Taille ». Pour les rendre plus visibles, vous pouvez les empiler dans votre barre latérale afin que les utilisateurs puissent affiner les résultats étape par étape.
3. Dois-je connaître le codage pour configurer cela ?
Pas du tout. Le principal avantage de l'utilisation de WPFilters est qu'il s'occupe du travail technique pour vous. Il vous aide à configurer des filtres avancés simplement en naviguant dans les menus, sans toucher à un seul fichier PHP.
Les filtres de champs personnalisés modifient la façon dont les visiteurs interagissent avec vos données.
Nous espérons que ce tutoriel vous a aidé à apprendre comment les créer dans WordPress sans aucun codage. Vous voudrez peut-être aussi consulter nos guides sur comment ajouter une recherche en direct à votre site et comment rechercher par catégorie dans WooCommerce.
Prêt à offrir à vos visiteurs une meilleure façon de trier le contenu ? Vous pouvez commencer avec WPFilters ici.
