Migliorare il modulo di ricerca con typeahead.js

Il modulo di ricerca WordPress non offre campane e fischietti per impostazione predefinita. Se è già incluso nel tuo tema o hai aggiunto il widget di ricerca a una delle tue barre laterali, puoi attestarlo. Un modo per migliorare notevolmente la sua funzionalità consiste nell'includere uno script di completamento automatico per migliorare l'efficienza del modo in cui le query di ricerca pertinenti vengono inoltrate.

Twitter typeahead.js

Ci sono alcuni script di autocomplete disponibili e recentemente Jake Harding di Twitter ha rilasciato typeahead.js, una versione completamente indipendente di uno script con un nome simile che viene fornito con Bootstrap. Ho pensato che sarebbe stato interessante capire come usare questo script leggero con WordPress, e dopo un po 'di armeggiare, sono riuscito a mettere insieme un piccolo plugin con l'aiuto di Michal Bluma.

WP Typeahead Plugin

Il plugin è abbastanza semplice poiché c'è solo un po 'di personalizzazione necessaria per far funzionare le cose correttamente. Analizzerò ogni sezione del codice del plugin per te per spiegare cosa sta succedendo.

Impostazione plugin di base

 plugin_url = plugin_dir_url (__FILE__); add_action ('wp_enqueue_scripts', array ($ this, 'wp_enqueue_scripts')); add_action ('wp_ajax_nopriv_ajax_search', array ($ this, 'ajax_search')); add_action ('wp_ajax_ajax_search', array ($ this, 'ajax_search'));  $ bavotasan_wp_typeahead = new Bavotasan_WP_Typeahead;

Di per sé, il codice di cui sopra sputerà solo alcuni errori, ma questo è l'inizio di tutto ciò che è necessario utilizzare typeahead.js con il modulo di ricerca di WordPress. La prima azione è lì per accodare i file JavaScript / CSS necessari e inserire il JS richiesto nel piè di pagina. Poi vengono le chiamate Ajax per dare una mano con i risultati della ricerca. Diamo un'occhiata a ciascuna funzione.

Enqueueing

 / ** * Enqueue Typeahead.js e il foglio di stile * * @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', array ('wp_typeahead_js', 'wp_hogan_js'), ", true); $ wp_typeahead_vars = array ('ajaxurl' => admin_url ( 'admin-ajax.php')); wp_localize_script ('typeahead_wp_plugin', 'wp_typeahead', $ wp_typeahead_vars); wp_enqueue_style ('wp_typeahead_css', $ this-> plugin_url. 'css / typeahead.css');

Ci sono quattro file che devono essere accodati. Il primo è il reale typeahead.js file, quindi viene chiamato il motore dei template hogan.js, seguito da un nuovo file JavaScript che creeremo per mettere tutto in movimento, e infine il foglio di stile che rende tutto molto bello.

Noterai nel mezzo che usiamo anche noi wp_localize_script per rendere l'URL Ajax disponibile per il nostro JavaScript.

The Footer Script

 (function ($) $ ('input [nome = "s"]') .typeahead (nome: 'cerca', remoto: wp_typeahead.ajaxurl + '? action = ajax_search & fn = get_ajax_search & terms =% QUERY', template: [ 'valore
',] .join ("), engine: Hogan) .keypress (function (e) if (13 == e.which) $ (this) .parents (' form ') .submit (); return false ;);) (jQuery);

Metti questo nel nuovo /js/wp-typeahead.js file. Il selettore jQuery in alto allegherà la funzione typeahead a uno dei moduli di ricerca di WordPress predefiniti e utilizzerà il motore di template Hogan per formattare i dati Ajax restituiti. A volte, il modulo di ricerca può essere modificato dal tema e il pulsante di invio verrà rimosso, quindi ho aggiunto un piccolo script per assicurarmi che quando si preme il pulsante Invio, il modulo di ricerca sia effettivamente inviato.

La domanda Ajax

 / ** * Ricerca Ajax per la ricerca * * @since 1.0.0 * / funzione pubblica 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 () come $ the_post) $ title = get_the_title ($ the_post-> ID); $ results [] = array ('value' => $ title, 'url' => get_permalink ($ the_post-> ID), 'tokens' => esplode (", $ title),); else $ risultati [] = __ ('Spiacente, nessun risultato corrisponde alla ricerca.', 'Wp-typeahead'); wp_reset_postdata (); echo json_encode ($ results); die ();

Quando qualcosa viene digitato nel modulo di ricerca, typeahead.js lo prenderà e lo invierà tramite Ajax utilizzando il parametro remoto dal codice nell'ultimo passaggio. Quel testo deve passare attraverso una funzione in modo che sia utile ed è per questo che hai bisogno del piccolo frammento sopra.

Prende il testo di ricerca, lo esegue attraverso una query di WordPress per restituire eventuali risultati relavent se esistono. Questi risultati vengono restituiti dopo essere stati codificati utilizzando JSON in modo che lo script possa leggere correttamente i dati.

Il codice completato

Con tutto ciò che è a posto, il file del plugin principale dovrebbe apparire così ...

 plugin_url = plugin_dir_url (__FILE__); add_action ('wp_enqueue_scripts', array ($ this, 'wp_enqueue_scripts')); add_action ('wp_ajax_nopriv_ajax_search', array ($ this, 'ajax_search')); add_action ('wp_ajax_ajax_search', array ($ this, 'ajax_search'));  / ** * Enqueue Typeahead.js e il foglio di stile * * @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', array ('wp_typeahead_js', 'wp_hogan_js'), ", true); $ wp_typeahead_vars = array ('ajaxurl' => admin_url ( 'admin-ajax.php')); wp_localize_script ('typeahead_wp_plugin', 'wp_typeahead', $ wp_typeahead_vars); wp_enqueue_style ('wp_typeahead_css', $ this-> plugin_url. 'css / typeahead.css'); / ** * Query Ajax per la ricerca * * @since 1.0.0 * / public function 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 () come $ the_post) $ title = get_the_title ($ the_post-> ID); $ results [] = array ('value' => $ title, 'url' => get_permalink ($ the_post-> ID), 'tokens' => esplode (", $ title),);  else $ results [] = __ ('Sorry. Nessun risultato corrisponde alla ricerca.', 'wp-typeahead');  wp_reset_postdata (); echo json_encode ($ results);  die ();  $ bavotasan_wp_typeahead = new Bavotasan_WP_Typeahead;

Quando scarichi il plug-in, avrai il foglio di stile e i file JS richiesti inclusi nel file ZIP.

Conclusione

L'aggiunta di uno script di completamento automatico al modulo di ricerca può aiutare gli utenti a navigare più facilmente nel tuo sito. Ciò significa una migliore esperienza complessiva che, si spera, porterà a più visite ripetute e ad un traffico più intenso. Questo plugin deve essere attivato per funzionare con i moduli di ricerca.

Se hai commenti o feedback su qualcosa che hai letto sopra, non esitare a discuterne di seguito.

Codice