Share
De functie get_search_form () kan (en moet!) worden gebruikt om het zoekformulier voor uw site weer te geven. Het doet het werk, maar het is erg saai. Geleverd met WordPress sinds 3.3 is echter een tool die het gebruik ervan een stuk eenvoudiger kan maken. In deze tutorial laat ik je zien hoe je jQuery Autocomplete aan je zoekformulier kunt toevoegen.
Deze tutorial gaat ervan uit dat je thema gebruikt get_search_form () om uw zoekformulier en oproepen weer te geven wp_footer ().
Laten we eerst het zoekformulier van TwentyEleven bekijken (searchform.php in je thema). De kans is groot dat de uwe erg op elkaar lijkt. Als je het niet kunt vinden searchform.php in uw thema, dan gebruikt het waarschijnlijk de standaardmarkering die bijna identiek is. Als uw zoekformulier hard gecodeerd is, raad ik u aan het in te voegen searchform.php, en gebruiken get_search_form (); om het weer te geven.
Wat we zoeken is het ID-kenmerk van de zoekinvoer, zodat we het kunnen targeten met jQuery. In dit geval is het 's'.
Voordat we beginnen, laten we wat grondwerk doen. Dit zal ook dienen als een samenvatting van wat we gaan doen.
Alle volgende zaken moeten ingaan op uw thema's functions.php. We gaan inhaken op de 'in het'haak met een functie die:
Accentsconagua
get_search_form filter vuurt wanneer dit gebeurt en we gebruiken dat om onze scripts en stijlen in te voeren.wp_ajax_ actie en wp_ajax_nopriv_ actie waar actie wordt gebruikt als een identificatie voor de actie die we willen uitvoeren (en zou uniek moeten zijn). Ik zal het regelen myprefix_autocompletesearch. add_action ('init', 'myprefix_autocomplete_init'); function myprefix_autocomplete_init () // Registreer onze jQuery UI-stijl en ons aangepast javascript-bestand wp_register_style ('myprefix-jquery-ui', 'http: //ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/ jquery-ui.css); wp_register_script ('my_acsearch', get_template_directory_uri (). '/js/myacsearch.js', array ('jquery', 'jquery-ui-autocomplete'), null, true); // Functie om te vuren wanneer het zoekformulier add_action wordt weergegeven ('get_search_form', 'myprefix_autocomplete_search_form'); // Functies om met het AJAX-verzoek om te gaan - één voor ingelogde gebruikers en één voor niet-ingelogde gebruikers. add_action ('wp_ajax_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions'); add_action ('wp_ajax_nopriv_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions'); We zullen AJAX gebruiken om de invoer van het zoekformulier te verzenden en de overeenkomende berichten terug te sturen naarmate de gebruiker typt. Dus we moeten Autocomplete de URL geven om het verzoek naar te verzenden. WordPress heeft een specifieke URL die zich bezighoudt met AJAX-verzoeken, en deze wordt gegeven door admin_url ('admin-ajax.php'). Dit geeft ons de URL aan de serverzijde - maar we willen het in ons javascript-bestand. Dit kan gedaan worden met wp_localize_script. Deze functie was oorspronkelijk bedoeld om te helpen met lokalisatie, maar we kunnen deze hergebruiken voor ons gebruik. Plaats dit onmiddellijk na het registreren van het aangepaste javascript my_acsearch in stap 1:
wp_localize_script ('my_acsearch', 'MyAcSearch', array ('url' => admin_url ('admin-ajax.php'))); Dit definieert een object MyAcSearch welke een eigenschap heeft 'url'. Met een dergelijke methode kunt u in de database opgeslagen instellingen naar het javascript-bestand verzenden, maar voor onze doeleinden hebben we dit alleen nodig MyAcSearch.url welke de URL is om ons AJAX-verzoek te sturen.
jQuery's autocomplete wordt geleverd met een flinke hoeveelheid functionaliteit erin, maar we houden ons aan de basis. U kunt alle functies op de demopagina zien. De gegevens die we naar de AJAX-URL verzenden, bevatten een actievariabele waarvan de waarde de actie-ID is die we in stap 1 hebben ingesteld. In ons geval is het myprefix_autocompletesearch. Dus voeg nu het volgende in ons JavaScript-bestand toe.
var acs_action = 'myprefix_autocompletesearch';
Dit stelt ons in staat om het verzoek te identificeren, de zoekopdracht uit te voeren en de resultaten te retourneren. Vervolgens passen we de Autocomplete-functie toe op het zoekformulier (hier gebruiken we het ID-attribuut van de formulierinvoer):
$ ("# s"). autocomplete (source: function (req, response) $ .getJSON (MyAcSearch.url + '? callback =? & action =' + acs_action, req, response);, selecteer: function (event , ui) window.location.href = ui.item.link;, minLength: 3,); De bronfunctie zou een reeks objecten moeten retourneren. Elk object moet de eigenschap hebben 'label'(om weer te geven in de suggestielijst) en we voegen de property toe'link', de URL van het bericht. De selectiefunctie wordt geactiveerd wanneer een gebruiker op een van de suggesties klikt. In dit voorbeeld leidt het klikken op de suggestie u naar die pagina. De minimale lengte geeft het aantal tekens aan dat de gebruiker moet typen voordat de autocomplete wordt gestart.
We pakken dit allemaal in a .klaar handler, dus het wordt alleen uitgevoerd als de pagina volledig is geladen. Dan is het volledige javascript:
jQuery (document) .ready (function ($) var acs_action = 'myprefix_autocompletesearch'; $ ("# s"). autocomplete (source: function (req, response) $ .getJSON (MyAcSearch.url + '? callback = ? & action = '+ acs_action, req, response);, selecteer: function (event, ui) window.location.href = ui.item.link;, minLength: 3,);); Telkens wanneer het zoekformulier wordt weergegeven met behulp van de get_search_form (); functie, onze functie myprefix_autocomplete_search_form zal schieten. In deze functie brengen we de scripts en stijlen in orde die we nodig hebben voor Autocomplete. We hoeven jQuery of Autocomplete niet direct te laden, WordPress weet al dat we het nodig hebben en zal dat voor ons doen.
function myprefix_autocomplete_search_form () wp_enqueue_script ('my_acsearch'); wp_enqueue_style ('myprefix-jquery-ui'); Het enige dat overblijft is om het AJAX-verzoek af te handelen.
Bedenk dat in onze myprefix_autocomplete_init functie hebben we zoiets als het volgende genoemd:
add_action ('wp_ajax_ action', 'my_hooked_function'); add_action ('wp_ajax_nopriv_ action', 'my_hooked_function'); De eerste actie wordt gestart wanneer WordPress een AJAX-verzoek ontvangt met actie gegeven door actie en de gebruiker is ingelogd. De tweede wordt gestart wanneer de gebruiker niet is aangemeld. Dit kan vooral handig zijn als u alleen een AJAX-aanvraag wilt verwerken als de gebruiker is aangemeld. Voor onze doeleinden willen we dat het werkt voor zowel ingelogde en niet-ingelogde gebruikers, dus we haken onze functie aan beide. Hier definiëren we die callback-functie, ook dit gaat in jouw functions.php:
function myprefix_autocomplete_suggestions () // Vraag voor suggesties $ posts = get_posts (array ('s' => $ _ REQUEST ['term'],)); // Initialiseer suggesties array $ suggestions = array (); wereldwijde $ post; foreach ($ posts als $ post): setup_postdata ($ post); // Initialise suggestie array $ suggestion = array (); $ suggestie ['label'] = esc_html ($ post-> post_title); $ suggestie ['link'] = get_permalink (); // Suggestie aan suggesties toevoegen array $ suggestions [] = $ suggestie; endforeach; // JSON codeert en echo $ response = $ _GET ["callback"]. "(". json_encode ($ suggestions). ")"; echo $ antwoord; // Vergeet niet af te sluiten! Uitgang; Laten we dit beetje bij beetje doornemen. De invoer die de gebruiker heeft ingevoerd, wordt samen met het AJAX-verzoek verzonden en wordt gegeven door $ _REQUEST [ 'term']. We gebruiken gewoon get_posts'zoekattribuut om onze berichten met die term te doorzoeken.
We gaan vervolgens door elk van de geretourneerde berichten en voor elke constructie maken we een suggestiereeks. Die array bevat de titel van het bericht (we noemen het 'label'dus Autocomplete herkent het en gebruikt het voor de suggestielijst) en de permalink van de post, zodat het klikken op een bericht de gebruiker naar die pagina leidt. We voegen elke suggestiereeks toe aan een suggestieserie.
Vervolgens coderen JSON de suggesties en geven het resultaat weer. Eindelijk verlaten we ons! En we zijn klaar!
Laat ons weten wat je denkt in de reacties en als je suggesties hebt om dit verder uit te breiden, zouden we ook willen dat je die ook deelt.
