Un tutorial sull'utilizzo di AJAX in WordPress

AJAX è una tecnologia web straordinaria che ci ha portato oltre il semplice “clicca link, vai a un'altra pagina” struttura di Internet 1.0.

AJAX, che rappresenta Javascript asincrono e XML, consente ai siti Web di recuperare e visualizzare i contenuti in modo dinamico senza che l'utente si allontani dalla pagina corrente. Ciò porta a un'esperienza utente molto più interattiva e può anche accelerare le cose poiché non è necessario caricare una pagina web completamente nuova. Fortunatamente, fare uso di AJAX è abbastanza facile da fare all'interno dell'ambiente WordPress, e oggi vi mostrerò come.

Questo tutorial Ajax dovrebbe essere considerato abbastanza avanzato e continua dall'ultima volta in cui abbiamo imparato come utilizzare le tabelle di database personalizzate Lavorare con tabelle di database personalizzate in WordPress Lavorare con tabelle di database personalizzate in WordPress Una veloce scansione della pagina Best of WordPress Plugin rivelerà alcuni dei molti modi unici e di nicchia che puoi rendere più difficile il tuo blog. Cosa succede se hai già un database di ... Leggi di più da un modello WordPress - nel mio esempio è stata utilizzata una semplice tabella esistente di dati dei clienti. Quando si tratta di inserire nuovamente le cose nel database, faremo uso di una piccola magia AJAX all'interno di WordPress.

Tutto il codice nel 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 rilevante.

Perché usare AJAX?

L'uso più comune di AJAX è legato ai moduli: verifica se viene utilizzato un nome utente o compilando il resto del modulo con domande diverse a seconda della risposta specifica che si fornisce. In pratica, però, usi AJAX ogni volta che vuoi un evento (come un utente che fa clic su qualcosa o digita qualcosa) legato a a lato server azione che si verifica nel sfondo.

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

Panoramica su Come utilizzare AJAX in WordPress

1. Modifica il tuo modello personalizzato per includere un modulo o evento javascript che invierà i dati tramite jQuery AJAX a admin-ajax.php compresi i dati post che vuoi passare. Assicurati che jQuery sia caricato.
2. Definisci una funzione nel tuo tema function.php; leggi variabili post e restituisci qualcosa all'utente, se lo desideri.
3. Aggiungi un Gancio d'azione AJAX per la tua funzione.

Creazione del modulo

Iniziamo creando un modulo semplice sul front-end per inserire i nuovi dettagli del cliente. Non è niente di complicato, basta sostituire la parte principale del tuo modello personalizzato con questo codice che abbiamo iniziato la scorsa settimana, attorno a dove 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 è che c'è l'uso di un campo di input nascosto chiamato azione - questo contiene il nome della funzione che verrà attivata tramite AJAX.

Il ricevitore PHP

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

wp_enqueue_script ( 'jquery');

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

function myFunction () // fa qualcosa die ();  add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Queste ultime due righe sono hook di azione che dicono a WordPress “Ho una funzione chiamata myFunction e voglio che tu la ascolti perché verrà chiamata attraverso l'interfaccia AJAX” - il primo è per gli utenti a livello di amministrazione, 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'); function addCustomer () global $ wpdb; $ nome = $ _POST ['nome']; $ telefono = $ _POST ['telefono']; $ email = $ _POST ['email']; $ indirizzo = $ _POST ['indirizzo']; if ($ wpdb-> insert ('clienti', array ('nome' => $ nome, 'email' => $ email, 'indirizzo' => $ indirizzo, 'telefono' => $ telefono)) === FALSE) echo "Errore";  else echo "Cliente" ". $ nome. "'aggiunto con successo, ID riga è". $ wpdb-> insert_id;  die ();  add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // non proprio necessario

Proprio come prima, stiamo dichiarando il globale $ wpdb per darci accesso diretto al database. Stiamo quindi afferrando il INVIARE variabili che contengono i dati del modulo. Circondato da un'istruzione IF è la funzione $ Wpdb-> inserto, che è quello che usiamo per inserire i dati nella nostra tabella. Poiché WordPress fornisce funzioni specifiche per l'inserimento di post normali e metadati, questo $ Wpdb-> inserto il metodo è generalmente utilizzato solo per le tabelle personalizzate. Puoi leggere di più sul Codex, ma in pratica prende il nome del tavolo da inserire, seguito da un schieramento di coppie colonna / valore.

Il === FALSE controlla se la funzione di inserimento non è riuscita e, in tal caso, emette “errore“. Altrimenti, stiamo solo inviando un messaggio all'utente Il cliente X è stato aggiunto, ed echeggiare il $ Wpdb-> insert_id variabile, che indica il variabile autoincremento dell'ultima operazione di inserimento avvenuta (supponendo che tu abbia impostato un campo che incrementa automaticamente, come un ID).

Finalmente, morire() sostituirà il valore predefinito die (0) fornito da WordPress - questo non è essenziale in quanto tale, ma senza di esso si otterrà 0 aggiunto alla fine di tutto ciò che si invia al modello.

Il Javascript

Il passo finale è il bit magico - l'effettivo 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 ignoreremo con la nostra chiamata AJAX. Il modo generale per farlo sarebbe:

jQuery.ajax (tipo: "POST", url: "/wp-admin/admin-ajax.php", // i dati del file del gestore PHP: "myDataString", success: function (results) // fai qualcosa con dati restituiti);

Questa è la struttura di base della chiamata AJAX che useremo, ma certamente non l'unico modo in cui puoi farlo. Potresti chiederti perché ci stiamo riferendo a wp-admin qui, anche se questo sarà sul front-end del sito. Questo è solo dove il Gestore AJAX risiede, sia che lo stiate usando per le funzioni frontali o di amministrazione, confondendo, lo so. Incolla il seguente codice direttamente nel modello del cliente:

Nella prima riga, colleghiamo 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 è serializzare () 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 hai problemi, puoi visualizzare il codice completo del modello di pagina qui (basato sul tema del ventunesima predefinito), e il codice da aggiungere a functions.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 omesso un punto chiave, e questo è l'uso di un wp-nonce - un codice one-off generato da WordPress che garantisce che la richiesta AJAX provenga solo da dove era stata progettata; una passkey se vuoi. Senza di ciò, la tua funzione potrebbe essere efficacemente sfruttata per inserire dati casuali. Gli attacchi SQL injection non sono un problema, perché abbiamo indirizzato le query attraverso WordPress $ Wpdb-> inserto funzione - WordPress pulisce tutti gli input per te e li rende sicuri.

Aggiornamento della tabella dei clienti: Al momento, inviamo 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 sconfigge lo scopo di farlo tutto tramite AJAX). Verifica se puoi creare una nuova funzione AJAX in grado di generare dinamicamente la tabella.

Input Validation: poiché non è in corso alcuna convalida con i dati del modulo, è effettivamente possibile aggiungere voci vuote o più voci se si premono troppe volte. Qualche convalida dell'input sui campi del modulo, cancellandoli al termine, così come SQL per controllare l'e-mail o il numero di telefono che non esiste già nel database sarebbe utile.

Questo è tutto da me questa settimana - se hai avuto problemi seguendo questo tutorial, sentiti libero di entrare in contatto con i commenti e farò del mio meglio per aiutarti; o se stai cercando di personalizzarlo in qualche modo, sentiti libero di rimbalzare di idee su di me. Spero che questo mostri davvero 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 su WordPress.

Scopri di più su: Programmazione, Strumenti per i Webmaster, Wordpress.