Ένα σεμινάριο για τη χρήση του AJAX στο WordPress

Διαφήμιση

Το AJAX είναι μια αξιοσημείωτη τεχνολογία Ιστού που μας προχώρησε πέρα ​​από το απλό "κάντε κλικ στο σύνδεσμο, μεταβείτε σε άλλη σελίδαΔομή του Το Διαδίκτυο 1.0.

AJAX, που σημαίνει Ασύγχρονο Javascript και XML, επιτρέπει στους ιστότοπους να λαμβάνουν και να εμφανίζουν περιεχόμενο δυναμικά χωρίς να απομακρύνεται ο χρήστης από την τρέχουσα σελίδα. Αυτό οδηγεί σε μια πολύ πιο διαδραστική εμπειρία χρήστη και μπορεί να επιταχύνει τα πράγματα, καθώς δεν χρειάζεται να φορτωθεί μια ολόκληρη νέα ιστοσελίδα. Ευτυχώς, η χρήση του AJAX είναι αρκετά εύκολο να γίνει μέσα από το περιβάλλον του WordPress και σήμερα θα σας δείξω πώς.

Αυτό το σεμινάριο Ajax πρέπει να θεωρηθεί αρκετά προηγμένο και συνεχίζεται από την τελευταία φορά που μάθαμε πώς να χρησιμοποιήσετε προσαρμοσμένους πίνακες βάσης δεδομένων Εργασία με προσαρμοσμένους πίνακες βάσεων δεδομένων στο WordPressΜια γρήγορη σάρωση της σελίδας Best of WordPress Plugins θα αποκαλύψει μερικούς από τους πολλούς μοναδικούς και εξειδικευμένους τρόπους με τους οποίους μπορείτε να κάνετε το blog σας πιο σκληρό. Τι γίνεται αν έχετε ήδη μια βάση δεδομένων ...

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

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

Γιατί να χρησιμοποιήσετε το AJAX;

Η πιο συνηθισμένη χρήση του AJAX σχετίζεται με φόρμες - έλεγχος εάν έχει ληφθεί ένα όνομα χρήστη ή συμπλήρωση της υπόλοιπης φόρμας με διαφορετικές ερωτήσεις ανάλογα με μια συγκεκριμένη απάντηση που δίνετε. Βασικά όμως, χρησιμοποιείτε το AJAX όποτε θέλετε μια εκδήλωση (σαν χρήστης να κάνει κλικ σε κάτι ή να πληκτρολογεί κάτι) δεμένο με ένα πλευρά του διακομιστή ενέργεια που εμφανίζεται στο Ιστορικό.

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

Επισκόπηση του τρόπου χρήσης του AJAX στο WordPress

1. Επεξεργαστείτε το προσαρμοσμένο πρότυπο για να συμπεριλάβετε μια φόρμα ή ένα συμβάν javascript που θα υποβάλει δεδομένα μέσω του jQuery AJAX στο διαχειριστής-ajax.php συμπεριλαμβανομένων των δεδομένων δημοσιεύσεων που θέλετε να μεταβιβάσετε. Βεβαιωθείτε ότι φορτώνεται το jQuery.
2. Ορίστε μια συνάρτηση στο θέμα σας function.php; διαβάστε μεταβλητές μετά και επιστρέψτε κάτι πίσω στο χρήστη αν το επιθυμείτε.
3. Προσθέστε ένα Αγκίστρι δράσης AJAX για τη λειτουργία σας.

Δημιουργία της φόρμας

Ας ξεκινήσουμε δημιουργώντας μια απλή φόρμα στη διεπαφή για την εισαγωγή νέων στοιχείων πελάτη. Δεν είναι τίποτα περίπλοκο, απλώς αντικαταστήστε το κύριο μέρος του προσαρμοσμένου προτύπου σας με αυτόν τον κωδικό που ξεκινήσαμε την προηγούμενη εβδομάδα, γύρω από το σημείο όπου πραγματοποιείται ο έλεγχος is_user_logged_in ():

αν (is_user_logged_in ()):?> 

Ονομα:ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ:Τηλέφωνο:Διεύθυνση:

Το μόνο πράγμα που μπορεί να σας φαίνεται περίεργο είναι ότι υπάρχει η χρήση ενός κρυφού πεδίου εισαγωγής που ονομάζεται δράση - περιέχει το όνομα της συνάρτησης που θα ενεργοποιήσουμε μέσω AJAX.

Ο δέκτης PHP

Στη συνέχεια, ανοίξτε functions.php και προσθέστε την ακόλουθη γραμμή για να βεβαιωθείτε ότι το jQuery φορτώνεται στον ιστότοπό σας:

wp_enqueue_script ('jquery');

Η βασική δομή για τη σύνταξη μιας κλήσης AJAX έχει ως εξής:

συνάρτηση myFunction () { //Κάνε κάτι. καλούπι(); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Αυτές οι δύο τελευταίες γραμμές είναι άγκιστρα δράσης που λένε στο WordPress "Έχω μια λειτουργία που ονομάζεται myFunction και θέλω να την ακούσετε γιατί πρόκειται να κληθεί μέσω της διεπαφής AJAX" - το πρώτο είναι για χρήστες σε επίπεδο διαχειριστή, ενώ wp_ajax_nopriv_ προορίζεται για χρήστες που δεν έχουν συνδεθεί. Αυτός είναι ο πλήρης κωδικός για functions.php που πρόκειται να χρησιμοποιήσουμε για την εισαγωγή δεδομένων στον ειδικό πίνακα πελατών μας, τον οποίο θα εξηγήσω σύντομα:

wp_enqueue_script ('jquery'); συνάρτηση addCustomer () {global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['τηλέφωνο']; $ email = $ _POST ['email']; $ διεύθυνση = $ _POST ['address']; if ($ wpdb-> insert («πελάτες», πίνακας ( 'name' => $ name, 'email' => $ email, 'address' => $ address, 'phone' => $ τηλέφωνο. FALSE) {echo "Σφάλμα"; } αλλιώς { echo "Πελάτης". $ όνομα. "'προστέθηκε με επιτυχία, το αναγνωριστικό σειράς είναι". $ wpdb-> insert_id; } καλούπι(); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // δεν χρειάζεται πραγματικά

Όπως και πριν, δηλώνουμε το παγκόσμιο $ wpdb για να μας δώσετε άμεση πρόσβαση στη βάση δεδομένων. Στη συνέχεια αρπάζουμε το ΘΕΣΗ μεταβλητές που περιέχουν τα δεδομένα φόρμας. Περιβάλλεται από μια δήλωση IF είναι η συνάρτηση $ wpdb-> ένθετο, το οποίο χρησιμοποιούμε για την εισαγωγή δεδομένων στον πίνακα μας. Δεδομένου ότι το WordPress παρέχει συγκεκριμένες λειτουργίες για την εισαγωγή τακτικών δημοσιεύσεων και μεταδεδομένων, αυτό $ wpdb-> ένθετο Η μέθοδος χρησιμοποιείται γενικά μόνο για προσαρμοσμένους πίνακες. Μπορείς διαβάστε περισσότερα για αυτό στο Codex, αλλά βασικά χρειάζεται να εισαχθεί το όνομα του πίνακα, ακολουθούμενο από ένα πίνακας του ζεύγη στήλης / τιμής.

ο ΨΕΥΔΗΣ ελέγχει αν η λειτουργία εισαγωγής απέτυχε και αν ναι, εξάγει "λάθος“. Εάν όχι, στέλνουμε απλώς ένα μήνυμα στον χρήστη ότι Προστέθηκε ο πελάτης X, και αντηχεί το $ wpdb-> insert_id μεταβλητή, που δείχνει το μεταβλητή αυτόματης αύξησης της τελευταίας λειτουργίας εισαγωγής που συνέβη (υποθέτοντας ότι έχετε ορίσει ένα πεδίο που αυξάνεται αυτόματα, όπως ένα αναγνωριστικό).

Τελικά, καλούπι() θα παρακάμψει την προεπιλογή πεθαίνω (0) παρέχεται από το WordPress - αυτό δεν είναι απαραίτητο ως τέτοιο, αλλά χωρίς αυτό θα λάβετε 0 επισυνάπτεται στο τέλος οτιδήποτε στέλνετε πίσω στο πρότυπο.

Η Javascript

Το τελευταίο βήμα είναι το μαγικό bit - το πραγματικό Javascript που θα ξεκινήσει την κλήση AJAX. Θα παρατηρήσετε ότι στη φόρμα που προσθέσαμε νωρίτερα, το πεδίο δράσης αφέθηκε κενό. Αυτό συμβαίνει επειδή θα το παρακάμψουμε με την κλήση AJAX. Ο γενικός τρόπος για να γίνει αυτό θα ήταν:

jQuery.ajax ({type: "POST", url: "/wp-admin/admin-ajax.php", // τα δεδομένα αρχείου χειριστή PHP: "myDataString", επιτυχία: λειτουργία (αποτελέσματα) {// κάντε κάτι με επιστρεφόμενα δεδομένα})};

Αυτή είναι η βασική δομή της κλήσης AJAX που θα χρησιμοποιούμε, αλλά σίγουρα όχι ο μόνος τρόπος που μπορείτε να το κάνετε. Ίσως αναρωτιέστε γιατί αναφερόμαστε wp-διαχειριστής εδώ, παρόλο που αυτό θα βρίσκεται στο μπροστινό μέρος του ιστότοπου. Αυτό είναι ακριβώς όπου το Χειριστής AJAX κατοικεί, είτε το χρησιμοποιείτε για λειτουργίες εμπρός είτε από πλευράς διαχειριστή - σύγχυση, το ξέρω. Επικολλήστε τον ακόλουθο κώδικα απευθείας στο πρότυπο πελάτη:

Στην πρώτη γραμμή, επισυνάπτουμε τη συνάρτηση ajaxSubmit στη φόρμα που κάναμε νωρίτερα - οπότε όταν ο χρήστης κάνει κλικ στην υποβολή, περνά μέσω της ειδικής λειτουργίας AJAX. Χωρίς αυτό, η φόρμα μας δεν θα κάνει τίποτα. Στο δικό μας ajaxΑποστολή () λειτουργία, το πρώτο πράγμα που κάνουμε είναι σειριοποιώ () η μορφή. Αυτό παίρνει απλώς όλες τις τιμές φόρμας και τις μετατρέπει σε μια μεγάλη συμβολοσειρά που η PHP μας θα αναλύσει αργότερα. Εάν όλα λειτουργούν σωστά, θα βάλουμε τα δεδομένα που επιστρέφονται στο DIV με το αναγνωριστικό των σχολίων.

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

Πράγματα που πρέπει να θυμάστε

Ασφάλεια: Αυτός ο κωδικός δεν είναι έτοιμος για παραγωγή και προορίζεται μόνο για εκμάθηση. Έχουμε αφήσει ένα βασικό σημείο, και αυτή είναι η χρήση του wp-nonce - έναν εφάπαξ κώδικα που δημιουργείται από το WordPress και διασφαλίζει ότι το αίτημα AJAX προέρχεται μόνο από το σημείο που προοριζόταν. ένα κλειδί πρόσβασης εάν θέλετε. Χωρίς αυτό, η λειτουργία σας θα μπορούσε να αξιοποιηθεί αποτελεσματικά για την εισαγωγή τυχαίων δεδομένων. Ωστόσο, οι επιθέσεις με ένεση SQL δεν αποτελούν πρόβλημα, επειδή δρομολογήσαμε ερωτήματα μέσω του WordPress $ wpdb-> ένθετο Λειτουργία - Το WordPress καθαρίζει τυχόν εισόδους για εσάς και τα καθιστά ασφαλή.

Ενημέρωση του πίνακα πελατών: Αυτήν τη στιγμή, στέλνουμε μόνο ένα μήνυμα επιβεβαίωσης, αλλά ο πίνακας των πελατών δεν ενημερώνεται - θα δείτε τις πρόσθετες καταχωρήσεις μόνο εάν ανανεώσετε τη σελίδα (τι είδους νικά τον σκοπό να το κάνουμε όλα μέσω AJAX). Δείτε αν μπορείτε να δημιουργήσετε μια νέα λειτουργία AJAX που μπορεί δυναμικά να εξάγει τον πίνακα.

Επικύρωση εισαγωγής: επειδή δεν υπάρχει επικύρωση με τα δεδομένα φόρμας, είναι πραγματικά δυνατό να προσθέσετε κενές καταχωρήσεις ή πολλές καταχωρίσεις εάν πατήσετε πάρα πολλές φορές. Κάποια επικύρωση εισαγωγής στα πεδία φόρμας, εκκαθάριση όταν ολοκληρωθεί, καθώς και SQL για τον έλεγχο του email ή του αριθμού τηλεφώνου που δεν υπάρχει ήδη στη βάση δεδομένων θα ήταν χρήσιμη.

Αυτό είναι από εμένα αυτήν την εβδομάδα - εάν είχατε προβλήματα μετά από αυτό το σεμινάριο, μη διστάσετε να επικοινωνήσετε μέσω των σχολίων και θα κάνω ό, τι καλύτερο μπορώ να σας βοηθήσω. ή αν προσπαθείτε να το προσαρμόσετε με κάποιο τρόπο, μη διστάσετε να αναπηδήσετε ιδέες. Ελπίζω ότι αυτό πραγματικά δείχνει πόσο μπορείτε να κάνετε μέσα από το WordPress απλά συνδυάζοντας λίγο JavaScript, PHP και MySQL. Όπως πάντα, μην ξεχάσετε να δείτε όλα τα άλλα Άρθρα WordPress.