Come AJAX-ify i tuoi commenti WordPress

Annuncio pubblicitario

Per impostazione predefinita, il sistema di commenti di WordPress è terribilmente inadeguato: una delle mie più grandi obiezioni è che per pubblicare un commento, la pagina deve essere aggiornata. È possibile passare a un sistema di terze parti come Livefyre [Broken URL Removed] o Disqus 3 modi per incoraggiare i commenti sul tuo blog WordpressRicevere commenti sul tuo blog è un grande motivatore per farti proseguire con il lungo raggio che è il blog. Solo sapere che qualcuno è là fuori, apprezzare il tuo lavoro è fantastico, ma non ... Leggi di più , ma se preferisci tenere tutto in casa o fare qualche altro tipo di personalizzazione, pubblicare commenti di AJAX è il minimo che dovresti fare.

Puoi vedere un esempio di questo lavoro qui su Utilizzare - quando pubblichi un commento, non lascerai la pagina - invece la invieremo tramite una chiamata AJAX, quindi invieremo un rapido "grazie"Nota indietro. Continua a leggere per un tutorial completo.

Per usare le funzioni non WordPress come AJAX, leggi il mio

tutorial precedente Un tutorial sull'uso di AJAX in WordPressAJAX è una straordinaria tecnologia web che ci ha spostato oltre il semplice "link clic, vai a un'altra pagina" struttura di Internet 1.0. Consente ai siti Web di recuperare e visualizzare dinamicamente i contenuti senza utente... Leggi di più e assicurati di controllare tutti gli articoli relativi a WordPress.

introduzione

Ci sono due parti separate necessarie per far funzionare i commenti AJAX WordPress, quindi spieghiamo prima quelli per darti una panoramica dell'intero processo.

• Alcuni Javascript sulla pagina che intercettano l'utente facendo clic su Aggiungi un commento pulsante di invio, che lo rende anche una chiamata AJAX e gestisce anche la risposta.
• Un gestore PHP che si aggancia all'azione comment_post

Javascript

Prima di tutto, sarà necessario jQuery, come al giorno d'oggi qualcosa di estremamente eccitante nello sviluppo web. Se non sei sicuro che sia già stato caricato, vai avanti e passa al codice Javascript e provalo comunque - se hai Firebug e il registro della console dice "jQuery non è definito"Quando aggiorni la pagina, quindi aggiungi questa riga al tuo file Functions.php per assicurarti che venga caricato.

funzione google_jquery () { if (! is_admin ()) {wp_deregister_script ('jquery'); wp_register_script ('jquery', (" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"), false); wp_enqueue_script ( 'jquery'); }} add_action ('wp_print_scripts', 'google_jquery');

Nota, questo è un modo elaborato per caricare jQuery perché utilizzeremo l'ultima versione di Google CDN, che è più veloce e più data rispetto a quella inclusa di default con WordPress - quindi potrebbe essere una buona idea aggiungerla comunque anche se jQuery è già caricato altrove.

Ora, per il vero Javascript che gestirà il modulo dei commenti, abbiamo alcune opzioni. Il più semplice è semplicemente incollare il codice nel tuo single.php modello: supponendo che non siano abilitati i commenti anche per le pagine.

In alternativa, è possibile incollare in un esistente .js file utilizzato dal tema o creare un nuovo .js file nella directory del tema. Se scegli di inserirlo nel tuo file .js separato e di non incollarlo direttamente nel modello del tema, assicurati di aggiungere le seguenti righe al tuo functions.phpe notare che si presume che il nome file sia ajaxcomments.js nella radice della cartella del tema.

add_action ('init', 'ajaxcomments_load_js', 10); funzione ajaxcomments_load_js () {wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); }

Ecco il Javascript per gestire il modulo dei commenti (o puoi visualizzalo su pastebin):

 // Sistema di commento AJAXified. jQuery ('documento'). ready (funzione ($) { var commentform = $ ('# commentform'); // trova il modulo dei commenti. commentform.prepend ('
 
'); // aggiungi il pannello informativo prima del modulo per fornire feedback o errori. var statusdiv = $ ('# comment-status'); // definisce infopanel commentform.submit (function () { // serializza e archivia i dati del modulo in una variabile. var formdata = commentform.serialize (); // Aggiungi un messaggio di stato. statusdiv.html ( '
 Lavorazione...  p>'); // Estrai l'URL dell'azione dal modulo di commento. var formurl = commentform.attr ('azione'); // Invia modulo con dati. $ .Ajax ({ tipo: 'post', url: formurl, dati: formdata, errore: funzione (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Potresti aver lasciato vuoto uno dei campi o pubblicare troppo rapidamente 
'); }, successo: funzione (data, textStatus) { if (data == "successo") statusdiv.html ('
 Grazie per il tuo commento. Apprezziamo la tua risposta. 
 '); altro. statusdiv.html ('
 Attendi qualche istante prima di pubblicare il tuo prossimo commento 
'); commentform.find ( 'textarea [name = commento]') val ( ''); } }); restituire false; }); });

Per scomporre il codice, stiamo prima creando gli oggetti jQuery del modulo dei commenti (che presuppone che il modulo di commento abbia l'ID CSS predefinito di "commentform")e aggiungendo un pannello informativo vuoto al di sopra di esso che useremo in seguito per mostrare all'utente messaggi sullo stato di avanzamento della pubblicazione del loro commento.

commentform.submit viene utilizzato per "dirottare" il pulsante di invio. Quindi serializziamo i dati del modulo (trasformandolo in una lunga riga di dati), dando un "in lavorazione"Messaggio per l'utente in quel pannello informativo e andare avanti con una richiesta AJAX. La richiesta AJAX è a formato standard, ma non proprio nell'ambito di questo tutorial oggi - basti dire che reagisce a un successo o errore e cancella il modulo in caso di esito positivo per impedire che lo stesso commento venga pubblicato accidentalmente due volte. Regola i messaggi e gli errori nel modo appropriato o aggiungi uno stile adatto al foglio di stile del tuo tema se desideri che i messaggi di errore si distinguano in qualche modo. L'ultima riga - restituire false - impedisce al modulo di completare l'azione predefinita.

Gestore PHP

Infine, abbiamo bisogno di qualcosa per impedire l'aggiornamento della pagina e inviare all'utente la risposta appropriata oltre a informare l'amministratore se il commento deve essere moderato o avvisare l'autore di un nuovo commento. Per questo, ci agganciamo al comment_post azione che si verifica subito dopo l'aggiunta al database e rileva se si trattava di una richiesta AJAX. Aggiungi questo al tuo functions.php file:

(Anche disponibile a questo pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); funzione ajaxify_comments ($ comment_ID, $ comment_status) { if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Se richiesta AJAX, allora. switch ($ comment_status) { case '0': // notifica al moderatore un commento non approvato. wp_notify_moderator ($ COMMENT_ID); case '1': // Commento approvato. echo "successo"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ Post = & get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); rompere; impostazione predefinita: echo "errore"; } Uscita; } }

Problemi spot

Se la pagina continua ad essere aggiornata invece di pubblicare tramite AJAX, è probabile che si tratti di uno dei due problemi. Uno: potresti non aver caricato jQuery. Installare Firebug Come installare Firebug su IE, Safari, Chrome e Opera Leggi di più o abilita gli strumenti per sviluppatori di Chrome e verifica la presenza di errori nel registro della console. Se jQuery non viene trovato, torna alla sezione JavaScript e leggi il primo bit sull'aggiunta di jQuery al tuo tema. La seconda possibilità è che il tuo tema faccia qualcosa di speciale nel modulo di commento e il suo ID non sia più "modulo di commento". Controlla il codice sorgente, quindi regola var commentform = $ ("# commentform") linea in JavaScript per essere l'ID corretto - che potrebbe funzionare.

Come sempre, sono in giro per dare una mano quanto più possibile, ma per favore pubblica i link a un URL di esempio in cui posso dare un'occhiata veloce.