Share
Alcuni articoli fa, ho dato un primer su Ajax nella Dashboard di WordPress, ma i commenti hanno portato a una discussione per sapere esattamente come farlo sul frontend di WordPress (e come farlo nel modo giusto).
Consiglio vivamente di rivedere la serie precedente per capire dove stiamo andando, ma in questo articolo forniremo una breve panoramica di cosa sia Ajax, come funziona, come impostarlo in primo piano e capire i ganci forniti da WordPress.
Nel prossimo articolo, realizzeremo in realtà un piccolo progetto che mette in pratica la teoria. Passeremo attraverso il codice sorgente e ci assicureremo che sia disponibile anche su GitHub.
Nel frattempo, iniziamo a recensire Ajax e le strutture che WordPress fornisce per noi.
A questo punto, Ajax non è nuovo. In effetti, è difficile trovare un sito Web moderno e / o un'applicazione web che non lo includa già, quindi terrò questo breve e al punto.
In generale, Ajax è ciò che ci consente di eseguire aggiornamenti parziali delle pagine.
Ciò significa che possiamo aggiornare una parte (o parti) di una pagina senza che l'utente debba aggiornare l'intera pagina. Il ciclo di vita di solito va in questo modo:
Relativamente facile da capire, giusto?
Per comprendere questo processo in WordPress, dobbiamo dare un'occhiata ad alcune idee che sono più concrete di "l'utente fa qualcosa" e "aggiorna la pagina di conseguenza".
Detto questo, molti di noi hanno familiarità con le azioni, i filtri e il sistema di aggancio generale di WordPress che ci consente di farlo, ahem, agganciare il ciclo di vita delle pagine di WordPress per introdurre le nostre funzionalità o elaborare i dati prima di eseguirne il rendering. In caso contrario, rivedi i Ganci WordPress - sia azioni che filtri - poiché questa serie presuppone che tu abbia un livello di familiarità con entrambi.
L'introduzione di Ajax in WordPress segue un processo in tre fasi. È letteralmente una ricetta che può essere seguita ogni volta che si desidera introdurre un'azione asincrona.
Prima di guardare la ricetta, lasciatemi definire un paio di termini per i principianti e per quelli di voi che stanno appena familiarizzando con Ajax:
Detto ciò, ecco la ricetta che viene utilizzata per formulare una richiesta Ajax nel contesto di WordPress (sia nella dashboard che nei temi o sul frontend):
Per quelli di voi che leggono le mie precedenti serie su Ajax in Dashboard o che hanno familiarità con Ajax in WordPress, probabilmente avrete già familiarità con i file e gli hook necessari per implementare Ajax.
In particolare:
Accentsconagua
ajaxurl è l'URL fornito da WordPress a cui inviamo la nostra richiesta.wp_ajax_my_action è il gancio che usiamo per collegare il nostro gestore di eventi.Per un aggiornamento completo, assicurati di controllare il progetto su GitHub.
Implementare Ajax dal lato del pubblico è molto simile, ma richiede due cose:
Nel prossimo post, passeremo il tempo a esaminare come importare la libreria Ajax di WordPress e come sfruttarla, ma la cosa fondamentale da capire nel resto del post sono i due ganci necessari per impostare il nostro gestori di eventi.
wp_ajax_my_action gancioIl wp_ajax_my_action hook è lo stesso che usiamo quando si lavora con Ajax in Dashboard. Ci consente di fornire azioni abilitate Ajax agli utenti che siamo collegato a WordPress.
Questo significa che useresti Questo agganciare se si desidera introdurre funzionalità Ajax per gli utenti che sono amministratori, editor, contributori o membri di un sito.
Ricorda che non dichiari wp_ajax_my_action esattamente come è. Invece, il suffisso 'my_action'dovrebbe essere sostituito con il nome del tuo metodo. Quindi se hai una funzione con la firma:
function my_custom_handler () // end my_custom_handler
Quindi il gancio corrispondente apparirebbe in questo modo:
function my_custom_handler () // end my_custom_handler add_action ('wp_ajax_my_custom_handler', 'my_custom_handler'); Naturalmente, non è sempre l'ideale per limitare la funzionalità agli utenti che hanno effettuato l'accesso al sito web.
wp_ajax_nopriv_my_action gancioIl wp_ajax_nopriv_my_action è molto simile al wp_ajax_my_action gancio tranne per una cosa:
Tu useresti Questo agganciare se si desidera introdurre funzionalità Ajax per gli utenti senza richiedere loro di accedere al sito.
Funziona esattamente nello stesso modo ed è soggetto alle stesse regole esatte tranne che per il suo "pubblico di destinazione", per così dire. Ciò significa che puoi definire le tue funzioni in questo modo:
function my_custom_handler () // end theme_custom_handler add_action ('wp_ajax_nopriv_my_custom_handler', 'my_custom_handler'); Semplice, giusto?
Ma c'è un problema di sicurezza qui: perché stai aprendo certe funzioni agli utenti che non sono loggati, quindi le funzionalità di sicurezza chiave come i valori nonce non funzioneranno necessariamente, quindi devi essere molto selettivo su ciò che sei ' intenzione di consentire alle persone di fare se non sono registrati nel sito.
Come regola generale, dico sempre che gli utenti che non hanno effettuato l'accesso al sito non devono avere accesso a modificare, ovvero modificare, aggiornare, eliminare o aggiungere, qualsiasi dato al sito. Certo, è un po 'restrittivo, ma questa è una questione di dati sul tuo blog, sito o applicazione.
Perché sacrificarlo?
Nel prossimo post, daremo un'occhiata a un esempio funzionante che consentirà agli utenti che hanno effettuato l'accesso al sito Web di contrassegnare i post che hanno letto.
Nel frattempo, assicurati di recuperare i seguenti articoli che aiuteranno a consolidare il post in arrivo:
