Un tutorial sull'uso di AJAX in WordPress

Annuncio pubblicitario

AJAX è una straordinaria tecnologia web che ci ha spostato oltre il semplice "fai clic sul link, vai a un'altra pagina" struttura di Internet 1.0.

AJAX, che sta per Javascript e XML asincroni, consente ai siti Web di recuperare e visualizzare dinamicamente i contenuti senza che l'utente si allontani dalla pagina corrente. Ciò porta a un'esperienza utente molto più interattiva e può anche velocizzare le cose poiché non è necessario caricare una pagina Web completamente nuova. Fortunatamente, utilizzare AJAX è abbastanza facile da fare all'interno dell'ambiente WordPress, e oggi ti mostrerò come.

Questo tutorial Ajax dovrebbe essere considerato abbastanza avanzato e continua dall'ultima volta in cui abbiamo imparato come utilizzare tabelle di database personalizzate Lavorare con tabelle di database personalizzate in WordPressUna rapida scansione della pagina dei migliori plug-in di WordPress rivelerà alcuni dei tanti modi unici e di nicchia in cui puoi far lavorare di più il tuo blog. Cosa succede se si dispone già di un database di ... Leggi di più

dall'interno di un modello WordPress - nel mio esempio, è stata utilizzata una semplice tabella esistente di dati dei clienti. Quando si tratta di reinserire le cose nel database, faremo uso di un po 'di magia AJAX in WordPress.

Tutto il codice del tutorial di oggi farà quindi riferimento a ciò che abbiamo scritto l'ultima volta, ma se stai solo cercando come fare AJAX in WordPress, è altrettanto pertinente.

Perché usare AJAX?

L'uso più comune di AJAX è legato ai moduli: verificare se viene utilizzato un nome utente o compilare il resto del modulo con domande diverse a seconda di una particolare risposta fornita. Fondamentalmente, usi AJAX ogni volta che vuoi un evento (come un utente che fa clic su qualcosa o digita qualcosa) legato ad a lato server azione che si verifica in sfondo.

Lo useremo per aggiungere nuove voci alla nostra importante tabella del database clienti personalizzata, ma probabilmente puoi trovare qualcosa di più eccitante.

Panoramica di come utilizzare AJAX in WordPress

1. Modifica il tuo modello personalizzato per includere un modulo o un evento JavaScript che invierà i dati tramite jQuery AJAX a admin-ajax.php compresi tutti i dati di post che si desidera trasmettere. Assicurarsi che jQuery sia in fase di caricamento.
2. Definisci una funzione nel tuo tema function.php; leggi le variabili dei post e, se lo desideri, restituisci qualcosa all'utente.
3. Aggiungi un Gancio di azione AJAX per la tua funzione.

Creazione del modulo

Cominciamo creando un semplice modulo sul front-end per inserire i dettagli di nuovi clienti. Non è niente di complicato, basta sostituire la parte principale del tuo modello personalizzato con questo codice che abbiamo iniziato la scorsa settimana, in cui si verifica il controllo is_user_logged_in ():

if (is_user_logged_in ()):?> 

Nome:E-mail:Telefono:Indirizzo:

L'unica cosa che potrebbe sembrare strana a te è che c'è l'uso di un campo di input nascosto chiamato azione - questo contiene il nome della funzione che attiveremo tramite AJAX.

Il ricevitore PHP

Quindi, apri functions.php e aggiungi la seguente riga per assicurarti che jQuery sia caricato sul tuo sito:

wp_enqueue_script ( 'jquery');

La struttura di base per scrivere una chiamata AJAX è la seguente:

funzione myFunction () { //fare qualcosa. morire(); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Queste ultime due righe sono hook di azione che indicano WordPress "Ho una funzione chiamata myFunction e voglio che la ascolti perché verrà chiamata tramite l'interfaccia AJAX" - il primo è per gli utenti a livello di amministratore, mentre wp_ajax_nopriv_ è per gli utenti che non hanno effettuato l'accesso. Ecco il codice completo per functions.php che useremo per inserire i dati nella nostra tabella dei clienti speciali, che spiegherò a breve:

wp_enqueue_script ( 'jquery'); funzione addCustomer () {global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ address = $ _POST ['address']; if ($ wpdb-> insert ( 'clienti', array ( 'name' => $ name, 'email' => $ email, 'address' => $ address, 'phone' => $ phone. )) FALSE) {echo "Errore"; } altro { echo "Customer" ". $ name. "'aggiunto correttamente, ID riga è". $ wpdb-> insert_id; } morire(); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // non proprio necessario

Proprio come prima, dichiariamo il $ wpdb globale per darci l'accesso diretto al database. Stiamo quindi afferrando il INVIARE variabili che contengono i dati del modulo. La funzione è racchiusa in un'istruzione IF $ Wpdb-> inserto, che è ciò che utilizziamo per inserire dati nella nostra tabella. Poiché WordPress offre funzioni specifiche per l'inserimento di post regolari e metadati, questo $ Wpdb-> inserto il metodo viene generalmente utilizzato solo per tabelle personalizzate. Puoi leggi di più sul Codice, ma in pratica prende il nome della tabella da inserire, seguito da un Vettore di coppie colonna / valore.

Il FALSE controlla se la funzione di inserimento non è riuscita e, in tal caso, genera "errore“. In caso contrario, stiamo solo inviando un messaggio all'utente Il cliente X è stato aggiuntoe facendo eco a $ Wpdb-> insert_id variabile, che indica il variabile di incremento automatico dell'ultima operazione di inserimento avvenuta (supponendo che tu abbia impostato un campo che si auto-incrementa, come un ID).

Finalmente, morire() sovrascriverà l'impostazione predefinita die (0) fornito da WordPress - questo non è essenziale in quanto tale, ma senza di esso otterrai 0 aggiunto alla fine di tutto ciò che viene inviato al modello.

Il Javascript

Il passaggio finale è il bit magico: l'attuale Javascript che avvierà la chiamata AJAX. Noterai che nel modulo che abbiamo aggiunto in precedenza, il campo di azione è stato lasciato vuoto. Questo perché lo sostituiremo con la nostra chiamata AJAX. Il modo generale per farlo sarebbe:

jQuery.ajax ({tipo: "POST", url: "/wp-admin/admin-ajax.php", // dati del nostro file gestore PHP: "myDataString", successo: funzione (risultati) {// fare qualcosa con dati restituiti})};

Questa è la struttura di base della chiamata AJAX che useremo, ma certamente non è l'unico modo per farlo. Forse ti starai chiedendo perché ci stiamo riferendo a wp-admin qui, anche se questo sarà sul front-end del sito. Questo è dove il Gestore AJAX risiede, se lo stai usando per le funzioni frontali o amministrative - confuso, lo so. Incolla il seguente codice direttamente nel modello del cliente:

Nella prima riga, alleghiamo la nostra funzione ajaxSubmit al modulo che abbiamo creato in precedenza, quindi quando l'utente fa clic su Invia, passa attraverso la nostra speciale funzione AJAX. Senza questo, la nostra forma non farà nulla. Nel nostro ajaxSubmit () funzione, la prima cosa che facciamo è serialize () il modulo. Questo prende solo tutti i valori del modulo e li trasforma in una lunga stringa che il nostro PHP analizzerà in seguito. Se tutto funziona correttamente, inseriremo i dati restituiti nel DIV con l'ID del feedback.

Questo è tutto. Salva tutto, aggiorna e prova a inviare alcuni dati del modulo. Se riscontri problemi, puoi visualizzare il codice completo del modello di pagina qui (basato sul tema predefinito undici)e il codice da aggiungere funzioni.php qui(non sostituire, basta aggiungere questo alla fine).

Cose da tenere a mente

Sicurezza: Questo codice non è pronto per la produzione ed è solo a scopo di apprendimento. Abbiamo lasciato fuori un punto chiave, e questo è l'uso di a wp-nonce - un codice una tantum generato da WordPress che garantisce che la richiesta AJAX provenga solo da dove era stata progettata; una passkey se vuoi. Senza questo, la tua funzione potrebbe essere effettivamente sfruttata per inserire dati casuali. Tuttavia, gli attacchi SQL injection non sono un problema, perché abbiamo instradato le query tramite WordPress $ Wpdb-> inserto funzione - WordPress pulisce tutti gli input per te e li rende sicuri.

Aggiornamento della tabella dei clienti: Al momento, restituiamo solo un messaggio di conferma, ma la tabella dei clienti non viene aggiornata: vedrai le voci aggiuntive solo se aggiorni la pagina (che tipo di sconfitte ha lo scopo di fare tutto questo tramite AJAX). Verifica se riesci a creare una nuova funzione AJAX in grado di emettere dinamicamente la tabella.

Convalida input: poiché non è in corso alcuna convalida con i dati del modulo, in realtà è possibile aggiungere voci vuote o più voci se si premono troppe volte. Sarebbe utile un po 'di convalida di input nei campi del modulo, cancellandoli una volta completato, così come SQL per controllare l'e-mail o il numero di telefono che non esiste già nel database.

Questo è tutto da me questa settimana - se hai avuto problemi a seguire questo tutorial, sentiti libero di metterti in contatto con i commenti e farò del mio meglio per aiutarti; o se stai cercando di personalizzarlo in qualche modo, sentiti libero di farmi rimbalzare le idee. Spero che questo possa davvero dimostrare quanto puoi fare da WordPress semplicemente combinando un po 'di JavaScript, PHP e MySQL. Come sempre, non dimenticare di dare un'occhiata a tutti gli altri Articoli WordPress.