Come AJAX-ify i tuoi commenti WordPress

Per impostazione predefinita, il sistema di commenti di WordPress è tristemente inadeguato - una delle mie più grandi obiezioni è che per pubblicare un commento, la pagina deve essere aggiornata. Potresti passare a un sistema di terze parti come Livefyre o Disqus 3 modi per incoraggiare i commenti sul tuo blog Wordpress 3 modi per incoraggiare i commenti sul tuo blog Wordpress Ricevere commenti sul tuo blog è un grande motivatore per farti continuare con il lungo raggio che è blogging. Solo sapere che qualcuno è là fuori, apprezzare il tuo lavoro è bello, ma non ... Leggi altro, ma se preferisci tenere tutto in casa o fare qualche altro tipo di personalizzazione, postare commenti da AJAX è il minimo che dovresti fare.

Puoi vedere un esempio di questo lavoro qui su Utilizzare - quando pubblichi un commento, non abbandonerai la pagina, ma 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 A Tutorial sull'uso di AJAX in WordPress Un tutorial sull'utilizzo di AJAX in WordPress AJAX è una tecnologia web straordinaria che ci ha spostato oltre il semplice “clicca link, vai a un'altra pagina” struttura di Internet 1.0. Consente ai siti Web di recuperare e visualizzare i contenuti in modo dinamico senza l'utente ... Leggi ulteriori informazioni e assicurati di controllare tutti gli articoli relativi a WordPress.

introduzione

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

• Alcuni Javascript nella pagina che intercetta l'utente cliccando 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, questo avrà bisogno di jQuery, così come oggigiorno fa qualcosa di eccitante nello sviluppo web. Se non sei sicuro che sia già stato caricato, vai avanti e vai al codice Javascript e provalo comunque - se hai Firebug e il log della console dice “jQuery non è definito” quando aggiorni la pagina, aggiungi questa riga al file functions.php per assicurarti che venga caricata.

function 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 dei CDN di Google, che è più veloce e aggiornata rispetto a quella inclusa per default con WordPress, quindi potrebbe essere una buona idea aggiungerla comunque anche se jQuery è già caricato altrove.

Ora, per il Javascript reale che gestirà il modulo di commento, abbiamo alcune opzioni. Il più semplice è semplicemente incollare il codice nel tuo single.php modello - presupponendo che non sia abilitato il commento anche per le pagine.

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

add_action ('init', 'ajaxcomments_load_js', 10); function ajaxcomments_load_js () wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); 

Ecco il Javascript per gestire il modulo di commento (oppure puoi vederlo su pastebin):

Per abbattere il codice, stiamo prima creando oggetti jQuery del modulo di commento (che presuppone che il modulo di commento abbia l'ID css predefinito di “commentform”), e aggiungendo un pannello informazioni vuoto sopra di esso che utilizzeremo in seguito per visualizzare i messaggi all'utente in merito all'avanzamento della pubblicazione del loro commento.

commentform.submit è usato per 'dirottare' il pulsante di invio. Quindi serializziamo i dati del modulo (trasformandolo in una lunga fila di dati), diamo a “in lavorazione” messaggio all'utente nel pannello informativo e andare avanti con una richiesta AJAX. La richiesta AJAX è un formato standard, ma non è proprio nello scopo di questo tutorial oggi - basti dire che reagisce a un successo o ad un errore, e cancella il modulo se riesce a impedire che lo stesso commento venga postato per errore due volte. Regola i messaggi e gli errori in modo appropriato o aggiungi uno stile adatto al foglio di stile del tema se desideri che i messaggi di errore risalti in qualche modo. L'ultima riga - restituisce falso - impedisce al modulo di completare l'azione predefinita.

Gestore PHP

Infine, abbiamo bisogno di qualcosa per impedire l'aggiornamento della pagina e inviare la risposta appropriata all'utente, oltre a notificare l'amministratore se il commento ha bisogno di moderazione, o di notifica all'autore di un nuovo commento. Per questo, ci colleghiamo 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:

(Disponibile anche in questo pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); function ajaxify_comments ($ comment_ID, $ comment_status) if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') // Se AJAX Request Then switch ($ comment_status) case '0': // notifica al moderatore il commento non approvato wp_notify_moderator ($ comment_ID); caso '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; default: echo "error";  Uscita; 

Problemi Spot

Se la pagina è ancora in fase di aggiornamento anziché postare tramite AJAX, è probabile che sia uno dei due problemi. Uno: potresti non aver caricato jQuery. Installa Firebug Come installare Firebug su IE, Safari, Chrome e Opera Come installare Firebug su IE, Safari, Chrome e Opera Leggi di più, o abilita gli strumenti per sviluppatori di Chrome e controlla gli 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 dei commenti e che l'ID non sia più “commentform”. Controllare il codice sorgente, quindi regolare il var commentform = $ ('# commentform') linea in JavaScript per essere l'ID corretto - che potrebbe funzionare.

Come sempre, sono in giro per dare una mano il più possibile, ma per favore postare link a un URL di esempio in cui posso dare una rapida occhiata o postare nel forum di MakeUseOf Answers se i commenti di questo post sono chiusi. Godere AJAXified i commenti!

Scopri di più su: commenti online, programmazione, sviluppo Web.