Share
Functia get_search_form () poate (și ar trebui!) să fie utilizat pentru a afișa formularul de căutare pentru site-ul dvs. Își face treaba, dar este foarte bland. Transportat cu WordPress din 3.3, cu toate acestea, este un instrument care poate face folosirea lui mult mai usoara. În acest tutorial vă voi arăta cum să adăugați jQuery Autocomplete la formularul de căutare.
Acest tutorial presupune că tema dvs. folosește get_search_form () pentru a afișa formularul de căutare și apelurile wp_footer ().
Mai întâi, să aruncăm o privire la formularul de căutare TwentyEleven (searchform.php în tema dvs.). Șansele sunt, a ta este foarte asemănătoare. Dacă nu puteți găsi searchform.php în tema dvs., probabil că utilizați marcajul implicit, care este aproape identic. Dacă formularul dvs. de căutare este greu codificat aș recomanda punerea lui în searchform.php, și utilizarea get_search_form (); pentru ao afișa.
Ceea ce urmărim este atributul ID al intrării de căutare, așa că putem să-l vizăm cu jQuery. În acest caz,s'.
Înainte de a începe, să facem un pic de muncă la sol. Aceasta va servi, de asemenea, ca un rezumat al ceea ce vom face.
Toate cele de mai jos ar trebui să intre în tema ta functions.php. Vom urca pe "init'cârlig cu o funcție care va:
Accentsconagua
get_search_form filtrează incendii ori de câte ori se întâmplă acest lucru și vom folosi acest lucru pentru a scoate în evidență scenariile și stilurile noastre.wp_ajax_ acțiune și wp_ajax_nopriv_ acțiune Unde acțiune este folosit ca un identificator al acțiunii pe care dorim să o realizăm (și ar trebui să fie unică). O voi pune myprefix_autocompletesearch. add_action ('init', 'myprefix_autocomplete_init'); funcția myprefix_autocomplete_init () // Înregistrați-ne stilul jQuery UI și fișierul personalizat javascript 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); // Funcție de foc când se afișează formularul de căutare add_action ('get_search_form', 'myprefix_autocomplete_search_form'); // Funcții pentru a face față solicitării AJAX - una pentru utilizatorii conectați, cealaltă pentru utilizatorii non-logged. add_action ('wp_ajax_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions'); add_action ('wp_ajax_nopriv_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions'); Vom utiliza AJAX pentru a trimite formularul de căutare și pentru a returna posturile potrivite ca tipuri de utilizatori. Așadar, va trebui să dăm automată completă URL-ul pentru a trimite cererea. WordPress are o adresă URL specifică care se ocupă de cererile AJAX, iar acest lucru este dat de admin_url ('admin-ajax.php'). Aceasta ne dă adresa URL pe partea de server - dar o vrem în fișierul javascript. Acest lucru se poate face folosind wp_localize_script. Această funcție a fost inițial destinată să ajute la localizarea, dar o putem folosi pentru uzul nostru. Puneți acest lucru imediat după înregistrarea javascriptului personalizat my_acsearch în etapa 1:
wp_localize_script ('my_acsearch', 'MyAcSearch', array ('url' => admin_url ('admin-ajax.php')); Aceasta definește un obiect MyAcSearch care are o proprietate "URL-ul“. O astfel de metodă vă permite să trimiteți setările stocate în baza de date în fișierul javascript, dar pentru scopurile noastre avem nevoie doar MyAcSearch.url care este URL-ul pentru a direcționa cererea noastră AJAX.
Completarea automată a lui jQuery vine cu un pic de funcționalitate ambalat în ea, dar vom rămâne la elementele de bază. Puteți vedea toate caracteristicile sale pe pagina demo. Datele pe care le trimitem către URL-ul AJAX vor include o variabilă de acțiune a cărei valoare este identificatorul de acțiune stabilit în pasul 1. În cazul nostru, este myprefix_autocompletesearch. Deci, acum, în fișierul nostru javascript, adăugați următoarele.
var acs_action = 'myprefix_autocompletesearch';
Acest lucru ne permite să identificăm solicitarea, să efectuăm căutarea și să returnăm rezultatele. Apoi aplicăm funcția Autocompletare în formularul de căutare (aici folosim atributul ID al formularului de intrare):
$ ("s", "return"), selectați: funcția (evenimentul ()) , ui) fereastră.locație.href = ui.item.link;, minLength: 3,); Funcția sursă ar trebui să returneze o serie de obiecte. Fiecare obiect ar trebui să aibă proprietatea "eticheta'(pentru a fi afișate în lista de sugestii) și vom adăuga proprietatea'legătură", adresa URL a postului. Funcția selectare este declanșată atunci când un utilizator face clic pe una dintre sugestii. În acest exemplu, dând clic pe sugestie, veți ajunge la acea pagină. MINLENGTH indică numărul de caractere pe care utilizatorul trebuie să le scrie înainte ca autocompletul să apară.
Vom înfășura totul într-un .gata handler, deci rulează numai atunci când pagina a fost încărcată complet. Apoi javascriptul complet este:
jQuery (document) .ready (functie ($) var acs_action = 'myprefix_autocompletesearch'; $ ("# s"). ? & action = '+ acs_action, req, răspuns);, selectați: funcția (event, ui) window.location.href = ui.item.link;, minLength: 3,); Ori de câte ori formularul de căutare este afișat utilizând get_search_form (); funcție, funcția noastră myprefix_autocomplete_search_form va incendia. În această funcție introducem scenariile și stilurile de care avem nevoie pentru Autocomplete. Nu trebuie să încărcați direct jQuery sau Autocomplete, WordPress știe deja că avem nevoie de ea și ne va ocupa de asta pentru noi.
funcția myprefix_autocomplete_search_form () wp_enqueue_script ('my_acsearch'); wp_enqueue_style ('myprefix-jquery-ui'); Tot ce rămâne rămâne să se ocupe de cererea AJAX.
Amintiți-vă că în nostru myprefix_autocomplete_init ne-am numit ceva de genul:
add_action ('wp_ajax_ action', 'my_hooked_function'); add_action ('wp_ajax_nopriv_ action', 'my_hooked_function'); Prima acțiune este declanșată atunci când WordPress primește o solicitare AJAX cu o acțiune dată de acțiune și utilizatorul este conectat. Cel de-al doilea este declanșat atunci când utilizatorul nu este conectat. Acest lucru poate fi util în special dacă doriți să procesați doar o solicitare AJAX dacă utilizatorul este conectat. Pentru scopurile noastre vrem să funcționeze atât pentru ambele conectat și non-logged in utilizatori, așa că am cârlig funcția noastră pe ambele. Aici definim funcția de apel invers, din nou acest lucru se întâmplă în dvs. functions.php:
funcția myprefix_autocomplete_suggestions () // Cerere pentru sugestii $ posturi = get_posts (array ('s' => $ _ REQUEST ['termen'],)); // Initializați sugestiile array $ sugences = array (); postare globală $; foreach ($ postări ca $ post): setup_postdata ($ post); // Initializați sugestia array $ suggestion = array (); $ sugestie ['label'] = esc_html ($ post-> post_title); $ sugestie ['link'] = get_permalink (); // Adăugați sugestia la sugestii array $ suggestions [] = $ suggestion; endforeach; // JSON encode și echo $ response = $ _GET ["callback"]. "(" json_encode ($ sugestii) "); răspunsul echo $; // Nu uitați să ieșiți! Ieșire; Să trecem puțin câte puțin. Intrarea introdusă de utilizator este trimisă împreună cu cererea AJAX și este dată de $ _REQUEST [ 'termenul']. Pur și simplu folosim get_posts"atributul de căutare pentru a căuta postările noastre cu acel termen.
Apoi, trecem prin fiecare dintre posturile returnate, iar pentru fiecare construim o matrice de sugestii. Această matrice conține titlul postului (îl numim "eticheta"așa că Autocomplete îl va recunoaște și îl va folosi pentru lista de sugestii) și permalink-ul postului, astfel încât clicul pe un post va direcționa utilizatorul către acea pagină. Adăugăm fiecare matrice de sugestii într-o matrice de sugestii.
Apoi, codul JSON codifică sugestiile și ecou rezultatul. În cele din urmă, ieșim! Și am terminat!
Spuneți-ne ce credeți în comentariile dvs. și dacă aveți sugestii cu privire la modul în care puteți extinde acest lucru, ne-ar plăcea să le împărtășiți și ei.
