Share
In questa serie, stiamo discutendo su come implementare Ajax nel frontend di WordPress. Nel primo post della serie abbiamo esaminato il funzionamento di Ajax ad alto livello, abbiamo esaminato come introdurre Ajax in Dashboard di WordPress e rivisto i due ganci disponibili per incorporare Ajax in WordPress.
A questo punto, è tempo di costruire qualcosa che dimostrerà come possiamo usare Ajax nel frontend di WordPress. Per fare questo, scriveremo il nostro plugin assicurandoci che seguiamo le best practice di WordPress lungo il percorso.
Alla fine di questo articolo, avremo un plug-in funzionante con codice sorgente pubblicamente disponibile su GitHub. Detto ciò, iniziamo.
Se hai letto uno dei miei articoli precedenti, allora sai che mi piace sempre iniziare i miei progetti pianificando cosa faremo. Questo progetto non è diverso.
In questo esempio, introdurremo una casella di controllo che consente ai lettori che hanno effettuato l'accesso a un sito WordPress di controllare i post del blog che hanno letto. In questo modo, vedranno solo i post che devono ancora leggere dal momento dell'accesso al sito.
Per costruire questo, useremo un paio di cose:
Una volta che hai configurato l'ambiente, ecco il piano di azione che seguiremo per il nostro plug-in:
Fatto? Vai avanti e accedi come utente che hai creato con il ruolo "Abbonato" e cominciamo!
Una volta importati i dati del test, la configurazione dovrebbe essere simile a questa:
Da qui, siamo pronti per iniziare a scrivere il plug-in.
Prima di scrivere qualsiasi codice, mi piace andare avanti e bloccare i file di plugin. Ciò significa che installeremo la directory, la struttura di base del plugin e tutte le directory che potremmo aver bisogno di usare per le dipendenze dei plugin.
Poiché forniremo uno stile leggero e file JavaScript per l'avvio della richiesta Ajax, ecco come dovrebbe essere la struttura di base della directory. La directory lang è facoltativa, anche se la considero una best practice:
Ora, cancelliamo il testo richiesto per il plugin.php. Nota che questo non sarà altro che uno scheletro. Sarà il principale responsabile per gettare le basi per quello che costruiremo più avanti nell'articolo:
A questo punto, puoi effettivamente attivare il plug-in nella dashboard del plug-in di WordPress, anche se non accadrà nulla. Se sei pronto, vai avanti e fallo ora - sarai in grado di vedere il plugin prendere vita mentre ci lavoriamo.
Dal momento che introdurremo una casella di controllo su ciascun post che consente agli utenti di attivare o meno la lettura del post, sarà necessario tenere conto di quanto segue:
Possiamo ottenere entrambi con l'aggiunta della seguente funzione:
/ ** * Aggiunge una casella di controllo alla fine di un post in una singola vista che consente agli utenti che hanno effettuato l'accesso * di contrassegnare il loro post come letto. * * @param $ contenuto Il contenuto del post * @return Il contenuto del post con o senza la casella di controllo aggiunta * / funzione pubblica add_checkbox ($ content) // Vogliamo solo modificare il contenuto se l'utente è loggato se (is_user_logged_in ( ) && is_single ()) // Costruisci l'elemento che verrà utilizzato per contrassegnare questo post come letto $ html = ''; $ html. = ''; $ html. = ''; // Aggiungilo al contenuto $ content. = $ Html; // end if return $ content; // fine add_checkbox
Leggi attentamente i commenti perché dovrebbero spiegare esattamente cosa sta succedendo; tuttavia, se non sei chiaro, non esitare a lasciare un commento.
Successivamente, dobbiamo aggiungere la seguente riga nel costruttore in modo che il contenuto il filtro si chiama:
Accentsconagua
// Imposta l'azione per il rendering della casella di controllo add_filter ('the_content', array (& $ this, 'add_checkbox')); Infine, aggiungiamo un po 'di stile solo per dare alla casella un aspetto un po' unico nel contesto del tema Twenty Eleven. Nel plugin plugin.css file, aggiungi il seguente codice:
# ive-read-this-container margin: 1em 0 1em; sfondo: #eee; border: 1px solid #ccc; imbottitura: 0,25em;
Ora, se accedi all'installazione di WordPress e vai alla fine di un singolo post, dovresti vedere qualcosa come la seguente immagine:
A questo punto, siamo pronti per iniziare a scrivere JavaScript.
La prima cosa che dobbiamo fare è impostare il codice JavaScript in modo che si attivi solo se il contenitore "I've Read This" è presente sulla pagina. Esistono diversi modi per farlo, ma dal momento che stiamo caricando il codice JavaScript su ogni pagina, utilizzeremo JavaScript per verificare la presenza della casella di controllo "Ho letto questo" che stiamo scrivendo alla pagina.
Per fare ciò, aggiungere il seguente codice a plugin.js. I commenti sul codice dovrebbero essere auto-esplicativi. Se no lascia un commento!
(function ($) $ (function () // Se "I've Read This Container" si trova in questa pagina, impostiamo il gestore di eventi if (1 === $ ('# ive-read-this- container '). length) // end if); (jQuery)); Nel codice che vedi sopra, tutto ciò che posizioniamo all'interno del condizionale verrà attivato solo se è presente l'elemento contenitore "Ho letto questo".
In questo caso, sappiamo che abbiamo bisogno di inviare l'ID del post al server. Dal momento che l'utente ha effettuato l'accesso, saremo in grado di ottenere il suo ID sul lato server.
Quindi, il passo successivo è ottenere l'ID del post su cui ci troviamo. Fortunatamente, Twenty Eleven memorizza il numero del post nel articolo ID dell'elemento. Abbiamo solo bisogno di analizzarlo.
Facciamolo ora:
// Usiamo l'attributo change in modo che il gestore di eventi firmi // ogni volta che si fa clic sulla casella di controllo o sull'etichetta associata. $ ('input [name = "ive-read-this"]'). change (function (evt) // Possiamo recuperare l'ID di questo post dal ID. Questo sarà richiesto // in modo che possiamo segnalare che l'utente ha letto questo particolare post e possiamo nasconderlo. var sArticleId, iPostId; // Prendi l'ID dell'articolo e dividilo: il secondo indice è sempre l'ID post in Twenty Eleven sArticleId = $ ("article"). Attr ('id'); iPostId = parseInt (sArticleId.split ('-') [1]); ); A questo punto, siamo pronti per impostare una richiesta Ajax. Useremo jQuery $ .post metodo per farlo e useremo lo standard di WordPress ajaxurl per gestire la nostra risposta.
Andiamo avanti e scriviamo il codice che invierà l'ID del post. Ci preoccuperemo della risposta più avanti in questo articolo, da cui il commento "TODO" nel codice.
// Inizializza la richiesta per contrassegnare questo particolare post come letto $ .post (ajaxurl, post_id: iPostId, function (response) // TODO);
A questo punto dello sviluppo, la sorgente JavaScript completa dovrebbe essere simile a questa:
(function ($) $ (function () // Se "I've Read This Container" si trova in questa pagina, impostiamo il gestore di eventi if (1 === $ ('# ive-read-this- container '). length) // Usiamo l'attributo change in modo che il gestore di eventi firmi // ogni volta che si fa clic sulla casella di controllo o sull'etichetta associata. $ (' input [name = "ive-read-this"] '). change (function (evt) // Possiamo recuperare l'ID di questo post dal ID. Questo sarà richiesto // in modo che possiamo segnalare che l'utente ha letto questo particolare post e possiamo nasconderlo. var sArticleId, iPostId; // Prendi l'ID dell'articolo e dividilo: il secondo indice è sempre l'ID post in Twenty Eleven sArticleId = $ ("article"). Attr ('id'); iPostId = parseInt (sArticleId.split ('-') [1]); // Inizializza la richiesta per contrassegnare questo particolare post come letto $ .post (ajaxurl, post_id: iPostId, function (response) // TODO); ); // finisci se ); (JQuery)); Per quelli di voi che hanno utilizzato il codice di esempio mentre leggete l'articolo, noterete immediatamente che il browser genera un errore di console:
Uncaught ReferenceError: ajaxurl non è definito
Oops! E Questo è dove dobbiamo assicurarci di includere correttamente la libreria Ajax di WordPress.
Per fare questo, dovremo collegarci al wp_head azione. Aggiungi la seguente riga di codice nel costruttore del tuo plugin:
// Include la libreria Ajax sul front-end add_action ('wp_head', array (& $ this, 'add_ajax_library')); Successivamente, aggiungere la seguente funzione. Questo è ciò che è effettivamente responsabile per includere la libreria Ajax:
/ ** * Aggiunge la libreria Ajax di WordPress al frontend. * / public function add_ajax_library () $ html = ''; echo $ html; // end add_ajax_library
Ora, se provi ad eseguire il codice, non dovresti avere problemi. A questo punto, siamo pronti a continuare.
Ora che abbiamo inviato la richiesta al server, possiamo scrivere il nostro gestore di eventi sul lato server. Ecco come deve funzionare il gestore:
-1; altrimenti, torneremo 1. Gestiremo questi valori nel gestore di risposta in JavaScript.Innanzitutto, aggiungeremo il hook nel costruttore del plugin:
// Imposta il gestore eventi per contrassegnare questo post come letto per l'utente corrente add_action ('wp_ajax_mark_as_read', array (& $ this, 'mark_as_read')); Successivamente, implementeremo effettivamente il gestore:
/ ** * Utilizza l'ID utente corrente e l'ID post in entrata per contrassegnare questo post come letto * per l'utente corrente. * * Memorizziamo l'ID di questo post nella meta dell'utente associato in modo che possiamo nasconderlo * dalla visualizzazione nell'elenco in seguito. * / public function mark_as_read () // Innanzitutto, dobbiamo assicurarci che il parametro post ID sia stato impostato e che sia un valore numerico if (isset ($ _POST ['post_id']) && is_numeric ($ _POST ['post_id '])) // Se non riusciamo ad aggiornare il meta dell'utente, rispondi con -1; altrimenti, rispondi con 1. echo false == update_user_meta (wp_get_current_user () -> ID, $ _POST ['post_id'], 'ive_read_this')? "-1": "1"; // end if die (); // end mark_as_read
A tal fine, rivisitiamo l'eccezionale FARE nella funzione di risposta del JavaScript su cui stavamo lavorando. Ecco la sceneggiatura completa:
(function ($) $ (function () // Se "I've Read This Container" si trova in questa pagina, impostiamo il gestore di eventi if (1 === $ ('# ive-read-this- container '). length) // Usiamo l'attributo change in modo che il gestore di eventi firmi // ogni volta che si fa clic sulla casella di controllo o sull'etichetta associata. $ (' input [name = "ive-read-this"] '). change (function (evt) // Possiamo recuperare l'ID di questo post dal ID. Questo sarà richiesto // in modo che possiamo segnalare che l'utente ha letto questo particolare post e possiamo nasconderlo. var sArticleId, iPostId; // Prendi l'ID dell'articolo e dividilo: il secondo indice è sempre l'ID post in Twenty Eleven sArticleId = $ ("article"). Attr ('id'); iPostId = parseInt (sArticleId.split ('-') [1]); // Inizializza la richiesta per contrassegnare questo post in questione come $ .post (ajaxurl, action: 'mark_as_read', post_id: iPostId, function (response) // Se il server restituisce '1', quindi possiamo contrassegnare questo post è stato letto, quindi nasconderemo la casella di controllo // container. La volta successiva che l'utente sfoglia l'indice, questo post non verrà visualizzato se (1 === parseInt (risposta)) $ ('# ive-read- this-container '). slideUp (' veloce '); // Altrimenti, avvisiamo l'utente che si è verificato un problema. In un ambiente più grande, dovremmo // gestirlo con più grazia. else alert (" Si è verificato un errore nel contrassegnare questo post come letto. Riprovare. "); // end if / else); ); // finisci se ); (JQuery)); Se l'utente trova la sua strada verso una singola pagina di posta (come essere collegato ad essa), dovremmo controllare per vedere se hanno precedentemente contrassegnato per essere letto.
Per fare questo, abbiamo bisogno di refactoring il add_checkbox funzione in modo che controlli per vedere se l'utente è loggato e legge il meta dell'utente per determinare se il post è stato precedentemente contrassegnato come letto:
/ ** * Aggiunge una casella di controllo alla fine di un post in una singola vista che consente agli utenti che hanno effettuato l'accesso * di contrassegnare il loro post come letto. * * @param $ contenuto Il contenuto del post * @return Il contenuto del post con o senza la casella di controllo aggiunta * / public function add_checkbox ($ content) // Vogliamo solo modificare il contenuto se l'utente è loggato se (is_single ( )) // Se l'utente ha effettuato l'accesso ... if (is_user_logged_in ()) // E se hanno già letto questo post ... if ('ive_read_this' == get_user_meta (wp_get_current_user () -> ID, get_the_ID () , true)) // Costruisci l'elemento per indicare che questo post è stato letto $ html = ''; $ html. = ''; $ html. = __ ("Ho letto questo post.", 'ive-read-this'); $ html. = ''; $ html. = ''; // Altrimenti, dagli la possibilità di contrassegnare questo post come letto else // Costruisci l'elemento che verrà utilizzato per contrassegnare questo post come letto $ html = ''; $ html. = ''; $ html. = ''; // end if // Aggiungilo al contenuto $ content. = $ html; // end if // end if return $ content; // fine add_checkbox A questo punto, hai un plugin funzionante:
Non male, giusto?
Naturalmente, c'è sempre spazio per sperimentare da soli con questo. Ad esempio, potresti lavorare sull'esclusione di questi post dal ciclo principale se sono stati contrassegnati come letti. Un'altra opzione potrebbe essere quella di aggiungere un nome di classe personalizzato e quindi di assegnare uno stile al post per indicare che l'utente corrente lo ha letto.
Infine, ricorda che puoi prendere tutto il codice sorgente nella sua interezza su GitHub.
