Share
Funksjonen get_search_form () kan (og skal!) brukes til å vise søkeskjemaet for nettstedet ditt. Det gjør jobben, men det er veldig tørt. Sendt med WordPress siden 3.3, er imidlertid et verktøy som kan gjøre det lettere å bruke det. I denne opplæringen vil jeg vise deg hvordan du legger til jQuery Autofullføring i søkeskjemaet.
Denne opplæringen antar at temaet ditt bruker get_search_form () for å vise søkeskjema og samtaler wp_footer ().
Først la oss ta en titt på TwentyEleven søkeskjemaet (searchform.php i temaet ditt). Sjansen er, din er veldig lik. Hvis du ikke finner searchform.php i temaet ditt, bruker det sannsynligvis standardmarkeringen som er nesten identisk. Hvis søkeformuläret ditt er hardkodet, vil jeg anbefale å sette det inn searchform.php, og bruke get_search_form (); for å vise det.
Hva vi etter er ID-attributtet til søkeinngangen, så vi kan målrette det mot jQuery. I dette tilfellet er det 's'.
Før vi starter, la oss gjøre litt jordarbeid. Dette vil også tjene som et sammendrag av hva vi skal gjøre.
Alt følgende bør gå inn i temaet ditt functions.php. Vi skal hekte på "i det'krok med en funksjon som vil:
Accentsconagua
get_search_form filter branner når dette skjer, og vi vil bruke det til å benytte våre skript og stiler.wp_ajax_ handling og wp_ajax_nopriv_ handling hvor handling brukes som en identifikator for handlingen vi ønsker å utføre (og det burde være unikt). Jeg skal sette det til myprefix_autocompletesearch. add_action ('init', 'myprefix_autocomplete_init'); funksjon myprefix_autocomplete_init () // Registrer vår jQuery UI-stil og vår egendefinerte javascript-fil 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); // Funksjon til brann når søknadsskjema vises add_action ('get_search_form', 'myprefix_autocomplete_search_form'); // Funksjoner for å håndtere AJAX-forespørselen - en for innloggede brukere, den andre for brukere som ikke er innlogget. add_action ('wp_ajax_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions'); add_action ('wp_ajax_nopriv_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions'); Vi bruker AJAX til å sende søknadsskjemaets innspill og returnere de tilsvarende innleggene som brukeren skriver. Så vi må gi Autofullfør URL-adressen for å sende forespørselen til. WordPress har en bestemt nettadresse som omhandler AJAX-forespørsler, og dette er gitt av admin_url ('admin-ajax.php'). Dette gir oss nettadressen på server siden - men vi vil ha det i vår javascript-fil. Dette kan gjøres ved hjelp av wp_localize_script. Denne funksjonen var opprinnelig ment å hjelpe til med lokalisering, men vi kan omarbeide den til bruk. Sett dette umiddelbart etter registrering av egendefinert javascript my_acsearch i trinn 1:
wp_localize_script ('my_acsearch', 'MyAcSearch', array ('url' => admin_url ('admin-ajax.php'))); Dette definerer et objekt MyAcSearch som har en eiendom 'url'. En slik metode lar deg sende innstillinger lagret i databasen til javascriptfilen, men for våre formål trenger vi bare MyAcSearch.url som er nettadressen for å rette vår AJAX-forespørsel.
jQuerys autofullføring kommer med en god del funksjonalitet pakket inn i den, men vi holder fast i grunnleggende. Du kan se alle funksjonene på demo siden. Dataene vi sender til AJAX-nettadressen, vil inneholde en handlingsvariabel hvis verdi er handlingsidentifikatoren vi angir i trinn 1. I vårt tilfelle er det myprefix_autocompletesearch. Så, nå i vår javascriptfil, legg til følgende.
var acs_action = 'myprefix_autocompletesearch';
Dette gjør at vi kan identifisere forespørselen, utføre søket og returnere resultatene. Deretter bruker vi Autocomplete-funksjonen til søkeskjemaet (her bruker vi ID-attributtet til skjemainngangen):
$ ("# s"). autofullføring (kilde: funksjon (req, respons) $ .getJSON (MyAcSearch.url + '? callback =? & action =' + acs_action, req, respons);, velg: funksjon , ui) window.location.href = ui.item.link;, minLength: 3,); Kildefunksjonen skal returnere en rekke objekter. Hvert objekt burde ha eiendommen 'merkelapp'(for å vise i forslagslisten), og vi legger til eiendommen'link', nettadressen til innlegget. Valgfunksjonen avfyres når en bruker klikker på ett av forslagene. I dette eksemplet tar du forslaget til den siden. De MINLENGTH angir antall tegn som brukeren må skrive før autofullføringen går inn.
Vi vil pakke inn alt i en .klar handler, så det kjøres bare når siden er fulllastet. Så er det komplette javascript:
jQuery (dokument) .ready (funksjon ($) var acs_action = 'myprefix_autocompletesearch'; $ ("# s") .autocomplete (kilde: funksjon (req, respons) $ .getJSON (MyAcSearch.url + '? callback = ? & action = '+ acs_action, req, response);, velg: funksjon (hendelse, ui) window.location.href = ui.item.link;, minLength: 3,;); Når søknadsskjemaet vises med get_search_form (); funksjon, vår funksjon myprefix_autocomplete_search_form vil brann. I denne funksjonen krever vi skriptene og stilene som vi trenger for Autofullføring. Vi trenger ikke å laste inn jQuery eller Autofullfør direkte, WordPress vet allerede at vi trenger det og vil håndtere det for oss.
funksjon myprefix_autocomplete_search_form () wp_enqueue_script ('my_acsearch'); wp_enqueue_style ('myprefix-jquery-ui'); Alt som gjenstår er å håndtere AJAX-forespørselen.
Husk det i vår myprefix_autocomplete_init funksjon vi kalte noe som følgende:
add_action ('wp_ajax_ action', 'my_hooked_function'); add_action ('wp_ajax_nopriv_ action', 'my_hooked_function'); Den første handlingen avfyres når WordPress mottar en AJAX-forespørsel med handling gitt av handling og brukeren er logget inn. Den andre er avbrutt når brukeren ikke er logget inn. Dette kan være spesielt nyttig hvis du bare vil behandle en AJAX-forespørsel hvis brukeren er logget inn. For våre formål ønsker vi at det skal fungere for begge logget inn og ikke-innloggede brukere, så vi hekker vår funksjon på begge. Her definerer vi denne tilbakeringingsfunksjonen, igjen går dette i din functions.php:
funksjon myprefix_autocomplete_suggestions () // Forespørsel for forslag $ posts = get_posts (array ('s' => $ _ REQUEST ['term'],)); // Initialiser forslag array $ suggestions = array (); global $ post; foreach ($ innlegg som $ post): setup_postdata ($ post); // Initialiser forslaget array $ suggestion = array (); $ forslag ['label'] = esc_html ($ post-> post_title); $ forslag ['link'] = get_permalink (); // Legg til forslag til forslags array $ forslag [] = $ forslag; endforeach; // JSON kode og ekko $ respons = $ _GET ["tilbakeringing"]. "(". json_encode ($ forslag). ")"; " ekko $ respons; // Ikke glem å avslutte! exit; La oss gå gjennom dette litt om gangen. Inngangen brukeren har skrevet, sendes sammen med AJAX-forespørselen, og er gitt av $ _REQUEST [ 'begrepet']. Vi bruker bare get_posts'søkeattributt for å søke i innleggene våre med det aktuelle uttrykket.
Vi går da gjennom hvert av de returnerte innleggene, og for hver enkelt konstruerer vi et forslagstall. At matrisen inneholder postens tittel (vi kaller det 'merkelapp'så Autofullføring vil gjenkjenne den og bruke den til forslagslisten) og innleggets permalink, slik at klikk på et innlegg vil lede brukeren til den siden. Vi legger til hvert forslags array til en forslags array.
Deretter koder vi JSON forslagene, og ekko resultatet. Til slutt slutter vi! Og vi er ferdige!
Gi oss beskjed om hva du synes i kommentarene, og hvis du har noen forslag til hvordan du skal utvide på dette, vil vi gjerne dele dem også.
