So AJAX-ify Ihre WordPress-Kommentare

Werbung

Standardmäßig ist das WordPress-Kommentarsystem absolut unzureichend - einer meiner größten Einwände ist, dass die Seite aktualisiert werden muss, um einen Kommentar zu veröffentlichen. Sie können zu einem Drittanbieter-System wie Livefyre [Broken URL Removed] oder wechseln Disqus 3 Möglichkeiten, um Kommentare zu Ihrem Wordpress-Blog anzuregenDas Erhalten von Kommentaren in Ihrem Blog ist ein großartiger Motivator, um Sie auf dem langen Weg des Bloggens am Laufen zu halten. Nur zu wissen, dass jemand da draußen ist, Ihre Arbeit zu schätzen, fühlt sich großartig an, aber nicht ... Weiterlesen Wenn Sie jedoch lieber alles im Haus behalten oder andere Anpassungen vornehmen möchten, sollten Sie am wenigsten Kommentare von AJAX veröffentlichen.

Ein Beispiel dafür finden Sie hier Gebrauch machen von - Wenn Sie einen Kommentar veröffentlichen, verlassen Sie die Seite nicht. Stattdessen senden wir ihn über einen AJAX-Anruf und senden dann eine kurze Nachricht.Vielen DankNotiz zurück. Lesen Sie weiter für ein vollständiges Tutorial.

Für die Verwendung von Nicht-WordPress-Funktionen als AJAX lesen Sie bitte meine vorheriges Tutorial Ein Tutorial zur Verwendung von AJAX in WordPressAJAX ist eine bemerkenswerte Web-Technologie, die uns über den einfachen "Klick-Link, gehe zu einer anderen Seite" hinaus bewegt hat. Struktur des Internets 1.0. Es ermöglicht Websites das dynamische Abrufen und Anzeigen von Inhalten ohne die Benutzer... Weiterlesen und lesen Sie unbedingt alle Artikel zu WordPress.

Einführung

Es sind zwei separate Teile erforderlich, damit AJAX WordPress-Kommentare funktionieren. Lassen Sie uns diese zuerst erläutern, um Ihnen einen Überblick über den gesamten Prozess zu geben.

• Einige Javascript auf der Seite, die den Benutzer abfängt, der auf die Einen Kommentar hinzufügen Senden-Schaltfläche, die es auch zu einem AJAX-Aufruf macht und auch die Antwort verarbeitet.
• Ein PHP-Handler, der sich in die comment_post-Aktion einhakt

Javascript

Zunächst einmal wird dies benötigt jQuery, wie alles, was heutzutage in der Webentwicklung aus der Ferne aufregend ist. Wenn Sie nicht sicher sind, ob es bereits geladen ist, fahren Sie mit dem Javascript-Code fort und versuchen Sie es trotzdem - wenn Sie Firebug haben und im Konsolenprotokoll "jQuery ist undefiniertWenn Sie die Seite aktualisieren, fügen Sie diese Zeile Ihrer Datei functions.php hinzu, um sicherzustellen, dass sie geladen wird.

Funktion 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"), falsch); 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, die schneller und aktueller ist Datum als das, das standardmäßig in WordPress enthalten ist - daher ist es möglicherweise eine gute Idee, dies trotzdem hinzuzufügen, selbst wenn jQuery bereits geladen ist anderswo.

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

Alternativ können Sie in ein vorhandenes einfügen .js Datei, die von Ihrem Thema verwendet wird, oder erstellen Sie eine neue .js Datei in Ihrem Themenverzeichnis. Wenn Sie es in Ihre eigene .js-Datei einfügen und nicht direkt in Ihre Designvorlage einfügen möchten, müssen Sie die folgenden Zeilen zu Ihrer hinzufügen functions.phpund beachten Sie, dass der Dateiname angenommen wird ajaxcomments.js im Stammverzeichnis Ihres Themenordners.

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 behandeln (oder du kannst Sehen Sie es auf Pastebin):

Um den Code aufzuschlüsseln, erstellen wir zunächst jQuery-Objekte des Kommentarformulars (Dies setzt voraus, dass Ihr Kommentarformular die Standard-CSS-ID "Kommentarformular" hat.und Hinzufügen eines leeren Infofensters darüber, mit dem wir dem Benutzer später Nachrichten über den Fortschritt der Veröffentlichung seines Kommentars anzeigen.

commentform.submit wird verwendet, um die Schaltfläche "Senden" zu "entführen". Wir serialisieren dann die Formulardaten (wandeln sie in eine lange Datenreihe um) und geben ein „wird bearbeitet”An den Benutzer in diesem Infofenster senden und eine AJAX-Anfrage ausführen. Die AJAX-Anfrage ist a Standardformat, aber nicht wirklich im Rahmen dieses Tutorials heute - genügt zu sagen, es reagiert entweder auf einen Erfolg oder Fehler, und löscht das Formular, wenn dies erfolgreich ist, um zu verhindern, dass derselbe Kommentar versehentlich veröffentlicht wird zweimal. Passen Sie die Meldungen und Fehler entsprechend an oder fügen Sie dem Stylesheet Ihres Themas ein geeignetes Styling hinzu, wenn Sie möchten, dass die Fehlermeldungen irgendwie auffallen. Die letzte Zeile - falsch zurückgeben - verhindert, dass das Formular die Standardaktion ausführt.

PHP-Handler

Zuletzt benötigen wir etwas, um die Seitenaktualisierung zu verhindern und die entsprechende Antwort an den Benutzer zurückzusenden sowie Benachrichtigen des Administrators, wenn der Kommentar moderiert werden muss, oder Benachrichtigen des Autors über einen neuen Kommentar. Dafür haken wir in die comment_post Aktion, die unmittelbar nach dem Hinzufügen zur Datenbank ausgeführt wird, und um festzustellen, ob es sich um eine AJAX-Anforderung handelt. Fügen Sie dies Ihrem hinzu functions.php Datei:

(Auch verfügbar an diesem Pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); Funktion ajaxify_comments ($ comment_ID, $ comment_status) { if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Wenn AJAX anfordert, dann. switch ($ comment_status) { case '0': // Moderator über nicht genehmigten Kommentar informieren. wp_notify_moderator ($ comment_ID); case '1': // Genehmigter 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; Standard: Echo "Fehler"; } Ausfahrt; } }

Probleme erkennen

Wenn die Seite immer noch aktualisiert wird, anstatt über AJAX zu posten, ist dies wahrscheinlich eines von zwei Problemen. Erstens: Möglicherweise ist jQuery nicht geladen. Installieren Firebug So installieren Sie Firebug unter IE, Safari, Chrome und Opera Weiterlesen oder aktivieren Sie die Chrome-Entwicklertools und überprüfen Sie das Konsolenprotokoll auf Fehler. Wenn jQuery nicht gefunden wird, gehen Sie zurück zum JavaScript-Abschnitt und lesen Sie das erste Bit zum Hinzufügen von jQuery zu Ihrem Thema. Die zweite Möglichkeit besteht darin, dass Ihr Thema etwas Besonderes mit dem Kommentarformular tut und die ID nicht mehr "Kommentarformular" ist. Überprüfen Sie den Quellcode und passen Sie den an var commentform = $ ('# commentform') Zeile im JavaScript, um die richtige ID zu sein - das könnte funktionieren.

Wie immer bin ich da, um so viel wie möglich weiter zu helfen, aber bitte poste Links zu einer Beispiel-URL, unter der ich einen kurzen Blick darauf werfen kann.