3 façons de créer un excellent formulaire de recherche WordPress personnalisé
Publié: 2022-11-23WordPress est le système de gestion de contenu (CMS) le plus populaire au monde. En plus d'être un outil puissant et super flexible, il est également extrêmement facile à utiliser. Les personnes sans expérience en conception Web ou en codage peuvent utiliser WordPress pour démarrer leur site Web en quelques minutes seulement.
Les utilisateurs visiteront votre site WordPress pour rechercher le contenu qui les intéresse. Une barre de recherche peut les aider à le faire. Si votre site n'en a pas, il sera difficile pour les gens de trouver le contenu qu'ils recherchent. Cette frustration amène les gens à quitter votre site Web et à aller ailleurs.
Ça ne va pas !
Dans cet article, nous allons vous montrer comment intégrer un formulaire de recherche WordPress personnalisé à votre site Web.
- Qu'est-ce qu'un formulaire de recherche WordPress personnalisé ?
- #1 Appliquer un plugin
- #2 Modifier le code
- # 3 Utilisez un CSS personnalisé pour styliser le formulaire de recherche et la page de résultats
Qu'est-ce qu'un formulaire de recherche WordPress personnalisé ?
WordPress a déjà une fonction de recherche native intégrée. Cependant, l'outil de recherche par défaut est assez limité et n'est pas très "intelligent". Il ne trouve pas toujours le contenu que vous souhaitez rechercher.
La fonction de recherche par défaut de WordPress suffit pour les pages Web nouvelles ou à petite échelle qui n'ont pas beaucoup de contenu.
Mais à mesure que votre base de données de contenu se développe, l'installation d'un meilleur outil de recherche est importante pour aider les visiteurs à naviguer sur votre site Web. Si vous exploitez un site de commerce électronique, un bon outil de recherche est encore plus important. Il aide à orienter les clients potentiels vers les produits qui leur conviennent.
Vous pouvez également souhaiter que votre outil de recherche affiche les résultats dans un certain ordre. Par exemple, les articles ou articles les plus populaires en premier. L'outil de recherche par défaut ne vous permet pas de faire cela. Au lieu de cela, vous devrez modifier l'algorithme de recherche manuellement.
Enfin, un outil de recherche personnalisé peut être stylisé pour refléter l'esthétique ou la marque de votre site Web !
Qu'est-ce que la fonction get_search_form ?
get_search_form fait référence à une fonction qui affiche le formulaire de recherche sur votre site Web. Vous pouvez le trouver dans l'onglet Apparence > Widgets de votre panneau d'administration WordPress.
Il régit le widget du formulaire de recherche et toute autre page de votre site Web nécessitant une fonction de recherche. Sans cette fonction, votre site Web est pratiquement dépourvu d'un outil de recherche.
Comment personnaliser le formulaire de recherche dans WordPress
Il existe de nombreuses approches différentes que vous pouvez utiliser pour personnaliser le formulaire de recherche dans WordPress. Cela dépend de votre niveau de compétence en codage et du temps que vous êtes prêt à consacrer à cette tâche.
#1 Appliquer un plugin
Un plugin est le moyen le plus simple et le plus rapide de mettre en place un formulaire de recherche WordPress personnalisé sur votre site Web. Ivory Search, par exemple, est un plugin gratuit spécialement conçu pour améliorer la fonction de l'outil de recherche WordPress. Vous pouvez ajouter et modifier de nouveaux formulaires de recherche et effectuer différents types de recherches.
De plus, avec les shortcodes, vous pouvez positionner la barre de recherche où vous voulez sur le site Web (comme dans l'en-tête, le pied de page, la barre de menu, etc.).
C'est un outil simple que nous recommandons fortement si vous n'avez pas beaucoup d'expérience en codage. Bien que ce ne soit pas aussi polyvalent que le codage d'un outil de recherche, cela devrait suffire pour une utilisation de base.
#2 Modifier le code
Il existe deux façons de créer un formulaire de recherche à partir de zéro directement dans les fichiers de base .php de votre site WordPress : soit avec une fonction, soit avec un modèle.
Avec une fonction
Vous pouvez remplacer l'outil de recherche WordPress par défaut par un outil personnalisé en utilisant le crochet add_filter . Dans votre fichier functions.php , ajoutez le code suivant à la pile :
function formulaire_recherche_personnalisé( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' . __( 'Chercher:' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" />
<input type="submit" value="'. esc_attr__( 'Rechercher' ) .'" />
</div>
</form>' ;
retourner $form ;
}
add_filter( 'get_search_form', 'custom_search_form', 40 );Ce code stocke votre formulaire personnalisé dans la variable $form , qui remplacera l'outil de recherche WordPress par défaut grâce au crochet add_filter .
Vous pouvez personnaliser davantage le code ci-dessus en modifiant les étiquettes, les textes, les ID et d'autres éléments dans la valeur de la variable $form .
Avec un modèle
Si vous n'êtes pas prêt à modifier le fichier functions.php , une alternative consiste à utiliser un modèle pour le formulaire de recherche. Créez un formulaire de recherche WordPress personnalisé, puis ajoutez-le en tant que searchform.php dans votre répertoire principal. WordPress utilisera automatiquement le formulaire de recherche personnalisé plutôt que celui par défaut.
Pour ce faire, ouvrez l'IDE de votre choix et créez un nouveau fichier. Nommez-le "searchform.php" . Collez le code suivant dans l'éditeur :
<?php /* Formulaire de recherche personnalisé */ ?> <form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3"> <div class="input-group"> <input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query() ); ? >"> <div class="input-group-append"> <span class="input-group-append p-0"> <i class="fas fa-search text-muted"></i> </span> </div> </div> </form>
Modifiez le code ci-dessus selon vos préférences !
# 3 Utilisez un CSS personnalisé pour styliser le formulaire de recherche et la page de résultats
Maintenant que vous avez mis en place votre fonction de recherche personnalisée, la prochaine étape consiste à la styliser. L'apparence par défaut est assez ennuyeuse avec les zones de texte blanches dans les polices Sans Serif courantes.
Si vous voulez changer cela, votre meilleur pari est de passer par quelques lignes de code CSS.
Ce modèle de code CSS est compatible avec la grande majorité des thèmes WordPress. Copiez-le simplement et collez-le via votre panneau d'administration WordPress.
.formulaire de recherche {
font-family:arial;
taille de police : 16 px ;
arrière-plan :#ace5e3 ;
couleur :#ffffff ;
bordure : solide 1px #61c3c0 ;
rembourrage : 10 px ;
hauteur : 90 pixels ;
largeur : 600 px ;
}
.Résultats de recherche {
font-family:arial;
taille de police : 16 px ;
arrière-plan :#ace5e3 ;
couleur :#000000 ;
bordure : solide 1px #61c3c0 ;
rembourrage : 10 px ;
largeur : 600 px ;
}Modifiez les variables dans le code à votre guise. Vous pouvez choisir la police, la taille de la police, la couleur d'arrière-plan, la bordure, etc. S'il y a un élément dans le code que vous ne voulez pas changer, supprimez simplement cette ligne.
Par exemple, si vous ne souhaitez pas modifier la famille de polices de votre formulaire de recherche, supprimez simplement le "font-family:arial ; » ligne.
Créez votre propre formulaire de recherche WordPress personnalisé dès aujourd'hui !
La plupart des gens peuvent se débrouiller avec un simple formulaire de recherche généré par un plugin. Mais si vous êtes un peu plus doué pour le codage et que vous souhaitez intégrer des fonctionnalités avancées dans le formulaire de recherche de votre site, les modèles de code ci-dessus peuvent s'avérer utiles.
Un formulaire de recherche WordPress personnalisé est une fonctionnalité assez simple, mais très efficace pour rendre votre site Web plus convivial. Une fonction WordPress de recherche de formulaire par champ personnalisé peut vous aider à attirer plus de visiteurs, à les convertir en habitués et, si vous exploitez un site de commerce électronique, en clients payants.
Vous pouvez en savoir plus sur l'ajout de la recherche intelligente de produits WooCommerce ici.
Nous espérons que ce guide vous a été utile et que vous aurez déjà mis en place votre formulaire de recherche personnalisé au moment où vous lisez ceci !