Forbedre søkeskjemaet med typeahead.js

WordPress søkeskjemaet tilbyr ikke noen klokker og fløyter som standard. Hvis den allerede er inkludert i temaet ditt, eller du har lagt til søketjenesten til en av sidebjørene dine, kan du attestere det. En måte å forbedre sin funksjonalitet på, er å inkludere et autofullføringsskript for å forbedre effektiviteten av hvordan relevante søk er omdirigert.

Twitter typeahead.js

Det finnes ganske mange autofullføringsskript tilgjengelige, og nylig Jake Harding fra Twitter har utgitt typeahead.js, en helt uavhengig versjon av et tilsvarende betegnet skript som kommer pakket med Bootstrap. Jeg trodde det ville være interessant å finne ut hvordan man bruker dette lette manuset med WordPress, og etter litt fumling klarte jeg å sette sammen et lite plugin med hjelp av Michal Bluma.

WP Typeahead Plugin

Pluggen er ganske grei siden det er bare en liten tilpasning som trengs for å få ting til å fungere skikkelig. Jeg vil kutte ned hver del av plugin-koden for å forklare hva som skjer.

Grunnleggende Plugin Setup

 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;

På egenhånd vil ovennevnte kode bare spytte ut noen feil, men dette er starten på alt du trenger for å bruke typeahead.js med søkeordet for WordPress. Den første handlingen er der for å kreve JavaScript / CSS-filene du trenger, og plasser den nødvendige JS i bunnteksten. Neste kommer Ajax-anropene til å hjelpe deg med søkeresultatene. La oss ta en titt på hver funksjon.

Enqueueing

 / ** * Enqueue Typeahead.js og stilarket * * @since 1.0.0 * / offentlig funksjon 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');

Det er fire filer som må være enqueued. Først er den faktiske typeahead.js fil, så kalles den templerende motoren hogan.js, etterfulgt av en ny JavaScript-fil vil vi lage for å sette alt i gang, og til slutt stilarket som gjør at alt ser bra ut.

Du vil merke i midten der vi også bruker wp_localize_script for å gjøre Ajax-nettadressen tilgjengelig for JavaScript.

The Footer Script

 (funksjon ($) $ ('input [name =' s ']') .typeahead (navn: 'søk', fjernkontroll: wp_typeahead.ajaxurl + '? action = ajax_search & fn = get_ajax_search & terms =% QUERY' 'verdi
',] .join ("), motor: Hogan) .keypress (funksjon (e) hvis (13 == e.which) $ (dette) .parents (' form ') .submit (); return false ;);) (jQuery);

Sett dette inn i det nye /js/wp-typeahead.js fil. Den ovennevnte jQuery-väljeren vil legge til typehovedfunksjonen til noen av standard WordPress-søkeskjemaer, og bruk Hogan-templeringsmotoren til å formatere de returnerte Ajax-dataene. Noen ganger kan søknadsskjemaet endres av temaet ditt, og send-knappen vil bli fjernet, så jeg har lagt til i et lite skript for å forsikre deg om at når du trykker på enter-knappen, er søknadsskjemaet faktisk sendt.

Ajax-spørringen

 / ** * Ajax-spørring for søket * * @since 1.0.0 * / offentlig funksjon ajax_search () hvis (isset ($ _REQUEST ['fn']) && 'get_ajax_search' == $ _REQUEST ['fn']) $ search_query = nytt WP_Query (array ('s' => $ _REQUEST ['vilkår'], 'posts_per_page' => 10, 'no_found_rows' => true,)); $ results = array (); hvis ($ search_query-> get_posts ()) foreach ($ search_query-> get_posts () som $ the_post) $ title = get_the_title ($ the_post-> ID); $ resultater [] = array ('value' => $ title, 'url' => get_permalink ($ the_post-> ID), 'tokens' => eksplodere (", $ title),; andre $ resultater [] = __ ('Beklager. Ingen resultater samsvarer med søket ditt.', 'Wp-typeahead'); wp_reset_postdata (); echo json_encode ($ results); die ();

Når noe er skrevet inn i søkeskjemaet, vil typeahead.js ta det og sende det gjennom Ajax ved hjelp av fjernparameteren fra koden i det siste trinnet. Denne teksten må passere gjennom en funksjon for at den skal være nyttig, og det er derfor du trenger den lille teksten ovenfor.

Det tar søketeksten, kjører det gjennom et WordPress-spørsmål for å returnere eventuelle relavente resultater hvis de eksisterer. Disse resultatene sendes tilbake etter at de er kodet ved hjelp av JSON, slik at skriptet kan lese dataene riktig.

Den fullførte koden

Med alt på plass, bør den viktigste pluginfilen se slik ut ...

 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 og stilarket * * @since 1.0.0 * / offentlig funksjon 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'); / ** * Ajax-spørring for søket * * @since 1.0.0 * / offentlig funksjon ajax_search () hvis (isset ($ _REQUEST ['fn']) && 'get_ajax_search' == $ _REQUEST ['fn']) $ search_query = ny WP_Query (array ('s' = $ $ REQUEST ['vilkår'], 'posts_per_page' => 10, 'no_found_rows' => true)); $ results = array (); hvis ($ search_query-> get_posts ) foreach ($ search_query-> get_posts () som $ the_post) $ title = get_the_title ($ the_post-> ID); $ resultater [] = array ('value' => $ title, 'url' => get_permalink ($ the_post-> ID), 'tokens' => eksplodere (", $ tittel),);  ellers $ results [] = __ ('Beklager. Ingen resultater samsvarer med søket ditt.', 'wp-typeahead');  wp_reset_postdata (); ekko json_encode ($ resultater);  dø ();  $ bavotasan_wp_typeahead = new Bavotasan_WP_Typeahead;

Når du laster ned plugin-modulen, har du stilarket og nødvendige JS-filer inkludert i ZIP-filen.

Konklusjon

Hvis du legger til et autofullføringsskript i søkeformuläret ditt, kan det hjelpe brukerne å navigere gjennom nettstedet ditt lettere. Det betyr en bedre samlet opplevelse som forhåpentligvis vil føre til flere gjentatte besøk og høyere trafikk. Dette pluginet må bare aktiveres for at det skal fungere med søkeskjemaene dine.

Hvis du har kommentarer eller tilbakemelding på alt du leser over, kan du gjerne diskutere det nedenfor.

Kode