Wie Sie Ihre WordPress-Kommentare AJAX-wenn

Standardmäßig ist das WordPress-Kommentarsystem völlig unzureichend. Eine meiner größten Einwände ist, dass zum Aktualisieren eines Kommentars die Seite aktualisiert werden muss. Sie könnten zu einem System von Drittanbietern wie Livefyre oder Disqus 3 wechseln, um Kommentare zu Ihrem Wordpress-Blog zu ermutigen. 3 Möglichkeiten, Kommentare zu Ihrem Wordpress-Blog zu ermutigen Das Erhalten von Kommentaren in Ihrem Blog ist eine großartige Motivation, um Sie auf dem langen Weg zu halten bloggen. Nur zu wissen, dass jemand da draußen ist, der Wert Ihrer Arbeit zu schätzen, fühlt sich großartig an, aber nicht… Lesen Sie mehr, aber wenn Sie es vorziehen, alles im Haus zu behalten oder eine andere Art von Anpassung vorzunehmen, sollten Sie mindestens Kommentare von AJAX veröffentlichen.

Sie können ein Beispiel davon hier sehen Gebrauch machen von - Wenn Sie einen Kommentar posten, verlassen Sie die Seite nicht. Stattdessen senden wir sie durch einen AJAX-Anruf und senden dann eine Kurznachricht “Danke dir” notiere zurück. Lesen Sie weiter für ein vollständiges Tutorial.

Für die Verwendung von Nicht-WordPress-Funktionen als AJAX lesen Sie bitte mein vorheriges Tutorial. Ein Tutorial zur Verwendung von AJAX in WordPress Ein Tutorial zur Verwendung von AJAX in WordPress AJAX ist eine bemerkenswerte Web-Technologie, die uns über das einfache hinaus bewegt “Klicken Sie auf den Link, um zu einer anderen Seite zu gelangen” Struktur des Internets 1.0. Es ermöglicht Websites das dynamische Abrufen und Anzeigen von Inhalten ohne den Benutzer… Lesen Sie mehr, und lesen Sie alle WordPress-Artikel.

Einführung

Damit AJAX WordPress-Kommentare zum Laufen gebracht werden können, sind zwei separate Teile erforderlich. Lassen Sie uns diese zunächst erklären, um einen Überblick über den gesamten Prozess zu erhalten.

• Javascript auf der Seite, die den Benutzer abfängt, wenn Sie auf klicken Einen Kommentar hinzufügen Submit-Button, der es auch zu einem AJAX-Aufruf macht und auch die Antwort verarbeitet.
• Ein PHP-Handler, der sich in die comment_post-Aktion einfügt

Javascript

Zunächst einmal wird dies jQuery erfordern, ebenso wie alles, was heutzutage in der Webentwicklung aufregend ist. Wenn Sie nicht sicher sind, ob es bereits geladen ist, fahren Sie mit dem Javascript-Code fort und versuchen Sie es trotzdem - falls Sie Firebug und das Konsolenprotokoll haben “jQuery ist nicht definiert” Wenn Sie die Seite aktualisieren, fügen Sie diese Zeile in Ihre Datei "functions.php" ein, um sicherzustellen, dass sie geladen wird.

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');

Beachten Sie, dass dies eine aufwändige Methode zum Laden von jQuery ist, da wir die neueste Version von Google CDNs verwenden werden, die schneller und aktueller ist als die standardmäßig in WordPress enthaltene. Daher ist es eine gute Idee, dies trotzdem hinzuzufügen Auch wenn jQuery bereits an anderer Stelle geladen ist.

Nun, für das eigentliche Javascript, das das Kommentarformular verarbeiten soll, haben wir einige Optionen. Am einfachsten ist es, den Code einfach in Ihren einzufügen single.php template - vorausgesetzt, Sie haben auch das Kommentieren für Seiten nicht aktiviert.

Alternativ können Sie in ein vorhandenes einfügen .js Datei, die von Ihrem Design verwendet wird, oder erstellen Sie eine neue .js Datei in Ihrem Designverzeichnis. Wenn Sie es in eine eigene .js-Datei einfügen und nicht direkt in Ihre Designvorlage einfügen, fügen Sie die folgenden Zeilen hinzu Functions.php, Beachten Sie, dass der Dateiname angenommen wird ajaxcomments.js im Stammverzeichnis des Designordners.

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

Hier ist das Javascript, um das Kommentarformular zu bearbeiten (oder Sie können es auf Pastebin anzeigen):

Um den Code aufzuschlüsseln, erstellen wir zunächst jQuery-Objekte des Kommentarformulars (Dies setzt voraus, dass Ihr Kommentarformular die standardmäßige CSS-ID von hat “Kommentarformular”), und darüber ein leeres Infofenster hinzufügen, das wir später verwenden werden, um dem Benutzer Nachrichten über den Fortschritt des Postens des Kommentars anzuzeigen.

commentform.submit wird verwendet, um den Submit-Button zu "hijacken". Wir serialisieren dann die Formulardaten (verwandeln sie in eine lange Datenzeile), geben Sie ein “wird bearbeitet” Nachricht an den Benutzer in diesem Infofenster, und fahren Sie mit einer AJAX-Anforderung fort. Die AJAX-Anfrage ist ein Standardformat, aber nicht wirklich im Rahmen dieses Lernprogramms heute - genügt, um zu sagen, dass sie entweder auf einen Erfolg oder einen Fehler reagiert und das Formular ausblendet, wenn derselbe Kommentar erfolgreich versehentlich zweimal gepostet wurde. Passen Sie die Meldungen und Fehler entsprechend an oder fügen Sie dem Stylesheet Ihres Themes ein geeignetes Styling hinzu, wenn die Fehlermeldungen irgendwie hervorstechen sollen. Die letzte Zeile - falsch zurückgeben - verhindert, dass das Formular seine Standardaktion ausführt.

PHP Handler

Schließlich brauchen wir etwas, um die Seitenaktualisierung zu verhindern und die entsprechende Antwort an den Benutzer zurückzusenden sowie den Administrator zu benachrichtigen, wenn der Kommentar moderiert werden muss, oder den Autor über einen neuen Kommentar zu benachrichtigen. Dafür haken wir uns in die comment_post Aktion, die unmittelbar nach dem Hinzufügen zur Datenbank ausgeführt wird und ermittelt, ob es sich um eine AJAX-Anforderung handelt. Fügen Sie dies Ihrem hinzu Functions.php Datei:

(Auch in diesem Pastebin erhältlich)

add_action ('comment_post', 'ajaxify_comments', 20, 2); Funktion ajaxify_comments ($ comment_ID, $ comment_status) if (! leer ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) & & strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') // If AJAX Request Dann wechseln () comment_status) case '0': // Moderator über nicht genehmigten Kommentar benachrichtigen wp_notify_moderator ($ comment_ID); Fall '1': // Genehmigtes Kommentar-Echo "Erfolg"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); brechen; Voreinstellung: Echo "Fehler";  Ausfahrt; 

Probleme erkennen

Wenn die Seite immer noch aktualisiert wird, anstatt über AJAX zu posten, ist dies wahrscheinlich eines von zwei Problemen. Eins - Sie haben möglicherweise nicht jQuery geladen. Installieren von Firebug Installieren von Firebug auf IE, Safari, Chrome und Opera Installieren von Firebug auf IE, Safari, Chrome und Opera Weitere Informationen oder Aktivieren der Chrome-Entwicklertools und Überprüfen des Konsolenprotokolls auf Fehler. Wenn jQuery nicht gefunden wird, gehen Sie zurück zum JavaScript-Abschnitt und lesen Sie das erste Bit, wenn Sie jQuery zu Ihrem Design hinzufügen. Die zweite Möglichkeit besteht darin, dass Ihr Design dem Kommentarformular etwas Besonderes angetan hat und die ID nicht mehr vorhanden ist “Kommentarformular”. Überprüfen Sie den Quellcode und passen Sie dann das an var commentform = $ ('# commentform') Zeile im JavaScript, um die richtige ID zu sein - das könnte funktionieren.

Wie immer bin ich in der Nähe, um so viel wie möglich weiterzuhelfen, aber bitte posten Sie Links zu einer Beispiel-URL, unter der ich einen kurzen Blick darauf werfen kann, oder im MakeUseOf Answers-Forum, falls die Kommentare dieses Beitrags geschlossen sind. Genießen AJAXified die Kommentare!

Erfahren Sie mehr über: Online-Kommentierung, Programmierung, Webentwicklung.