Comment créer un formulaire de recherche WordPress personnalisé (étape par étape)

Avez-vous besoin de créer un formulaire de recherche personnalisé pour votre site WordPress ?

La recherche est la façon dont la plupart des utilisateurs trouveront du contenu sur votre site. S’ils ne trouvent pas facilement ce qu’ils recherchent, ils peuvent passer à un autre site Web.

Dans cet article, nous allons vous montrer comment améliorer la recherche de votre site Web en créant un formulaire de recherche WordPress personnalisé, étape par étape.

Pourquoi créer un formulaire de recherche personnalisé pour WordPress ?

La fonction de recherche par défaut de WordPress est assez limitée et ne trouve pas toujours le contenu le plus pertinent.

Au fur et à mesure que vous ajoutez du contenu à votre site, vous aurez besoin de meilleurs moyens d’aider les visiteurs de votre site Web à trouver facilement le contenu de votre site.

Cela devient encore plus important si vous gérez une boutique en ligne ou un site d’adhésion où vous souhaitez que les utilisateurs trouvent le bon produit ou le bon cours.

Vous pouvez également personnaliser l’algorithme de recherche pour afficher un contenu spécifique plus haut que les autres, ou personnaliser l’apparence de votre formulaire de recherche.

Cela étant dit, voyons comment personnaliser le formulaire de recherche WordPress et la page de résultats. Nous couvrirons deux méthodes que vous pouvez choisir en utilisant les liens ci-dessous :

Comment personnaliser le formulaire et les résultats de recherche WordPress

SearchWP est le meilleur plugin de recherche personnalisé pour WordPress. Il est facile à utiliser, vous donne un contrôle total sur vos résultats de recherche et est plus précis que la recherche WordPress par défaut.

La première étape consiste à installer le plugin SearchWP. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Lors de l’activation, vous devez visiter le Paramètres » SearchWP page, puis cliquez sur l’option de menu « Licence ».

Ensuite, entrez votre clé de licence dans la case « Licence » et cliquez sur le bouton « Activer ». Vous pouvez trouver ces informations dans votre compte sur le site Web de SearchWP.

Personnalisation du moteur de recherche

Une fois que vous avez fait cela, vous devez cliquer sur l’option de menu « Moteurs ». Une fois là-bas, vous devez cliquer sur le bouton « Ajouter un nouveau » pour créer un nouveau moteur de recherche.

Cela créera un nouveau moteur de recherche appelé « supplémentaire ». Pour changer le nom, vous devez cliquer sur le bouton « Sources et paramètres ».

Cela vous amène à une page qui vous permet également de choisir de rechercher des publications, des pages, des fichiers multimédias, des commentaires et des utilisateurs. Nous laisserons les paramètres par défaut tels qu’ils sont.

Nous allons changer le nom du moteur de recherche en « Personnalisé ». Allez-y et saisissez-le dans le champ « Engine Label ».

Notez que l’option ‘Keyword Stems’ a été sélectionnée pour vous. Cela ne tiendra pas compte des fins de mots lorsque vos utilisateurs effectueront une recherche afin que les résultats de recherche les plus pertinents soient affichés.

Assurez-vous de cliquer sur le bouton « Terminé » lorsque vous avez terminé.

La page des paramètres du moteur de recherche contient des sections pour les articles, les pages, les médias et les utilisateurs. Dans chaque section, vous pouvez donner la priorité à différents attributs de publication ou inclure uniquement certaines catégories ou balises dans vos résultats de recherche.

Vous pouvez le faire en ajustant les curseurs « Pertinence des attributs ».

Ceux-ci changent la façon dont les moteurs de recherche évaluent et classent le contenu. Par exemple, si vous souhaitez valoriser le titre de la publication plus haut que le contenu, vous pouvez ajuster le curseur en conséquence.

Vous devez parcourir chaque section et apporter les ajustements que vous souhaitez aux curseurs.

Vous pouvez également créer des règles pour chaque section qui déterminent si certains contenus sont inclus ou exclus des résultats de la recherche.

Par exemple, vous pouvez permettre à vos visiteurs de rechercher facilement du contenu sur le même sujet que celui qu’ils viennent de lire. Ou dans une boutique en ligne, vous pourriez aider vos clients à trouver rapidement d’autres produits dans la même catégorie.

Allez-y et cliquez sur le bouton « Modifier les règles » dans la section Messages.

Vous remarquerez que vous pouvez créer des règles concernant les catégories, les balises et le format de la publication, la date de publication et l’ID de la publication.

Vous voudrez peut-être permettre à vos visiteurs de rechercher des catégories de sites Web spécifiques. Par exemple, vous pouvez ajouter une fonction de recherche par catégorie à vos pages d’archives pour aider vos visiteurs à trouver rapidement ce qu’ils recherchent.

Pour savoir comment procéder, reportez-vous à la méthode 1 de notre guide étape par étape sur la recherche par catégorie dans WordPress.

Une fois que vous avez terminé de personnaliser les paramètres de votre moteur de recherche par défaut, assurez-vous de cliquer sur le bouton « Enregistrer les moteurs » en haut de la page pour créer votre moteur de recherche personnalisé.

Ajout du formulaire de recherche avec shortcode

L’extension SearchWP Shortcodes simplifie le travail d’ajout de votre nouveau formulaire de recherche de publication personnalisé à votre site WordPress.

Visitez simplement le site Web de l’extension SearchWP Shortcodes, puis cliquez sur le bouton « Télécharger disponible avec une licence active ».

Après cela, vous devez installer et activer l’extension de la même manière que vous avez installé le plugin ci-dessus.

Vous pouvez désormais ajouter un formulaire de recherche personnalisé à vos publications, pages et widgets à l’aide de codes abrégés. Si vous n’avez jamais utilisé de shortcode auparavant, vous pouvez en savoir plus dans notre guide du débutant sur la façon d’ajouter un shortcode dans WordPress.

Modifiez simplement un article et placez votre curseur à l’endroit où vous souhaitez ajouter le formulaire de recherche. Après cela, cliquez sur le plus ‘+‘ Icône Ajouter un bloc pour afficher le menu des blocs.

Ensuite, tapez « html » dans le champ de recherche, puis cliquez sur le bloc « HTML personnalisé » pour l’ajouter à la publication.

Une fois que vous avez ajouté le nouveau bloc, vous devez y coller les codes courts et le code HTML suivants.

[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

Ce code ajoutera votre formulaire de recherche personnalisé à la publication, créera une section pour afficher les résultats de la recherche, affichera un message d’absence de résultat si nécessaire et ajoutera une pagination si les résultats vont sur plusieurs pages.

Si vous avez donné un nom différent à votre moteur de recherche, vous devrez changer engine=“custom” à votre propre nom de moteur à quatre endroits.

Vous pouvez également choisir de changer le texte du bouton de recherche en quelque chose de plus descriptif en éditant button_text=“Custom Search”. Le reste du code peut rester le même.

Assurez-vous de cliquer sur Publier ou Mettre à jour pour enregistrer votre publication et la mettre en ligne.

Pour voir le formulaire de recherche en action, consultez simplement la publication sur votre site Web WordPress. Voici à quoi cela ressemble sur notre site de démonstration exécutant le thème Twenty Twenty-One.

Ajout de la recherche Ajax en direct

La recherche en direct Ajax améliore votre formulaire de recherche en fournissant automatiquement des résultats de recherche déroulants lorsque l’utilisateur tape sa requête.

Le moyen le plus simple d’ajouter la recherche en direct Ajax à WordPress est le plugin gratuit SearchWP Live Ajax Lite Search, car il permet automatiquement la recherche en direct.

Pour obtenir des instructions étape par étape sur la façon de l’installer, consultez notre guide sur la façon d’ajouter la recherche Ajax en direct à votre site WordPress.

Utilisation des paramètres avancés pour SearchWP

Maintenant, vous devez naviguer vers Paramètres » SearchWP et cliquez sur l’onglet Avancé. Sur cette page, vous pouvez activer certains paramètres qui permettront à vos utilisateurs de trouver plus facilement ce qu’ils recherchent.

Cochez l’une de ces options que vous souhaitez :

• Les correspondances partielles afficheront également des résultats qui ne correspondent pas tout à fait au terme recherché.
• Automatique « Voulez-vous dire ? » les corrections suggéreront un terme de recherche légèrement différent qui correspondra à plus de messages sur votre site Web.
• La prise en charge des « recherches entre guillemets/expressions » permettra à vos utilisateurs d’utiliser des guillemets lors de la recherche d’expressions exactes.
• Surligner les termes dans les résultats permettra à vos visiteurs de trouver plus facilement ce qu’ils recherchent dans les résultats de recherche.

Styliser le formulaire de recherche et la page de résultats

Votre thème WordPress contrôle l’apparence de votre site Web, y compris le formulaire de recherche et la page de résultats de recherche. Ils stockent les règles de formatage pour tous les éléments de votre site WordPress dans une feuille de style CSS.

Vous pouvez ajouter votre propre CSS personnalisé pour remplacer les règles de style de votre thème.

Si vous ne l’avez pas encore fait, consultez notre article sur la façon d’ajouter du CSS personnalisé dans WordPress pour les débutants.

Par exemple, voici quelques CSS personnalisés qui fonctionneront avec la plupart des thèmes. La première section modifie le style du formulaire de recherche et la deuxième section personnalise les résultats de la recherche.

.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}

.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

Vous pouvez modifier la mise en forme du code pour l’adapter à votre propre site. Vous pouvez également supprimer toutes les lignes que vous ne souhaitez pas modifier. Par exemple, si vous ne souhaitez pas modifier la hauteur et la largeur du formulaire de recherche, supprimez simplement ces lignes.

Voici des captures d’écran de notre site Web de démonstration avant et après l’ajout du CSS personnalisé.

Mesurer les résultats de recherche et améliorer les conversions

Une fois que vous avez configuré votre formulaire de recherche WordPress personnalisé, l’étape suivante consiste à mesurer les résultats.

SearchWP est livré avec une extension de métriques de recherche qui vous montre exactement les performances de votre recherche sur le site Web.

Vous pouvez également utiliser les métriques de recherche pour améliorer automatiquement les résultats de la recherche en promouvant les résultats qui obtiennent plus de clics vers le haut.

Les sites Web de commerce électronique mettent également en œuvre des fenêtres contextuelles d’intention de sortie et des campagnes gamifiées de rotation pour engager les utilisateurs sur les pages de recherche, afin qu’ils puissent se convertir en abonnés par courrier électronique, puis en clients peu de temps après.

Nous espérons que ce tutoriel vous a aidé à apprendre à créer un formulaire de recherche WordPress personnalisé. Vous voudrez peut-être également consulter notre sélection d’experts des meilleurs services téléphoniques professionnels pour les petites entreprises et notre comparaison des meilleurs bureaux d’enregistrement de domaines.

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

L’article Comment créer un formulaire de recherche WordPress personnalisé (étape par étape) est apparu en premier sur WPBeginner.