Πώς να AJAX-ify τα σχόλιά σας στο WordPress

Διαφήμιση

Από προεπιλογή, το σύστημα σχολιασμού του WordPress είναι πολύ ανεπαρκές - μια από τις μεγαλύτερες αντιρρήσεις μου είναι ότι για να δημοσιεύσω ένα σχόλιο, η σελίδα πρέπει να ανανεωθεί. Θα μπορούσατε να μεταβείτε σε ένα σύστημα τρίτων όπως το Livefyre [Καταργήθηκε το κατεστραμμένο URL] ή Disqus 3 τρόποι ενθάρρυνσης σχολίων στο Wordpress Blog σαςΗ λήψη σχολίων στο ιστολόγιό σας είναι ένα εξαιρετικό κίνητρο για να σας συνεχίσει με τη μεγάλη απόσταση που κάνει blogging. Απλά γνωρίζοντας ότι κάποιος είναι εκεί έξω, εκτιμώντας τη δουλειά σας αισθάνεται υπέροχα, αλλά όχι ... Διαβάστε περισσότερα , αλλά αν προτιμάτε να διατηρείτε τα πάντα στο σπίτι σας ή να κάνετε κάποιο άλλο είδος προσαρμογής, τότε η δημοσίευση σχολίων από την AJAX είναι το λιγότερο που πρέπει να κάνετε.

Μπορείτε να δείτε ένα παράδειγμα αυτής της εργασίας εδώ Κάνουν χρήση του - όταν δημοσιεύετε ένα σχόλιο, δεν θα αφήσετε τη σελίδα - αντ 'αυτού θα το στείλουμε μέσω κλήσης AJAX και, στη συνέχεια, θα στείλουμε ένα γρήγορο "ευχαριστώ"Σημειώστε πίσω. Διαβάστε παρακάτω για ένα πλήρες σεμινάριο.

Για τη χρήση λειτουργιών εκτός WordPress ως AJAX, διαβάστε το δικό μου προηγούμενο σεμινάριο Ένα σεμινάριο για τη χρήση του AJAX στο WordPressΤο AJAX είναι μια αξιοσημείωτη τεχνολογία ιστού που μας προχώρησε πέρα ​​από τον απλό «σύνδεσμο κλικ, μετάβαση σε άλλη σελίδα» δομή του Διαδικτύου 1.0. Επιτρέπει στους ιστότοπους να ανακτούν δυναμικά και να εμφανίζουν περιεχόμενο χωρίς το χρήστης... Διαβάστε περισσότερα και φροντίστε να δείτε όλα τα άρθρα που σχετίζονται με το WordPress.

Εισαγωγή

Υπάρχουν δύο ξεχωριστά μέρη που απαιτούνται για να λειτουργήσουν τα σχόλια του AJAX WordPress, οπότε ας εξηγήσουμε αυτά πρώτα για να σας δώσουμε μια επισκόπηση της όλης διαδικασίας.

• Κάποια Javascript στη σελίδα που παρεμποδίζει τον χρήστη κάνοντας κλικ στο Πρόσθεσε σχόλιο κουμπί υποβολής, που το κάνει επίσης μια κλήση AJAX και χειρίζεται επίσης την απόκριση.
• Ένας χειριστής PHP που συνδέεται με τη δράση comment_post

Javascript

Πρώτα απ 'όλα, αυτό θα χρειαστεί jQuery, όπως κάνει κάτι απομακρυσμένο συναρπαστικό στην ανάπτυξη ιστού στις μέρες μας. Εάν δεν είστε βέβαιοι εάν έχει ήδη φορτωθεί, προχωρήστε και μεταβείτε στον κώδικα Javascript και δοκιμάστε τον ούτως ή άλλως - αν έχετε Firebug και το αρχείο καταγραφής της κονσόλας λέει "Το jQuery είναι απροσδιόριστο"Όταν ανανεώνετε τη σελίδα και, στη συνέχεια, προσθέστε αυτήν τη γραμμή στο αρχείο functions.php για να βεβαιωθείτε ότι φορτώνεται.

συνάρτηση google_jquery () { εάν (! is_admin ()) {wp_deregister_script ('jquery'); wp_register_script ('jquery', (" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"), ψευδής); wp_enqueue_script ('jquery'); }} add_action ('wp_print_scripts', 'google_jquery');

Λάβετε υπόψη ότι αυτός είναι ένας περίπλοκος τρόπος φόρτωσης του jQuery επειδή θα χρησιμοποιούμε την τελευταία έκδοση από τα CDN της Google, η οποία είναι ταχύτερη και περισσότερο έως ημερομηνία από αυτήν που περιλαμβάνεται από προεπιλογή στο WordPress - οπότε ίσως είναι καλή ιδέα να το προσθέσετε ούτως ή άλλως ακόμη και αν το jQuery είναι ήδη φορτωμένο αλλού-κάπου αλλού.

Τώρα, για την πραγματική Javascript που θα χειριστεί τη φόρμα σχολίων, έχουμε μερικές επιλογές. Το ευκολότερο είναι απλώς να επικολλήσετε τον κώδικα στο δικό σας single.php πρότυπο - υποθέτοντας ότι δεν έχετε ενεργοποιήσει τα σχόλια και για σελίδες.

Εναλλακτικά, μπορείτε να επικολλήσετε ένα υπάρχον .js αρχείο που χρησιμοποιείται από το θέμα σας ή δημιουργήστε ένα νέο .js αρχείο στον κατάλογο θεμάτων σας. Εάν επιλέξετε να το βάλετε στο δικό σας ξεχωριστό αρχείο .js και να μην το επικολλήσετε απευθείας στο πρότυπο θέματος, φροντίστε να προσθέσετε τις ακόλουθες γραμμές στο functions.php, και σημειώστε ότι το όνομα αρχείου θεωρείται ότι είναι ajaxcomments.js στη ρίζα του φακέλου θέματος.

add_action ('init', 'ajaxcomments_load_js', 10); συνάρτηση ajaxcomments_load_js () {wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); }

Εδώ είναι το Javascript για τη διαχείριση της φόρμας σχολίων (ή μπορείτε δείτε το στο pastebin):

 // AJAXified σύστημα σχολίων. jQuery («έγγραφο»). έτοιμο (λειτουργία ($) { var commentform = $ ('# commentform'); // βρείτε τη φόρμα σχολίων. commentform.prepend ('
 
'); // προσθέστε τον πίνακα πληροφοριών πριν από τη φόρμα για να παρέχετε σχόλια ή σφάλματα. var statusdiv = $ ('# σχόλιο-κατάσταση'); // ορίστε το infopanel commentform.submit (function () { // σειριοποιήστε και αποθηκεύστε δεδομένα φόρμας σε μια μεταβλητή. var formdata = commentform.serialize (); // Προσθέστε ένα μήνυμα κατάστασης. statusdiv.html ('
 Επεξεργασία... 
'); // Εξαγωγή διεύθυνσης URL από σχόλιο var formurl = commentform.attr ('δράση'); // Φόρμα δημοσίευσης με δεδομένα. $ .ajax ({ πληκτρολογήστε: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Μπορεί να έχετε αφήσει ένα από τα πεδία κενό ή να δημοσιεύσετε πολύ γρήγορα 
'); }, επιτυχία: συνάρτηση (data, textStatus) { εάν (δεδομένα == "επιτυχία") statusdiv.html ('
 Ευχαριστούμε για το σχόλιό σας. Εκτιμούμε την απάντησή σας. 
 '); αλλού. statusdiv.html ('
 Περιμένετε λίγο πριν δημοσιεύσετε το επόμενο σχόλιό σας 
'); commentform.find ('textarea [name = comment]'). val (''); } }); επιστροφή ψευδής? }); });

Για να αναλύσουμε τον κώδικα, δημιουργούμε πρώτα αντικείμενα jQuery της φόρμας σχολίων (που υποθέτει ότι η φόρμα σχολίων έχει το προεπιλεγμένο αναγνωριστικό css του "commentform")και προσθέτοντας ένα κενό πλαίσιο πληροφοριών πάνω του, το οποίο θα χρησιμοποιήσουμε αργότερα για να εμφανίσουμε μηνύματα στον χρήστη σχετικά με την πρόοδο της δημοσίευσης του σχολίου του.

commentform.submit χρησιμοποιείται για να «πειραχτεί» το κουμπί υποβολής. Στη συνέχεια, κάνουμε σειριοποίηση των δεδομένων φόρμας (μετατρέπουμε σε μια μεγάλη γραμμή δεδομένων), δίνοντας ένα «ΕπεξεργασίαΜήνυμα στον χρήστη σε αυτόν τον πίνακα πληροφοριών και προχωρήστε με ένα αίτημα AJAX. Το αίτημα AJAX είναι ένα τυπική μορφή, αλλά όχι πραγματικά στο πεδίο αυτού του σεμιναρίου σήμερα - αρκεί να πούμε ότι αντιδρά είτε σε μια επιτυχία είτε σφάλμα και αδειάζει τη φόρμα εάν είναι επιτυχής για να αποτρέψει την κατά λάθος δημοσίευση του ίδιου σχολίου εις διπλούν. Προσαρμόστε τα μηνύματα και τα λάθη, ανάλογα με την περίπτωση, ή προσθέστε κάποιο κατάλληλο στυλ στο φύλλο στυλ του θέματος σας, εάν θέλετε τα μηνύματα σφάλματος να ξεχωρίζουν κάπως. Η τελευταία γραμμή - επιστροφή ψευδής - εμποδίζει τη φόρμα να ολοκληρώσει την προεπιλεγμένη ενέργεια.

Διαχειριστής PHP

Τέλος, χρειαζόμαστε κάτι για να αποτρέψουμε την ανανέωση της σελίδας και να στείλουμε ξανά την κατάλληλη απάντηση στον χρήστη καθώς και ειδοποίηση του διαχειριστή εάν το σχόλιο χρειάζεται εποπτεία ή ειδοποίηση του συντάκτη ενός νέου σχολίου. Για αυτό, συνδέουμε το σχόλιο_αποστολή ενέργεια που εμφανίζεται αμέσως μετά την προσθήκη της στη βάση δεδομένων και εντοπίστε εάν ήταν αίτημα AJAX. Προσθέστε αυτό στο δικό σας functions.php αρχείο:

(Επίσης διαθέσιμο σε αυτό το pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); Λειτουργία ajaxify_comments ($ comment_ID, $ comment_status) { εάν (! κενό ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Εάν το AJAX ζητήσει τότε. διακόπτης ($ comment_status) { case '0': // ειδοποιήστε τον συντονιστή για μη εγκεκριμένο σχόλιο. wp_notify_moderator ($ comment_ID); υπόθεση «1»: // Εγκεκριμένο σχόλιο. ηχώ "επιτυχία"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); Διακοπή; προεπιλογή: echo "error"; } έξοδος; } }

Προβλήματα Spot

Εάν η σελίδα εξακολουθεί να ανανεώνεται αντί να δημοσιεύεται μέσω του AJAX, είναι πιθανό να είναι ένα από τα δύο προβλήματα. Ένα - μπορεί να μην έχετε φορτώσει το jQuery. Εγκαθιστώ Firebug Πώς να εγκαταστήσετε το Firebug σε IE, Safari, Chrome & Opera Διαβάστε περισσότερα ή ενεργοποιήστε τα εργαλεία προγραμματιστή Chrome και ελέγξτε το αρχείο καταγραφής της κονσόλας για σφάλματα. Εάν το jQuery δεν βρεθεί, επιστρέψτε στην ενότητα JavaScript και διαβάστε το πρώτο κομμάτι για την προσθήκη jQuery στο θέμα σας. Η δεύτερη πιθανότητα είναι ότι το θέμα σας κάνει κάτι ιδιαίτερο στη φόρμα σχολίων και το αναγνωριστικό του δεν είναι πλέον «σχόλιο». Ελέγξτε τον πηγαίο κώδικα και μετά προσαρμόστε το var commentform = $ (‘# commentform’) γραμμή στο JavaScript για να είναι το σωστό αναγνωριστικό - αυτό μπορεί να λειτουργήσει.

Όπως πάντα, είμαι κοντά για να βοηθήσω όσο περισσότερο μπορώ, αλλά δημοσιεύστε συνδέσμους σε ένα παράδειγμα URL όπου μπορώ να ρίξω μια γρήγορη ματιά.