Comment permettre aux utilisateurs de filtrer les articles et les pages dans WordPress (3 méthodes)

Une bibliothèque de contenu croissante est souvent le signe d'un site WordPress sain. Mais plus de contenu ne signifie pas toujours une meilleure expérience. Surtout lorsque les visiteurs ne trouvent pas ce qu'ils cherchent.

Nous avons vu cela se produire sur de nombreux blogs en croissance : des tonnes d'excellents articles, mais aucun moyen facile pour les visiteurs de les filtrer, alors ils partent frustrés.

Cela signifie qu'ajouter des filtres à vos articles et pages n'est pas juste un petit plus agréable. C'est indispensable si vous voulez garder les visiteurs engagés.

Lorsque les gens peuvent trier rapidement votre contenu par catégorie, tag, date, ou même champs personnalisés, ils sont beaucoup plus susceptibles de rester et d'explorer.

Nous avons passé beaucoup de temps à rechercher et tester différentes solutions de filtrage pour résoudre ce problème. Dans ce guide, nous vous présenterons 3 des moyens les plus simples et les plus efficaces pour permettre aux utilisateurs de filtrer les articles et les pages dans WordPress en utilisant SearchWP, WPCode et le plugin Search & Filter.

Pourquoi ajouter une fonctionnalité de filtrage pour vos articles et pages WordPress ?

Avez-vous déjà visité un site Web WordPress débordant de contenu, pour ensuite avoir du mal à trouver ce dont vous avez besoin ? Cela peut être une expérience frustrante pour les utilisateurs et les amener à abandonner complètement votre site.

En fin de compte, cela peut avoir un impact négatif sur le SEO, car les moteurs de recherche considèrent l'expérience utilisateur comme un facteur de classement. Un site Web avec des taux de rebond élevés et un faible engagement pourrait être considéré comme moins précieux par les moteurs de recherche.

Heureusement, il existe une solution simple : implémenter une fonctionnalité de recherche et de filtrage sur votre site WordPress. Cet outil puissant permet aux utilisateurs de restreindre le contenu en fonction de critères spécifiques, ce qui leur permet de trouver facilement ce qu'ils recherchent.

Une fonctionnalité de recherche et de filtrage n'est pas seulement utile pour les blogs WordPress. Elle est également idéale pour les sites comme les forums avec des milliers de discussions. Ainsi, les utilisateurs peuvent rechercher la discussion appropriée par sujet, date ou auteur.

Ou, si vous avez un site de podcast, les auditeurs peuvent rechercher leur épisode préféré en utilisant la fonctionnalité.

Dans cette optique, nous allons vous montrer 3 méthodes simples pour permettre aux utilisateurs de filtrer les articles et les pages sur votre site WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour accéder à la méthode de votre choix :

• Méthode 1 : Filtrer les articles et les pages avec SearchWP (Recommandé)
• Méthode 2 : Filtrer les articles et les pages avec du code personnalisé (Avancé)
• Méthode 3 : Filtrer les articles et les pages avec le plugin Search & Filter (Gratuit)
• Conseil bonus : Ajoutez une recherche Ajax en direct à votre site WordPress

Prêt ? Allons-y !

Méthode 1 : Filtrer les articles et les pages avec SearchWP (Recommandé)

SearchWP est un puissant plugin de recherche WordPress et notre principale recommandation pour ajouter une fonctionnalité de filtrage à votre site Web. Il est très convivial, ce qui en fait un excellent choix pour les débutants.

Voici un guide étape par étape sur la façon d'utiliser SearchWP pour créer un formulaire de recherche personnalisé avec des options de filtrage.

Étape 1 : Installer et configurer SearchWP

Tout d'abord, vous devrez installer et activer le plugin SearchWP. Si vous débutez, nous avons un guide utile sur comment installer un plugin WordPress.

Une fois activé, vous pouvez aller dans SearchWP » Paramètres. Ensuite, dans l'onglet « Général », entrez votre clé de licence pour l'activer.

Maintenant, allons dans SearchWP » Algorithme. Ici, vous pouvez soit modifier le moteur de recherche par défaut, soit en créer un supplémentaire.

Le moteur par défaut permet aux utilisateurs de rechercher dans les pages, les articles, les fichiers multimédias et les commentaires, ce qui est idéal pour un blog WordPress typique.

D'un autre côté, le moteur de recherche supplémentaire peut utiliser d'autres sources comme les catégories, les étiquettes, les types de publication personnalisés et les taxonomies personnalisées. Cela peut être utile pour créer un formulaire de recherche et de filtrage de contenu non-blog, comme un filtre de produits eCommerce pour les sites Web WooCommerce.

Pour ce tutoriel, nous allons nous en tenir au moteur par défaut et simplement ajuster ses paramètres. Pour ce faire, vous pouvez cliquer sur « Sources & Paramètres ».

Puisque nous créons une fonction de recherche et de filtrage pour filtrer les articles et les pages, nous inclurons uniquement les pages et les articles comme sources pour le moteur de recherche WordPress.

Nous avons également activé la fonctionnalité « Racines de mots-clés », qui permet à SearchWP d'afficher des résultats même si le mot-clé n'est pas une correspondance exacte.

Une fois que vous êtes satisfait des paramètres, vous pouvez simplement cliquer sur « Terminé ».

Étape 2 : Affinez votre moteur de recherche

Vous verrez maintenant une section pour toutes les sources que vous avez sélectionnées (dans notre cas, uniquement les articles et les pages).

Chaque source a des curseurs pour la « Pertinence des attributs applicables ». Ces curseurs déterminent le poids que SearchWP accorde à chaque attribut lors du classement des résultats de recherche.

En termes simples, le contenu qui correspond étroitement à un attribut pondéré apparaîtra plus haut dans les résultats de recherche.

Par exemple, si vous accordez plus de poids à l'attribut « Contenu de l'article » qu'à l'attribut « Titre de l'article », SearchWP privilégiera les résultats où le terme de recherche apparaît dans le contenu lui-même.

Vous pouvez ajuster ces curseurs selon vos préférences.

Vous pouvez également cliquer sur « Ajouter/Supprimer des attributs ».

Cela fera apparaître une fenêtre contextuelle pour inclure ou supprimer d'autres attributs.

Par exemple, vous pourriez inclure des taxonomies personnalisées ou des champs personnalisés pour les rendre recherchables.

Une autre fonctionnalité puissante est la possibilité de créer des règles qui incluent ou excluent du contenu spécifique des résultats de recherche.

Pour ce faire, cliquez simplement sur le bouton « Modifier les règles ».

Ce paramètre vous permet de filtrer le contenu non pertinent ou de mettre en évidence des catégories spécifiques.

Dans la fenêtre contextuelle suivante, vous pouvez cliquer sur « Ajouter une règle ».

Maintenant, cliquez simplement sur le menu déroulant et choisissez « Afficher uniquement les entrées si » ou « Exclure les entrées si ».

Ensuite, vous pouvez choisir d'exclure ou d'inclure le contenu s'il fait partie d'une taxonomie spécifique, a été publié dans une certaine période, ou a un certain ID.

Pour ajouter une autre règle, cliquez simplement sur le bouton « Ajouter une règle » et répétez le même processus décrit ci-dessus. Lorsque vous êtes satisfait de la configuration des règles, cliquez sur « Terminé ».

Vous pouvez répéter le même processus pour les autres sources d'entrée de recherche, si nécessaire.

Lorsque vous êtes satisfait du moteur de recherche, vous pouvez revenir en haut de la page et cliquer sur « Enregistrer ».

SearchWP va maintenant reconstruire l'index, ce qui peut prendre quelques minutes.

Une fois que vous voyez « Statut de l'index 100 % », cela signifie que SearchWP a indexé tout votre contenu et vos règles pour le moteur de recherche.

Étape 3 : Créer un formulaire de recherche personnalisé

Maintenant que le moteur de recherche est configuré, créons un formulaire de recherche convivial avec des options de filtrage.

Pour commencer, allons dans SearchWP » Formulaires de recherche, puis cliquons sur « Ajouter ».

Sur l'écran suivant, la première chose que vous ferez est de donner un nom reconnaissable à votre formulaire.

Ceci est juste pour votre référence interne, donc le nom peut être tout ce qui est facile à retenir pour vous.

Ensuite, vous choisirez une mise en page.

Pour ce tutoriel, nous utiliserons l'option « Combiné », car elle offre le plus de menus de filtrage.

Maintenant, vous pouvez faire défiler vers le bas jusqu'à la section « Style personnalisé » et sélectionner les options « Recherche par catégorie » et « Recherche avancée ». Cela garantit que votre formulaire inclut toutes les fonctionnalités de filtrage.

Vous pouvez éventuellement choisir « Recherche rapide » si vous souhaitez ajouter des termes de recherche suggérés sous la barre de recherche.

Ensuite, dans le menu « Moteur », vous sélectionnerez le moteur de recherche que vous avez créé précédemment.

Quant aux « Résultats », vous pouvez choisir la page de résultats de recherche à utiliser : les résultats par défaut de WordPress ou la version de SearchWP.

Dans le « Type de recherche », sélectionnons « Articles » et « Pages ».

En dessous, vous pouvez ajouter les noms des catégories que vous souhaitez inclure dans le menu de filtre.

Pour le « Libellé du champ », entrez un texte d'espace réservé qui apparaît dans le champ de recherche, comme « Que recherchez-vous ? ».

Si vous avez sélectionné « Recherche rapide » précédemment, vous pouvez inclure les termes que les utilisateurs pourraient rechercher couramment dans les « Éléments de recherche rapide ».

Dans le « Filtre(s) de recherche avancée », choisissez simplement les options de filtrage que vous souhaitez proposer aux utilisateurs, telles que « Auteurs », « Types de publication » ou « Étiquettes ».

Enfin, dans « Style du formulaire » et « Style du bouton », personnalisez l'apparence du formulaire de recherche pour qu'elle corresponde au design de votre site web.

Vous pouvez changer les couleurs, les polices et les formes du formulaire de recherche.

Une fois que tout est configuré, vous pouvez remonter.

Ensuite, il est temps de cliquer sur « Enregistrer » pour créer votre formulaire de recherche.

Étape 4 : Intégrer le formulaire de recherche et de filtrage

Le plugin SearchWP vous permet d'intégrer facilement le formulaire de recherche sur le front-end de votre site web, comme sur votre page d'accueil ou dans les zones prêtes pour les widgets. Ici, nous allons vous montrer comment l'ajouter à une page en utilisant l'éditeur de blocs WordPress et le bloc Formulaire de recherche.

Tout d'abord, vous pouvez ouvrir la page ou l'article auquel vous souhaitez ajouter le formulaire. Ensuite, cliquons sur l'icône « + Ajouter un bloc » et recherchons « Formulaire de recherche ».

Dans le panneau latéral « Paramètres du bloc », vous choisirez le formulaire que vous avez créé dans le menu déroulant.

Enfin, cliquez simplement sur « Publier » ou « Mettre à jour » pour voir le formulaire de recherche en direct.

Pour plus d'informations, vous pouvez consulter ces guides étape par étape :

• Comment ajouter un formulaire de recherche dans un article WordPress
• Comment ajouter une barre de recherche au menu WordPress

Alternativement, vous pouvez afficher le formulaire à l'aide d'un shortcode.

Pour ce faire, vous devrez trouver le shortcode de votre formulaire spécifique en allant dans SearchWP » Formulaires de recherche et en copiant le code dans la colonne « Shortcode ».

Nous avons un guide sur comment ajouter des shortcodes dans WordPress si vous avez besoin d'aide.

Avec le formulaire de recherche et les options de filtrage en place, vos visiteurs peuvent désormais trouver facilement le contenu qu'ils recherchent sur votre site web.

Cela améliore non seulement l'expérience utilisateur, mais peut également les encourager à explorer différentes catégories et à découvrir davantage votre contenu précieux.

Méthode 2 : Filtrer les articles et les pages avec du code personnalisé (Avancé)

La méthode suivante utilisera du code personnalisé. Pour les débutants, ce processus peut sembler intimidant, mais nous avons testé le code pour nous assurer qu'il fonctionne correctement avec votre site web.

De plus, nous utiliserons WPCode, qui est le meilleur plugin d'extraits de code sur le marché. Ce plugin permet d'insérer du code personnalisé en toute sécurité sans avoir à manipuler directement les fichiers de votre site web, vous êtes donc moins susceptible de le casser.

Certaines de nos marques partenaires utilisent WPCode pour ajouter et gérer des extraits de code personnalisés, et elles l'adorent. Nous l'avons également testé et avons constaté qu'il fonctionne exceptionnellement bien. Vous pouvez en savoir plus sur nos expériences dans notre avis complet sur WPCode.

La première étape consiste à installer et activer WPCode. Pour plus d'informations, vous pouvez consulter notre guide sur comment installer un plugin WordPress.

Une fois cela fait, vous pouvez aller dans Snippets de code » + Ajouter un snippet dans votre zone d'administration WordPress.

Ensuite, sélectionnons « Ajouter votre code personnalisé (Nouveau snippet » et cliquons sur le bouton « Utiliser le snippet ».

Maintenant, il y a 2 types de snippets de code que vous devez ajouter. Passons-les en revue un par un :

Ajout d'un code de filtre WordPress

Ce code indique à WordPress de filtrer les résultats de recherche de l'utilisateur en fonction des options qu'il a sélectionnées dans le formulaire de recherche. Il fonctionnera avec un autre snippet de code qui crée le formulaire de recherche, dont nous discuterons plus tard.

Tout d'abord, vous devez donner un nom à votre nouveau snippet. Il peut s'agir de quelque chose d'aussi simple que « Filtre de recherche WordPress ».

Ensuite, vous devrez changer le « Type de code » en « Snippet PHP ».

Ensuite, copiez simplement le code suivant et collez-le dans la boîte « Aperçu du code » :

function wpb_filter_posts($query) {
if ($query->is_main_query() && $query->is_search) {

// Category filter
if (isset($_GET['category'])) {
$category = get_category_by_slug($_GET['category']);
if ($category) {
$query->set('cat', $category->term_id);
}
}

// Published date filter based on URL structure
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$url_parts = explode('/', trim($url_path, '/'));
if (count($url_parts) >= 4 && is_numeric($url_parts[0]) && is_numeric($url_parts[1]) && is_numeric($url_parts[2])) {
$year = $url_parts[0];
$month = $url_parts[1];
$day = $url_parts[2];
$query->set('date_query', array(
array(
'year' => $year,
'month' => $month,
'day' => $day,
),
));
}

// Include posts without categories or tags
$query->set('post_status', 'publish');
$query->set('post_type', 'post');
$query->set('posts_per_page', -1);

// Include post types
if (isset($_GET['post_type']) && $_GET['post_type'] == 'page') {
$query->set('post_type', array('page'));
} else {
$query->set('post_type', array('post', 'page', 'custom_post_type'));
}
}
}

add_action('pre_get_posts', 'wpb_filter_posts');

Ce snippet de code vérifie si l'utilisateur a choisi des filtres dans le formulaire de recherche. Par exemple, si un filtre de catégorie est sélectionné, le code peut identifier cette catégorie et n'afficher que les articles qui lui appartiennent.

Il peut également filtrer les résultats par date en recherchant l'année, le mois et le jour spécifiques que l'utilisateur a choisis.

Enfin, le code vérifie et filtre les résultats en fonction de si l'utilisateur souhaite voir uniquement les articles, les pages ou tous les types d'articles (y compris les types de publication personnalisés).

Une fois le code collé, faites défiler jusqu'à la section « Emplacement d'insertion ». Par défaut, la méthode d'insertion sera « Insertion automatique » et l'emplacement sera « Exécuter partout ».

Vous pouvez laisser ces paramètres tels quels afin que le code puisse être ajouté au fichier functions.php de votre thème WordPress et fonctionner correctement.

Ensuite, activez simplement le fragment de code et cliquez sur « Enregistrer le fragment ».

Ajout d'un code de formulaire de recherche WordPress

Le code suivant créera un formulaire de recherche personnalisé, que vous pourrez intégrer plus tard à l'aide d'un shortcode.

Vous pouvez ajouter du code personnalisé à l'aide de WPCode en répétant les mêmes étapes. Ensuite, vous pouvez nommer ce code « Formulaire de recherche WordPress » et changer le type de code en « Fragment PHP ».

Maintenant, vous pouvez coller le fragment de code ci-dessous dans la boîte « Aperçu du code » :

function wpb_filter_posts_form() {
$categories = get_categories();
$tags = get_tags();
$post_types = get_post_types(array('public' => true));
$output = '<form action="' . home_url('/') . '" method="get">';
$output .= '<input type="search" name="s" placeholder="Search...">';

// Category dropdown
$output .= '<select name="category">';
$output .= '<option value="" selected>All Categories</option>';
foreach ($categories as $category) {
$output .= '<option value="' . $category->slug . '">' . $category->name . '</option>';
}
$output .= '</select>';

// Tag dropdown
$output .= '<select name="tag">';
$output .= '<option value="" selected>All Tags</option>';
foreach ($tags as $tag) {
$output .= '<option value="' . $tag->slug . '">' . $tag->name . '</option>';
}
$output .= '</select>';

// Post type dropdown
$output .= '<select name="post_type">';
$output .= '<option value="all" selected>All Post Types</option>';
foreach ($post_types as $post_type) {
$post_type_object = get_post_type_object($post_type);
$output .= '<option value="' . $post_type . '">' . $post_type_object->label . '</option>';
}
$output .= '</select>';

// Year dropdown
$output .= '<select name="year">';
$output .= '<option value="">Select Year</option>';
for ($year = date('Y'); $year >= 2000; $year--) {
$output .= '<option value="' . $year . '">' . $year . '</option>';
}

$output .= '</select>';
// Month dropdown
$output .= '<select name="month">';
$output .= '<option value="">Select Month</option>';
for ($month = 1; $month <= 12; $month++) {
$output .= '<option value="' . sprintf('%02d', $month) . '">' . date('F', mktime(0, 0, 0, $month, 1)) . '</option>';
}
$output .= '</select>';

// Day dropdown
$output .= '<select name="day">';
$output .= '<option value="">Select Day</option>';
for ($day = 1; $day <= 31; $day++) {
$output .= '<option value="' . sprintf('%02d', $day) . '">' . $day . '</option>';
}
$output .= '</select>';
$output .= '<input type="submit" value="Search">';
$output .= '</form>';
return $output;
}

add_shortcode('wpb_filter_posts_form', 'wpb_filter_posts_form');

Ce code crée un shortcode appelé [wpb_filter_posts_form], qui ajoutera un formulaire permettant aux utilisateurs de rechercher sur votre site. Le formulaire comprend une barre de recherche pour les mots-clés et plusieurs menus déroulants pour le filtrage.

Le code récupère les catégories, les étiquettes et les types de publication disponibles sur votre site pour les menus déroulants de la barre de recherche. Les utilisateurs peuvent choisir des catégories, des étiquettes ou des types de publication spécifiques pour affiner leurs résultats de recherche.

De plus, le code inclut des listes déroulantes pour l'année, le mois et le jour afin de filtrer encore plus précisément par date. Enfin, il ajoute un bouton de soumission pour lancer la recherche avec les filtres choisis.

Comme dans le code précédent, vous pouvez laisser les paramètres « Méthode d'insertion » tels quels. Ensuite, activez simplement le code et enregistrez-le.

Intégrer le shortcode du formulaire de recherche

À ce stade, vous pouvez ajouter le shortcode [wpb_filter_posts_form] à un article, une page, un modèle de thème ou une zone prête pour les widgets. Pour plus d'informations, vous pouvez consulter notre guide sur comment ajouter des shortcodes dans WordPress.

Dans ce cas, nous allons ajouter le shortcode à une page de recherche personnalisée. Si vous souhaitez faire de même, allez-y et créez une nouvelle page dans WordPress.

Ensuite, personnalisez la page de recherche en utilisant les blocs dont vous avez besoin. Par exemple, vous pouvez ajouter des images ou du texte pour indiquer aux lecteurs comment utiliser la barre de recherche.

Après cela, vous pouvez simplement cliquer sur le bouton « + Ajouter un bloc » et sélectionner le bloc « Shortcode ».

Une fois terminé, insérez simplement le shortcode [wpb_filter_posts_form] dans le champ approprié.

L'étape suivante consiste à cliquer sur le bouton « Publier », « Mettre à jour » ou « Enregistrer » pour rendre vos modifications publiques.

Vous devriez maintenant voir votre nouveau formulaire de recherche personnalisé.

Voici à quoi cela ressemble sur notre site de démonstration :

Méthode 3 : Filtrer les articles et les pages avec le plugin Search & Filter (Gratuit)

La dernière méthode consiste à utiliser le plugin Search & Filter, qui est disponible gratuitement. C'est une excellente option si vous recherchez un moyen simple et rapide d'activer la fonction de recherche et de filtrage sur votre page de blog WordPress.

Ce que vous devez faire, c'est installer et activer le plugin Search & Filter. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, le plugin ajoutera un nouvel élément de menu intitulé « Search & Filter » à votre zone d'administration WordPress. Cliquer dessus vous mènera à la page d'utilisation du plugin avec une documentation détaillée sur son utilisation.

Le plugin Search & Filter est livré avec un shortcode qui accepte différents paramètres pour afficher les options de filtrage. Vous pouvez utiliser ce shortcode dans un article, une page ou à l'intérieur d'un widget de texte :

[searchandfilter fields="search,category,post_tag"]

Ceci affichera les options de filtrage avec les champs de recherche, de catégorie et d'étiquette :

L'avantage du plugin est que vous pouvez personnaliser les options de filtrage disponibles en modifiant les balises de shortcode.

Par exemple, si vous souhaitez inclure les champs catégorie, étiquette, type de publication et date dans la barre de recherche, vous devrez utiliser ce shortcode :

[searchandfilter fields="search,category,post_tag,post_types,post_date"]

Voici à quoi cela ressemble :

Si vous ne souhaitez pas utiliser de menus déroulants, vous pouvez également utiliser des cases à cocher et ajouter des étiquettes pour chaque champ.

Dans le shortcode ci-dessous, nous indiquons au plugin d'afficher la barre de recherche avec des cases à cocher pour les options de catégorie :

[searchandfilter headings="Sélectionnez les catégories :" types="checkbox" fields="category"]

Veuillez consulter l'exemple ci-dessous :

De plus, vous pouvez indiquer au plugin d'utiliser des cases à cocher pour certaines options de filtre et des menus déroulants pour d'autres dans un seul shortcode.

Voici le shortcode que nous avons utilisé pour inclure les types de publication, les catégories et les étiquettes dans la barre de recherche. Nous avons demandé au plugin d'utiliser des cases à cocher pour l'option de types de publication :

[searchandfilter headings="Type de publication, Catégorie, Étiquette" types="checkbox, select, select" fields="post_types,category,post_tag"]

N'hésitez pas à consulter la documentation du plugin pour découvrir d'autres façons d'utiliser le shortcode.

Conseil bonus : Ajoutez une recherche Ajax en direct à votre site WordPress

Maintenant que vous savez comment permettre aux utilisateurs de filtrer les articles et les pages, vous pouvez aller plus loin et améliorer l'expérience de recherche avec la recherche Ajax en direct.

La recherche Ajax en direct utilise une technologie en temps réel pour afficher les résultats de recherche pendant que les utilisateurs tapent leurs requêtes. Cela signifie qu'il n'y a plus d'attente pour le rafraîchissement d'une page. Les résultats apparaîtront instantanément, rendant le processus de recherche beaucoup plus rapide et plus pratique pour vos visiteurs.

Une expérience de recherche plus rapide signifie que vous pouvez garder les utilisateurs plus longtemps sur votre site, augmentant les vues de page et réduisant le taux de rebond.

La bonne nouvelle est que vous pouvez facilement ajouter cette fonctionnalité à votre site avec un plugin gratuit appelé SearchWP Live Ajax Search. Vous pouvez lire notre tutoriel WordPress sur comment ajouter la recherche Ajax en direct à votre site Web pour plus d'informations.

Nous espérons que cet article vous a aidé à apprendre comment permettre aux utilisateurs de filtrer les articles et les pages dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment créer un annuaire web et notre sélection d'experts de plugins de recherche WordPress pour améliorer la recherche de votre site.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.