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

Vous souhaitez permettre aux utilisateurs/utilisatrices de filtrer les publications et les pages de votre site WordPress ?

Les utilisateurs/utilisatrices se rendent souvent sur votre site à la recherche d’un type de contenu spécifique. Avis : ils s’intéressent peut-être à vos derniers tutoriels ou à vos avis sur des produits. Ne serait-il pas utile qu’ils puissent facilement filtrer votre contenu pour trouver exactement ce qu’ils recherchent ?

Dans cet article, nous allons vous afficher comment permettre aux utilisateurs/utilisatrices de filtrer les publications et les pages dans WordPress à l’aide d’une fonctionnalité pratique de recherche et de filtre.

Pourquoi ajouter une fonctionnalité de filtre pour vos publications et pages WordPress ?

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

En fin de compte, cela peut avoir un impact négatif sur le référencement puisque les moteurs de recherche considèrent l’expérience utilisateur comme un facteur de classement. Un site avec des taux de rebond élevés et un faible engagement pourrait être considéré comme ayant moins de valeur par les moteurs de recherche.

Heureusement, il existe une solution simple : la mise en place d’une fonctionnalité de recherche et de filtre sur votre site WordPress. Cet outil puissant permet aux utilisateurs/utilisatrices d’affiner le contenu en fonction de critères spécifiques, ce qui facilite la tâche pour trouver ce qu’ils/elles recherchent.

Une fonctionnalité de recherche et de filtre n’est pas seulement utile pour les blogs WordPress. Elle est également idéale pour les sites tels que les forums qui comptent des milliers de fils de discussion. Ainsi, les auteurs/utilisatrices peuvent rechercher la bonne discussion en fonction du Sujet, de la date ou de l’auteur/autrice.

Si vous disposez d’un site de podcast, les auditeurs peuvent rechercher l’épisode de leur choix à l’aide de cette fonctionnalité.

Avec cela à l’esprit, regardons 3 méthodes faciles pour permettre aux utilisateurs/utilisatrices de filtrer les publications et les pages sur votre site WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour aller à votre méthode préférée :

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

SearchWP est une puissante extension de recherche WordPress et est notre meilleure recommandation pour ajouter une fonctionnalité de filtre à votre site. Il est très simple/simple d’utilisation, 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 filtre.

Étape parlages : Installer et configurer SearchWP

Tout d’abord, vous devez installer et activer l’extension SearchWP. Si vous êtes novice en la matière, nous vous proposons un guide utile sur l’installation d’une extension WordPress.

Une fois activé, allez dans SearchWP  » Réglages. Dans l’onglet  » Général « , saisissez votre clé de licence pour l’activer.

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

Le moteur par défaut permet aux utilisateurs/utilisatrices de rechercher dans les pages, les publications, les médias et les commentaires, ce qui est bien pour un blog WordPress typique.

D’autre part, le moteur de recherche supplémentaire peut utiliser d’autres sources comme les catégories, les tags, 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 autre que le blog, comme un filtre de produits e-commerce pour les sites WooCommerce.

Pour ce tutoriel, nous nous en tiendrons au moteur par défaut et nous nous contenterons d’ajuster ses Réglages. Pour ce faire, cliquez sur « Sources et Réglages ».

Puisque nous créons une fonction de recherche et de filtrage des articles et des pages, nous nous contenterons d’inclure les pages et les articles comme sources pour le moteur de recherche de WordPress.

Nous avons également activé la fonctionnalité « Keyword Stems », qui permet à SearchWP d’afficher des résultats même si le mot-clé ne correspond pas parfaitement.

Une fois que vous êtes satisfait des réglages, cliquez sur « Terminé ».

Étape par étape : Affiner votre moteur de recherche

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

Chaque source comporte des diaporamas sur la « Pertinence de l’attribut applicable ». Ces diaporamas déterminent le poids que SearchWP accorde à chaque attribut lors du classement des résultats de recherche.

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

Par exemple, si vous donnez plus de poids à l’attribut « Post Content » qu’à l’attribut « Post Title », SearchWP donnera la priorité aux résultats dans lesquels le terme recherché apparaît dans le contenu lui-même.

Vous pouvez ajuster ces diaporamas en fonction de vos préférences.

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

Une fenêtre surgissante apparaît alors pour vous permettre d’inclure ou de supprimer d’autres attributs.

Par exemple, vous pouvez inclure des taxonomies ou des champs personnalisés pour les rendre consultables.

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

Pour ce faire, il suffit de cliquer sur le bouton « Modifier les règles ».

Ce réglage vous permet de filtrer les contenus non pertinents ou de mettre en évidence des catégories spécifiques.

Dans la fenêtre surgissante suivante, cliquez sur « Ajouter une règle ».

Il suffit ensuite de sélectionner dans le menu déroulant « 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, s’il a été publié dans une certaine plage de dates ou s’il possède un certain ID.

Pour ajouter une autre règle, il suffit de cliquer sur le bouton « Ajouter une règle » et de répéter la procédure décrite ci-dessus. Lorsque vous êtes satisfait de la façon dont les Réglages sont configurés, cliquez sur « Terminé ».

Vous pouvez maintenant répéter le même processus pour les autres sources d’entrée de recherche.

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

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

Lorsque vous voyez  » État de l’index 100 % « , cela signifie que SearchWP a indexé l’ensemble de votre contenu et de vos états pour le moteur de recherche.

Version de l’étape 3 : Créer un formulaire de recherche personnalisé

Maintenant que le moteur de recherche est configuré, créons un formulaire de recherche simple/simple d’utilisation avec des options de filtre.

Titre de SearchWP  » Formulaires de recherche  » et cliquez sur  » Ajouter une nouvelle « .

Tout d’abord, donnez à votre formulaire un nom reconnaissable.

Il s’agit d’une référence interne, le nom peut donc être n’importe quoi de facile à retenir.

Choisissez ensuite une mise en page.

Pour ce tutoriel, nous utiliserons l’option « Combiné », car c’est celle qui offre le plus de menus filtrants.

Défilez ensuite jusqu’à la section « Personnalisation » et sélectionnez les options « Recherche par catégorie » et « Recherche avancée ». Cela permet de s’assurer que votre formulaire inclut toutes les fonctionnalités de filtre.

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

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

Pour ce qui est des « 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 publication », sélectionnez « Publications et pages ».

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

Pour le libellé du champ, saisissez un texte de saisie/saisie qui apparaîtra dans le champ de recherche, par exemple « Que cherchez-vous ? ».

Si vous avez sélectionné « Recherche rapide » précédemment, vous pouvez inclure des termes que les utilisateurs/utilisatrices recherchent couramment dans les articles de la recherche rapide.

Dans la section « Filtres de recherche avancée », choisissez simplement les options de filtrage que vous souhaitez proposer aux utilisateurs/utilisatrices, telles que les auteurs/autrices, les types de publication ou les identifiés.

Enfin, dans la section « Style de formulaire » et « Style de bouton », personnalisez l’apparence du formulaire de recherche pour qu’il corresponde au design de votre site.

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

Une fois que tout est défini, défilez vers le haut.

Cliquez ensuite sur « Enregistrer » pour créer votre formulaire de recherche.

Étape par étape : Contenuqué du formulaire de recherche et de filtre

L’extension SearchWP vous permet d’embarquer facilement le formulaire de recherche sur l’interface publique de votre site, comme sur votre page d’accueil ou dans des zones prêtes à accueillir des widgets. Ici, nous allons montrer comment l’ajouter à une page en utilisant l’éditeur de blocs de WordPress et le bloc Formulaire de recherche.

Tout d’abord, ouvrez la page ou la publication à laquelle vous souhaitez ajouter le formulaire. Cliquez ensuite sur l’icône « + Ajouter un bloc » et recherchez « Formulaire de recherche ».

Dans la colonne latérale Réglages du bloc, choisissez le formulaire que vous avez créé dans le menu déroulant.

Enfin, publiez ou mettez à jour la page pour voir le formulaire de recherche en direct.

En savoir plus, vous pouvez consulter ces guides étape par étape :

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

Vous pouvez également afficher le formulaire à l’aide d’un code court.

Pour ce faire, trouvez le code court correspondant à votre formulaire spécifique en vous rendant sur SearchWP  » Rechercher des formulaires et en copiant le code dans la colonne ‘Code court’.

Nous avons un guide sur l ‘ajout de codes courts dans WordPress si vous avez besoin d’aide.

Grâce au formulaire de recherche et aux options de filtre, vos internautes peuvent désormais trouver facilement le contenu qu’ils recherchent sur votre site.

Cela améliore uniquement l’expérience des utilisateurs/utilisatrices, mais peut également les encourager à explorer différentes catégories et à découvrir davantage de votre précieux contenu.

Méthode 2 : Filtrer les publications et les pages avec un code personnalisé (avancé)

La méthode suivante consiste à utiliser un code personnalisé. Pour les débutants, ce processus peut sembler intimidant, mais nous avons essayé et testé le code pour nous assurer qu’il fonctionne parfaitement avec votre site.

De plus, nous utiliserons WPCode, qui est la meilleure extension d’extraits de code sur le marché. Cette extension permet d’insérer en toute sécurité du code personnalisé sans traiter directement avec les fichiers de votre site, de sorte que vous êtes moins susceptible de casser votre site.

La première étape consiste à installer WPCode. En savoir plus, vous pouvez consulter notre guide sur l’installation d’une extension WordPress.

Une fois que c’est fait, allez dans  » Code Snippets  » +  » Add Snippet  » dans votre zone d’administration WordPress. Ensuite, sélectionnez  » Ajouter votre code personnalisé (nouvel extrait  » et cliquez sur le bouton  » Utiliser l’extrait « .

Maintenant, il y a deux types d’extraits 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 la recherche de l’utilisateur en fonction des options qu’il a sélectionnées dans le formulaire de recherche. Il fonctionnera avec un autre extrait de code responsable de la création du formulaire de recherche, dont nous parlerons ultérieurement.

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

Modifiez ensuite le type de code en « Extrait de PHP ».

Ensuite, copiez le code suivant et collez-le dans la boîte de Prévisualisation 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');

Cet extrait de code vérifie si l’utilisateur a choisi un filtre dans le formulaire de recherche. Par exemple, si un filtre de catégorie est sélectionné, le code peut identifier cette catégorie et afficher uniquement les publications qui y 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 selon que l’utilisateur souhaite voir uniquement les publications, les pages ou tous les types de publications (y compris les types de publications personnalisés).

Une fois le code collé, défilez vers le bas jusqu’à la section « Insert Emplacement ». Par défaut, la méthode d’insertion est « Insertion automatique » et l’Emplacement est « Exécuter partout ».

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

Il suffit ensuite d’activer l’extrait de code et de cliquer sur « Enregistrer l’extrait ».

Ajout d’un code pour le formulaire de recherche de WordPress

Ce code suivant créera un formulaire de recherche personnalisé, que vous pourrez intégrer à l’aide d’un code court ultérieurement.

Tout ce que vous avez à faire est de répéter les mêmes étapes pour ajouter un code personnalisé en utilisant WPCode comme auparavant. Ensuite, vous pouvez nommer ce code  » WordPress Search Form  » et modifier le type de code en  » PHP Snippet « .

Maintenant, collez l’extrait de code ci-dessous dans la boîte de Prévisualisation 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 code court appelé [wpb_filter_posts_form], qui ajoutera un formulaire permettant aux utilisateurs/utilisatrices de rechercher sur votre site. Le formulaire comprend une barre de recherche pour les mots-clé et plusieurs menus déroulants pour le filtrage.

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

En outre, le code inclut des menus déroulants pour l’année, le mois et le jour afin de permettre un filtrage encore plus précis par date. Enfin, il ajoute un bouton envoyer pour lancer la recherche avec les filtres choisis.

Comme dans le code précédent, vous pouvez laisser les Réglages de la méthode d’insertion tels quels. Activez ensuite le code et enregistrez-le.

Contenu embarqué du shortcode du formulaire de recherche

À ce stade, vous pouvez ajouter le code court [wpb_filter_posts_form] à une publication, une page, un modèle de thème ou une zone prête pour les widgets. En savoir plus, vous pouvez consulter notre guide sur l’ajout de codes courts dans WordPress.

Dans ce cas, nous allons ajouter le code court à 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 tous les types de blocs dont vous avez besoin. Par exemple, vous pouvez ajouter des images ou du texte pour expliquer aux Lecteurs comment utiliser la barre de recherche.

Cliquez ensuite sur le bouton « + Ajouter un bloc » et sélectionnez le bloc « Code court ».

Une fois cela fait, il suffit d’insérer le shortcode [wpb_filter_posts_form] dans le champ approprié.

Cliquez sur le bouton Publier, Mettre à jour ou Enregistrer pour rendre vos modifications directes.

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

Voici ce que cela donne sur notre site de démonstration :

Méthode 3 : Filtrer les publications et les pages avec l’extension Search & Filter (gratuite)

La dernière méthode consiste à utiliser l’extension Search & Filter, qui est disponible gratuitement. C’est une excellente option si vous cherchez un moyen rapide et facile d’activer la mis en avant de la fonctionnalité de recherche et de filtre sur votre page de blog WordPress.

Ce que vous voulez faire est d’installer et d’activer le programme Rechercher & Filtrer et de l’activer. Pour plus de détails, consultez notre guide étape par étape sur l ‘installation d’une extension WordPress.

Une fois activé, le plugin ajoutera un nouvel élément de menu libellé « Rechercher & Filtrer » dans votre zone d’administration WordPress. En cliquant dessus, vous accéderez à la page d’utilisation de l’extension avec une documentation détaillée sur son utilisation.

L’extension Search & Filter est livrée avec un code court qui accepte différents paramètres pour afficher les options de filtrage. Vous pouvez utiliser ce code court dans une publication, une page ou à l’intérieur d’un widget de texte :

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

Les options de filtrage s’affichent avec les champs de recherche, de catégorie et d’identifié :

Ce qui est génial avec cette extension, c’est que vous pouvez personnaliser les options de filtrage disponibles en modifiant les identifiants du code court.

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

[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 libellés pour chaque champ.

Dans le code court ci-dessous, nous demandons à l’extension d’afficher la barre de recherche avec des cases à cocher pour les options de catégorie :

[searchandfilter titres="Sélectionné les catégories :" types="case à cocher" champs="catégorie"]

Voir l’exemple ci-dessous :

En outre, vous pouvez indiquer à l’extension d’utiliser des cases à cocher pour certaines options de filtre et des menus déroulants pour d’autres dans un seul code court.

C’est le code court que nous avons utilisé pour inclure les types de publication, les catégories et les identifiés dans la barre de recherche. Nous avons demandé à l’extension d’utiliser des cases à cocher pour l’option des types de publication :

[searchandfilter headings="Post type, Category, Tag" types="checkbox, select, select" fields="post_types,category,post_tag"]]

N’hésitez pas à vous référer à la documentation de l’extension pour d’autres façons d’utiliser le code court.

Astuce bonus : Ajouter la recherche en direct Ajax à votre site WordPress

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

La recherche en direct Ajax utilise une technologie en temps réel pour afficher les résultats de la recherche au fur et à mesure que les utilisateurs/utilisatrices saisissent leurs requêtes. Aucun temps d’attente n’est nécessaire pour actualiser la page. Les résultats apparaissent instantanément, ce qui rend le processus de recherche beaucoup plus rapide et pratique pour vos internautes.

Une expérience de recherche plus rapide signifie que vous pouvez garder les utilisateurs/utilisatrices sur votre site plus longtemps, ce qui augmente le nombre de pages vues et réduit le taux de rebond.

La bonne nouvelle est que vous pouvez facilement ajouter cette fonctionnalité à votre site avec une extension gratuite appelée SearchWP En direct Ajax Search. Vous pouvez lire notre tutoriel WordPress sur la façon d’ajouter la recherche Ajax directe à votre site pour plus d’informations.

Nous espérons que cet article vous a aidé à apprendre comment permettre aux utilisateurs/utilisatrices de filtrer les publications et les pages dans WordPress. Vous pouvez également consulter notre guide sur la création d’un répertoire web sur WordPress et notre sélection d’experts sur les extensions WordPress indispensables pour développer votre site.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.