Comment créer un formulaire de recherche personnalisé dans WordPress
Vous cherchez à créer un formulaire de recherche personnalisé sur un site WordPress? Nous avions l’habitude de créer des thèmes à partir de zéro afin de pouvoir ajouter notre propre style aux sections du site Web. Vous avez peut-être créé la conception d’un formulaire de recherche attrayant et souhaitez maintenant l’intégrer dans WordPress.
WordPress fournit une méthode get_search_form()qui rend le formulaire de recherche. Si vous utilisez cette méthode dans votre thème personnalisé, vous obtiendrez un formulaire de recherche par défaut créé dans le noyau WordPress. Et vous ne voulez pas du formulaire de recherche par défaut car la conception de votre formulaire est différente. Pour surmonter cette situation, vous devez créer un formulaire de recherche personnalisé qui remplace celui par défaut.
En créant un formulaire de recherche personnalisé, vous pouvez y ajouter votre propre balisage et style. Dans cet article, je vous montre comment créer un formulaire de recherche personnalisé dans WordPress.
La méthode get_search_form()recherche un searchform.phpfichier dans le répertoire de votre thème actif. Si ce fichier n’existe pas, WordPress utilise le formulaire de recherche par défaut qui est inclus dans son noyau.
Créer un formulaire de recherche personnalisé
Créez un searchform.phpfichier dans le répertoire de votre thème actif. Dans ce fichier, ajoutez votre balisage du formulaire de recherche. Par exemple, dans mon cas, le formulaire de recherche est le suivant.
<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
<input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
<input type="submit" value="Search">
</form>Il n’y a rien d’extraordinaire ou de complexe dans le code ci-dessus. Je viens de donner l’identifiant ‘searchform’ à la balise form et la classe ‘search-field’ au champ de texte de recherche. En utilisant cet identifiant et cette classe, je peux ajouter un style au formulaire de recherche. Comme ceci dans votre cas, vous devez utiliser votre propre balisage.
Afficher le formulaire de recherche
L’étape suivante consiste à afficher le formulaire de recherche sur le site Web. Vous pouvez placer le formulaire de recherche dans la barre latérale, l’en-tête, à côté du menu, etc.
En utilisant la fonction, get_search_form()on peut afficher leur formulaire de recherche n’importe où sur le site Web. Tout ce que vous avez à faire est d’appeler cette méthode depuis l’endroit où vous souhaitez afficher le formulaire de recherche.
<?php get_search_form(); ?>Après avoir placé le code ci-dessus à l’endroit souhaité, accédez au navigateur. Vous devriez maintenant voir votre formulaire de recherche sur le site Web.
Personnaliser le résultat de la recherche
Cela peut être le cas, votre site Web contient plus de ressources telles que des livres, des magazines, des livres électroniques, des PDF, etc. et vous devez afficher le contenu de toutes ces ressources dans le résultat de la recherche. Cela peut être fait facilement.
En supposant que vous ayez des types de publication personnalisés pour toutes ces ressources, vous devez ajouter un champ masqué pour chaque type de publication dans le formulaire de recherche.
Disons que vous avez créé des types de publication personnalisés livre, magazine, ebook, pdf pour les ressources ci-dessus. Ensuite, vos champs cachés seront les suivants.
<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
<input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
<input type="hidden" name="post_type[]" value="book" />
<input type="hidden" name="post_type[]" value="magazine" />
<input type="hidden" name="post_type[]" value="ebook" />
<input type="hidden" name="post_type[]" value="pdf" />
<input type="submit" value="Search">
</form>Désormais, lorsque quelqu’un saisit un mot-clé dans le formulaire de recherche, WordPress recherche ce mot-clé dans tous les types de publication ci-dessus pour correspondre au résultat.
J’espère que vous comprenez comment créer un formulaire de recherche personnalisé dans WordPress. J’aimerais entendre vos pensées et suggestions dans la section des commentaires ci-dessous.
Articles Liés
- Comment charger un article WordPress avec AJAX
- Comment définir une image en vedette par programme dans WordPress
- Télécharger des fichiers par programme dans WordPress