Share
Le formulaire de recherche WordPress n'offre pas de cloches et de sifflets par défaut. S'il est déjà inclus dans votre thème ou si vous avez ajouté le widget de recherche à l'une de vos barres latérales, vous pouvez en témoigner. Un moyen d'améliorer considérablement ses fonctionnalités consiste à inclure un script de saisie semi-automatique afin d'améliorer l'efficacité de la transmission des requêtes de recherche pertinentes..
Il existe de nombreux scripts de saisie semi-automatique disponibles et récemment, Jake Harding de Twitter, typeahead.js, est une version totalement indépendante d'un script portant le même nom et fourni avec Bootstrap. J'ai pensé qu'il serait intéressant de comprendre comment utiliser ce script léger avec WordPress, et après un peu de tâtonnements, j'ai réussi à mettre en place un petit plugin avec l'aide de Michal Bluma..
Le plugin est assez simple car il ne faut qu'un peu de personnalisation pour que tout fonctionne correctement. Je vais décomposer chaque section du code du plugin pour vous expliquer ce qui se passe.
Accentsconagua
plugin_url = plugin_dir_url (__FILE__); add_action ('wp_enqueue_scripts', tableau ($ this, 'wp_enqueue_scripts')); add_action ('wp_ajax_nopriv_ajax_search', tableau ($ this, 'ajax_search')); add_action ('wp_ajax_ajax_search', tableau ($ this, 'ajax_search')); $ bavotasan_wp_typeahead = new Bavotasan_WP_Typeahead; À lui seul, le code ci-dessus ne créera que quelques erreurs, mais ceci est le début de tout ce dont vous avez besoin pour utiliser typeahead.js avec le formulaire de recherche WordPress. La première action consiste à mettre en file d'attente les fichiers JavaScript / CSS dont vous avez besoin et à placer le JS requis dans le pied de page. Viennent ensuite les appels Ajax pour vous aider avec les résultats de la recherche. Regardons chaque fonction.
/ ** * Enqueue Typeahead.js et la feuille de style * * @since 1.0.0 * / fonction publique wp_enqueue_scripts () wp_enqueue_script ('wp_typeahead_js', $ this-> plugin_url. 'Js / typeahead.min.js', array ( 'jquery'), ", true); wp_enqueue_script ('wp_hogan_js', $ this-> plugin_url. 'js / hogan.min.js', array ('wp_typeahead_js'),", true); wp_enqueue_script ('typeahead_wp_plugin', $ this-> plugin_url. 'js / wp-typeahead.js', "wp_typeahead_js", "wp_hogan_js") 'admin-ajax.php')); wp_localize_script ('typeahead_wp_plugin', 'wp_typeahead', $ wp_typeahead_vars); wp_enqueue_style ('wp_typeahead_css', $ this-> plugin_url) Il y a quatre fichiers qui doivent être mis en file d'attente. Le premier est le réel typeahead.js fichier, puis le moteur de templates appelé hogan.js, suivi d'un nouveau fichier JavaScript que nous allons créer pour tout mettre en mouvement, et enfin la feuille de style qui rend tout bien.
Vous remarquerez au milieu que nous utilisons aussi wp_localize_script rendre l'URL Ajax disponible pour notre JavaScript.
(function ($) $ ('input [name = "s"]') .typeahead (name: 'search', distant: wp_typeahead.ajaxurl + '? action = recherche_axer & fn = get_ajax_search & termes =% QUERY', modèle: 'valeur
',] .join ("), moteur: Hogan) .keypress (fonction (e) if (13 == e.which) $ (this) .parents (' form ') .submit (); retourne false ;);) (jQuery); Mettez ceci dans le nouveau /js/wp-typeahead.js fichier. Le sélecteur jQuery ci-dessus va associer la fonction typeahead à l’un des formulaires de recherche WordPress par défaut et utiliser le moteur de création de modèles Hogan pour formater les données Ajax renvoyées. Parfois, le formulaire de recherche peut être modifié par votre thème et le bouton d'envoi sera supprimé. J'ai donc ajouté un petit script pour m'assurer que lorsque vous appuyez sur le bouton Entrée, le formulaire de recherche est effectivement soumis..
/ ** * Requête Ajax pour la recherche * * @since 1.0.0 * / fonction publique ajax_search () if (isset ($ _REQUEST ['fn']) && 'get_ajax_search' == $ _REQUEST ['fn']) $ search_query = new WP_Query (array ('s' => $ _REQUEST ['terms'], 'posts_per_page' => 10, 'no_found_rows' => true,)); $ results = array (); if ($ search_query-> get_posts ()) foreach ($ search_query-> get_posts () as $ the_post) $ title = get_the_title ($ the_post-> ID); $ results [] = array ('valeur' => $ title, 'url' => get_permalink ($ the_post-> ID), 'tokens' => explode (", $ title),); else $ results [] = __ ('Désolé. Aucun résultat ne correspond à votre recherche.', 'Wp-typeahead'); wp_reset_postdata (); echo json_encode ($ results); die (); Lorsque quelque chose est tapé dans le formulaire de recherche, typeahead.js le prendra et le soumettra via Ajax en utilisant le paramètre remote du code de la dernière étape. Ce texte doit passer par une fonction pour qu'il soit utile et c'est pourquoi vous avez besoin du petit extrait ci-dessus.
Il faut le texte de la recherche, le fait passer par une requête WordPress pour renvoyer tous les résultats pertinents s'ils existent. Ces résultats sont renvoyés après avoir été codés à l'aide de JSON afin que le script puisse lire les données correctement..
Avec tout en place, le fichier de plugin principal devrait ressembler à ceci…
plugin_url = plugin_dir_url (__FILE__); add_action ('wp_enqueue_scripts', tableau ($ this, 'wp_enqueue_scripts')); add_action ('wp_ajax_nopriv_ajax_search', tableau ($ this, 'ajax_search')); add_action ('wp_ajax_ajax_search', tableau ($ this, 'ajax_search')); / ** * Enqueue Typeahead.js et la feuille de style * * @since 1.0.0 * / public function wp_enqueue_scripts () wp_enqueue_script ('wp_typeahead_js', $ this-> plugin_url. 'Js / typeahead.min.js', array ('jquery'), ", true); wp_enqueue_script ('wp_hogan_js', $ this-> plugin_url. 'js / hogan.min.js', array ('wp_typeahead_js'),", true); wp_enqueue_script ('typeahead_wp_plugin', $ this-> plugin_url. 'js / wp-typeahead.js', "wp_typeahead_js", "wp_hogan_js") 'admin-ajax.php')); wp_localize_script ('typeahead_wp_plugin', 'wp_typeahead', $ wp_typeahead_vars); wp_enqueue_style ('wp_typeahead_css', $ this-> Requête Ajax pour la recherche * * @since 1.0.0 * / fonction publique ajax_search () if (isset ($ _REQUEST ['fn']) && 'get_ajax_search' == $ _REQUEST ['fn']) $ search_query = new WP_Query (array ('s' => $ _REQUEST ['terms'], 'posts_per_page' => 10, 'no_found_rows' => true,)); $ results = array (); if ($ search_query-> get_posts ( )) foreach ($ search_query-> get_posts () as $ the_post) $ title = get_the_title ($ the_post-> ID); $ résultats [] = tableau ('valeur' => $ titre, 'url' => get_permalink ($ the_post-> ID), 'tokens' => explode (", $ title),); else $ results [] = __ ('Désolé. Aucun résultat ne correspond à votre recherche.', 'wp-typeahead'); wp_reset_postdata (); echo json_encode ($ résultats); mourir(); $ bavotasan_wp_typeahead = new Bavotasan_WP_Typeahead; Lorsque vous téléchargez le plug-in, la feuille de style et les fichiers JS requis sont inclus dans le fichier ZIP..
L'ajout d'un script de saisie semi-automatique à votre formulaire de recherche peut aider vos utilisateurs à naviguer plus facilement sur votre site. Cela signifie une meilleure expérience globale qui, espérons-le, conduira à des visites plus fréquentes et à un trafic plus intense. Ce plugin doit juste être activé pour qu'il fonctionne avec vos formulaires de recherche.
Si vous avez des commentaires ou des remarques sur tout ce que vous avez lu ci-dessus, n'hésitez pas à en discuter ci-dessous.
