Share
Het zoekformulier van WordPress biedt standaard geen toeters en bellen. Als het al in uw thema is opgenomen of als u de zoekwidget aan een van uw zijbalken hebt toegevoegd, kunt u daarvan een bevestiging krijgen. Een manier om de functionaliteit enorm te verbeteren, is om een autocomplete-script op te nemen om de efficiëntie van hoe relevante zoekopdrachten worden doorgestuurd te verbeteren.
Er zijn nogal wat autocomplete scripts beschikbaar en onlangs heeft Jake Harding van Twitter typeahead.js uitgegeven, een volledig onafhankelijke versie van een gelijksoortig script dat wordt geleverd met Bootstrap. Ik dacht dat het interessant zou zijn om erachter te komen hoe ik dit lichtgewicht script met WordPress kon gebruiken en na een beetje gekwebbel lukte het me om een klein plug-in samen te stellen met de hulp van Michal Bluma..
De plug-in is vrij eenvoudig, omdat er maar een klein beetje maatwerk nodig is om de zaken naar behoren te laten werken. Ik zal elk gedeelte van de plugin-code voor u opsplitsen om uit te leggen wat er aan de hand is.
Accentsconagua
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 = nieuwe Bavotasan_WP_Typeahead; Op zichzelf zal de bovenstaande code slechts enkele fouten uitspugen, maar dit is het begin van alles wat je nodig hebt om typeahead.js te gebruiken met het WordPress-zoekformulier. De eerste actie is er om de JavaScript- / CSS-bestanden die u nodig hebt in te checken en de vereiste JS in de voettekst te plaatsen. Vervolgens komen de Ajax-oproepen om te helpen met de zoekresultaten. Laten we naar elke functie kijken.
/ ** * Typeahead.js en het stylesheet * * @since 1.0.0 * / public function wp_enqueue_scripts () wp_enqueue_script ('wp_typeahead_js', $ this-> plugin_url. 'Js / typeahead.min.js', array () plaatsen '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'); Er zijn vier bestanden die in de wachtrij moeten worden geplaatst. De eerste is de feitelijke typeahead.js bestand, dan wordt de templating-engine gebeld hogan.js, gevolgd door een nieuw JavaScript-bestand dat we zullen maken om alles in beweging te zetten, en tot slot het stylesheet dat het allemaal goed doet lijken.
Je zult merken dat we er in het midden ook gebruik van maken wp_localize_script om de Ajax-URL beschikbaar te maken voor onze JavaScript.
(functie ($) $ ('input [naam = "s"]') .typeahead (name: 'search', remote: wp_typeahead.ajaxurl + '? action = ajax_search & fn = get_ajax_search & terms =% QUERY', sjabloon: [ 'waarde
',] .join ("), engine: Hogan) .keypress (functie (e) if (13 == e.which) $ (this) .parents (' form ') .submit (); return false ;);) (jQuery); Zet dit in het nieuwe /js/wp-typeahead.js het dossier. De bovenstaande jQuery-selector koppelt de typeahead-functie aan een van de standaardzoekformulieren van WordPress en gebruikt de Hogan-templatemachine om de geretourneerde Ajax-gegevens te formatteren. Soms kan het zoekformulier door uw thema worden gewijzigd en de knop Verzenden wordt verwijderd, dus ik heb een klein script toegevoegd om ervoor te zorgen dat wanneer u op de knop Enter klikt, het zoekformulier daadwerkelijk is ingediend.
/ ** * Ajax-zoekopdracht voor de zoekopdracht * * @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 () als $ the_post) $ title = get_the_title ($ the_post-> ID); $ resultaten [] = array ('value' => $ title, 'url' => get_permalink ($ the_post-> ID), 'tokens' => explode (", $ title),); else $ resultaten [] = __ ('Sorry, geen resultaten komen overeen met je zoekopdracht.', 'Wp-typeahead'); wp_reset_postdata (); echo json_encode ($ results); die (); Wanneer iets in het zoekformulier is getypt, zal typeahead.js het opnemen en het via Ajax verzenden met de parameter remote in de laatste stap. Die tekst moet een functie doorlopen om bruikbaar te zijn en daarom heb je het kleine fragment hierboven nodig.
Het neemt de zoektekst, voert het door een WordPress-query uit om eventuele relevante resultaten te retourneren als deze bestaan. Die resultaten worden teruggestuurd nadat ze zijn gecodeerd met JSON, zodat het script de gegevens correct kan lezen.
Met alles op zijn plaats, zou het hoofd-plugin-bestand er zo uit moeten zien ...
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')); / ** * Typeahead.js en het stylesheet * * @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'); / ** * Ajax-zoekopdracht voor de zoekopdracht * * @since 1.0.0 * / public function ajax_search () if (isset ($ _REQUEST ['fn']) && 'get_ajax_search' == $ _REQUEST ['fn']) $ search_query = nieuwe 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 () als $ the_post) $ title = get_the_title ($ the_post-> ID); $ results [] = array ('value' => $ title, 'url' => get_permalink ($ the_post-> ID), 'tokens' => exploderen (", $ title),); else $ results [] = __ ('Sorry, er zijn geen resultaten gevonden die overeenkomen met je zoekopdracht.', 'wp-typeahead'); wp_reset_postdata (); echo json_encode ($ resultaten); dood gaan(); $ bavotasan_wp_typeahead = nieuwe Bavotasan_WP_Typeahead; Wanneer u de plug-in downloadt, hebt u de stylesheet en vereiste JS-bestanden opgenomen in het ZIP-bestand.
Het toevoegen van een autocomplete-script aan uw zoekformulier kan uw gebruikers helpen gemakkelijker door uw site te navigeren. Dat betekent een betere algemene ervaring die hopelijk zal leiden tot meer herhalingsbezoeken en meer verkeer. Deze plug-in hoeft alleen maar te worden geactiveerd om te kunnen werken met uw zoekformulieren.
Als u opmerkingen of feedback heeft over iets dat u hierboven hebt gelezen, aarzel dan niet om het hieronder te bespreken.
