J'étais en train de mettre à jour mon extension WP-Advanced-Search (moteur de recherche avancé pour WordPress) lorsqu"il m'est passé par la tête l'idée de bloquer la soumission du formulaire de recherche natif de WordPress. En effet, j'ai toujours détesté qu'un formulaire vide ou avec un "placeholder" (texte d'attente dans le champ de recherche) puisse être soumis et affiche la traditionnelle page "Pas de résultat pour votre recherche", j'ai donc décidé d'y remédier à ma sauce...
J'ai ajouté cette petite fonctionnalité complémentaire dans mon extension mais je tiens à vous en faire profiter car elle peut servir même aux utilisateurs de WordPress qui n'utilisent pas mon moteur de recherche.
Prérequis techniques et conditions de WordPress
Bloquer la soumission d'un formulaire se fait via Javascript mais nous pourrions utiliser des librairies implantées dans WordPress (comme jQuery) si nous voulions. Ici, le code n'utilise que du Javascript "pur" car le code est simpliste et rétrocompatible avec d'anciens navigateurs, cela évite de charger inutilement une librairie notamment...
Pour bloquer la soumission d'un formulaire, il faut utiliser l'attribut HTML onsubmit et retourner "false". La ligne suivante permet donc de bloquer la soumission d'un formulaire si le champ qui porte l'attribut name "name_du_champ" est laissé vide...
<form method="GET" action="" onsubmit="if(document.getElementById('name_du_champ').value == '') { return false; }">
Il faut savoir que WordPress fonctionne avec un système de "hook" (ou "crochet" en français) qui permet d'appliquer des modifications aux fonctions natives du CMS. WordPress met ensuite à disposition des filtres ou des actions pour modifier l'affichage ou le comportement de ses fonctions internes. Ici, nous utiliserons un filtre appliqué au hook "get_search_form" appliqué au formulaire de recherche.
Cela va s'en dire que la fonctionnalité ne peut être efficace que dans deux cas précis :
- Vous utilisez un fichier searchform.php de la Template Hierarchy de WordPress. Celui-ci est destiné à recevoir un formulaire de recherche remanié à votre sauce...
- Vous utilisez la fonction get_search_form() pour appeler le formulaire de recherche.
En effet, si vous avez créé vous-même un formulaire "maison", il est inutile d'utiliser le filtre, il suffit d'entrer le code Javascript du blocage de soumission... :D
Le code du blocage de soumission du formulaire de recherche WordPress
Sans plus attendre, voici le code à ajouter dans le fichier functions.php de votre thème WordPress.
Il suffit de modifier les paramètres $nameSearch et $placeholder par vos valeurs pour que le code soit fonctionnel. Nativement, la fonction bloque un formulaire vide, quoi qu'il advienne...
// Blocage de la soumission du formulaire (avec ou sans placeholder)
function SearchFormBlocked($form, $nameSearch = "s", $placeholder = "Recherche") {
// Ajoute le code Javascript bloquant
if(empty($placeholder)) {
$form = str_ireplace('<form', '<form onsubmit="if(document.getElementById(\''.$nameSearch.'\').value == \''.$placeholder.'\') { return false; }"', $form);
} else {
$form = str_ireplace('<form', '<form onsubmit="if(document.getElementById(\''.$nameSearch.'\').value == \''.$placeholder.'\' || document.getElementById(\''.$nameSearch.'\').value == \'\') { return false; }"', $form);
}
// Retourne le "nouveau" formulaire
return $form;
}
add_filter('get_search_form', 'SearchFormBlocked', 10, 3);
Ce n'est pas grand chose comme code mais si ça peut aider certains d'entre vous, c'est déjà ça... C'est en ajoutant de petites fonctionnalités complémentaires comme ces dernières que WordPress gagne en puissance et le rend encore plus intéressant. :D