Share
La funzione get_search_form () può (e dovrebbe!) essere utilizzato per visualizzare il modulo di ricerca per il tuo sito. Fa il lavoro, ma è molto blando. Spedito con WordPress dal 3.3, tuttavia, è uno strumento che può renderlo molto più semplice. In questo tutorial ti mostrerò come aggiungere jQuery Autocomplete al tuo modulo di ricerca.
Questo tutorial presume che il tema venga utilizzato get_search_form () per visualizzare il modulo di ricerca e le chiamate wp_footer ().
Diamo prima un'occhiata al modulo di ricerca TwentyEleven (searchform.php nel tuo tema). Le probabilità sono, le tue sono molto simili. Se non riesci a trovare searchform.php nel tuo tema, quindi probabilmente sta usando il mark-up di default che è quasi identico. Se il tuo modulo di ricerca è hard-coded, consiglierei di inserirlo searchform.php, e usando get_search_form (); per visualizzarlo.
Quello che cerchiamo è l'attributo ID dell'input di ricerca, quindi possiamo selezionarlo con jQuery. In questo caso è 'S'.
Prima di iniziare, facciamo un po 'di lavoro a terra. Questo servirà anche come una sintesi di ciò che faremo.
Tutto quanto segue dovrebbe andare nel tuo tema functions.php. Ci aggrapperemo all 'dentro'amo con una funzione che:
Accentsconagua
get_search_form il filtro si attiva ogni volta che questo accade, e lo useremo per accodare i nostri script e stili.wp_ajax_ azione e wp_ajax_nopriv_ azione dove azione è usato come identificatore per l'azione che desideriamo eseguire (e quindi dovrebbe essere unico). Lo farò myprefix_autocompletesearch. add_action ('init', 'myprefix_autocomplete_init'); function myprefix_autocomplete_init () // Registra il nostro stile dell'interfaccia utente jQuery e il nostro file javascript personalizzato 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); // Funzione da attivare ogni volta che viene visualizzato il modulo di ricerca add_action ('get_search_form', 'myprefix_autocomplete_search_form'); // Funzioni per gestire la richiesta AJAX: una per gli utenti registrati, l'altra per gli utenti non registrati. add_action ('wp_ajax_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions'); add_action ('wp_ajax_nopriv_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions'); Useremo AJAX per inviare l'input del modulo di ricerca e restituire i post corrispondenti mentre l'utente digita. Quindi avremo bisogno di fornire il completamento automatico all'URL per inviare la richiesta a. WordPress ha un URL specifico che si occupa delle richieste AJAX, e questo è dato da admin_url ('admin-ajax.php'). Questo ci dà l'URL sul lato server - ma lo vogliamo nel nostro file javascript. Questo può essere fatto usando wp_localize_script. Questa funzione era originariamente pensata per aiutare con la localizzazione, ma possiamo riutilizzarla per il nostro uso. Metti questo subito dopo aver registrato il javascript personalizzato my_acsearch nel passaggio 1:
wp_localize_script ('my_acsearch', 'MyAcSearch', array ('url' => admin_url ('admin-ajax.php'))); Questo definisce un oggetto MyAcSearch che ha una proprieta 'url'. Tale metodo consente di inviare le impostazioni memorizzate nel database al file javascript, ma per i nostri scopi è sufficiente MyAcSearch.url che è l'URL per indirizzare la nostra richiesta AJAX.
La funzione di completamento automatico di jQuery include un bel po 'di funzionalità, ma rimarremo fedeli alle nozioni di base. Puoi vedere tutte le sue funzionalità nella pagina demo. I dati che inviamo all'URL AJAX includeranno una variabile di azione il cui valore è l'identificatore di azione che impostiamo nel passaggio 1. Nel nostro caso è myprefix_autocompletesearch. Quindi, ora nel nostro file javascript, aggiungi quanto segue.
var acs_action = 'myprefix_autocompletesearch';
Questo ci consente di identificare la richiesta, eseguire la ricerca e restituire i risultati. Successivamente applichiamo la funzione di completamento automatico al modulo di ricerca (qui usiamo l'attributo ID dell'input del modulo):
$ ("# s"). autocomplete (source: function (req, response) $ .getJSON (MyAcSearch.url + '? callback =? & action =' + acs_action, req, response);, seleziona: function (evento , ui) window.location.href = ui.item.link;, minLength: 3,); La funzione sorgente dovrebbe restituire una matrice di oggetti. Ogni oggetto dovrebbe avere la proprietà 'etichetta'(da visualizzare nell'elenco dei suggerimenti) e aggiungeremo la proprietà'collegamento', l'URL del post. La funzione di selezione viene attivata quando un utente fa clic su uno dei suggerimenti. In questo esempio, facendo clic sul suggerimento si accede a quella pagina. Il minLength indica il numero di caratteri che l'utente deve digitare prima dell'attivazione del completamento automatico.
Lo completeremo tutto in un .pronto gestore, quindi viene eseguito solo quando la pagina è completamente caricata. Quindi il javascript completo è:
jQuery (document) .ready (function ($) var acs_action = 'myprefix_autocompletesearch'; $ ("# s"). autocomplete (fonte: funzione (richiesta, risposta) $ .getJSON (MyAcSearch.url + '? callback = ? & action = '+ acs_action, req, response);, selezionare: function (event, ui) window.location.href = ui.item.link;, minLength: 3,);); Ogni volta che il modulo di ricerca viene visualizzato utilizzando il get_search_form (); funzione, la nostra funzione myprefix_autocomplete_search_form sparerà. In questa funzione accodiamo gli script e gli stili di cui abbiamo bisogno per il completamento automatico. Non abbiamo bisogno di caricare jQuery o Completamento automatico direttamente, WordPress sa già che ne abbiamo bisogno e lo gestirà per noi.
function myprefix_autocomplete_search_form () wp_enqueue_script ('my_acsearch'); wp_enqueue_style ('myprefix-jquery-ui'); Non resta che gestire la richiesta AJAX.
Ricordalo nel nostro myprefix_autocomplete_init funzione abbiamo chiamato qualcosa di simile al seguente:
add_action ('wp_ajax_ action', 'my_hooked_function'); add_action ('wp_ajax_nopriv_ action', 'my_hooked_function'); La prima azione viene attivata quando WordPress riceve una richiesta AJAX con un'azione data da azione e l'utente ha effettuato l'accesso. Il secondo viene attivato quando l'utente non ha effettuato l'accesso. Ciò può essere particolarmente utile se si desidera elaborare una richiesta AJAX solo se l'utente ha effettuato l'accesso. Per i nostri scopi, vogliamo che funzioni sia per gli utenti che hanno effettuato l'accesso e quelli che non hanno effettuato il log-in, quindi colleghiamo la nostra funzione a entrambi. Qui definiamo quella funzione di callback, di nuovo questo va nella tua functions.php:
function myprefix_autocomplete_suggestions () // Query for suggestions $ posts = get_posts (array ('s' => $ _ REQUEST ['term'],)); // Inizializza suggerimenti array $ suggestions = array (); $ globale post; foreach ($ post come $ post): setup_postdata ($ post); // Inizializza suggerimento array $ suggestion = array (); $ suggestion ['label'] = esc_html ($ post-> post_title); $ suggestion ['link'] = get_permalink (); // Aggiungi suggerimento ai suggerimenti array $ suggestions [] = $ suggerimento; endforeach; // JSON codifica ed echo $ response = $ _GET ["callback"]. "(". json_encode ($ suggestions). ")"; echo $ risposta; // Non dimenticare di uscire! Uscita; Analizziamolo un po 'alla volta. L'input che l'utente ha digitato viene inviato insieme alla richiesta AJAX e viene fornito da $ _REQUEST [ 'termine']. Usiamo semplicemente get_posts'attributo di ricerca per cercare i nostri post con quel termine.
Quindi esaminiamo ciascuno dei post restituiti e per ognuno di essi viene creato un array di suggerimenti. Quella matrice contiene il titolo del post (noi lo chiamiamo 'etichetta'così Autocomplete lo riconoscerà e lo userà per la lista dei suggerimenti) e il permalink del post, in modo che facendo clic su un post indirizzerà l'utente a quella pagina. Aggiungiamo ogni matrice di suggerimenti a una matrice di suggerimenti.
Successivamente, JSON codifica i suggerimenti ed echeggia il risultato. Finalmente, usciamo! E abbiamo finito!
Fateci sapere cosa ne pensate nei commenti e, se avete suggerimenti su come estenderlo, vi farebbe piacere condividerli anche voi.
