Πώς να δημιουργήσετε ένα πρόσθετο Widget για WordPress

Το WordPress είναι ένα εκπληκτικό Σύστημα Διαχείρισης Περιεχομένου με πολλές εξαιρετικές δυνατότητες, όπως widget. Σε αυτό το σεμινάριο, θα σας εξηγήσω πώς να δημιουργήσετε τα δικά σας widget σε μια μικρή προσθήκη. Αυτή η ανάρτηση θα καλύψει μερικά επιπλέον σημεία που πρέπει να κατανοήσετε πριν δημιουργήσετε το ίδιο το widget. Ορίστε!


Βήμα 1: Δημιουργήστε το Plugin Widget

Πρόσφατα δημιούργησα ένα πρόσθετο που ονομάζεται “Freelancer Widgets Bundle” και μερικοί άνθρωποι με ρώτησαν πώς να δημιουργήσω ένα τέτοιο πρόσθετο, γι ‘αυτό αποφάσισα να γράψω αυτήν την ανάρτηση. Το πρώτο βήμα είναι η δημιουργία της προσθήκης. Και όπως θα δείτε, δεν είναι το πιο δύσκολο κομμάτι. Ένα πρόσθετο είναι ένας πρόσθετος κώδικας που προστίθεται στο WordPress μόλις το ενεργοποιήσετε. Το WordPress δημιουργεί έναν βρόχο μέσω ενός φακέλου για να ανακτήσει όλες τις διαθέσιμες προσθήκες και να τις αναφέρει στο back office. Για να δημιουργήσετε την προσθήκη σας, θα χρειαστείτε ένα πρόγραμμα επεξεργασίας όπως το Coda (Mac) ή το Dreamweaver (PC & Mac). Σας προτείνω να δημιουργήσετε την προσθήκη σας σε μια τοπική εγκατάσταση του WordPress, κάνοντάς το σε έναν ζωντανό διακομιστή μπορεί να προκαλέσει κάποια προβλήματα εάν κάνετε κάποιο σφάλμα. Λοιπόν, περιμένετε να δοκιμάσετε το plugin μας πριν τοποθετήσετε σε αυτό τη φιλοξενία σας.

Ανοίξτε τώρα το φάκελο wp-content / plugins. Εδώ θα προσθέσετε την προσθήκη σας. Δημιουργήστε έναν νέο κατάλογο και καλέστε το “widget-plugin” (στην πραγματικότητα, αυτό το όνομα μπορεί να είναι ό, τι θέλετε). Ακόμα κι αν η προσθήκη μας θα έχει μόνο ένα μόνο αρχείο, είναι πάντα καλύτερο να χρησιμοποιείτε έναν φάκελο για κάθε προσθήκη. Στον κατάλογό σας, δημιουργήστε ένα νέο αρχείο που ονομάζεται “widget-plugin.php” (αυτό το όνομα μπορεί επίσης να αλλάξει) και ανοίξτε το. Πρόκειται τώρα να προσθέσουμε τις πρώτες γραμμές κώδικα. Ο ορισμός μιας προσθήκης στο WordPress ακολουθεί ορισμένους κανόνες που μπορείτε να διαβάσετε εδώ στον κώδικα. Δείτε πώς το WordPress ορίζει μια προσθήκη:

Επομένως, πρέπει να τροποποιήσουμε αυτόν τον κώδικα για να τον προσαρμόσουμε στις ανάγκες μας:

Αποθηκεύστε το αρχείο σας. Προσθέτοντας μόνο κώδικα στο αρχείο widget-plugin.php δημιουργήσαμε μια προσθήκη! Λοιπόν, προς το παρόν η προσθήκη δεν κάνει τίποτα, αλλά το WordPress το αναγνωρίζει. Για να βεβαιωθείτε ότι ισχύει, πηγαίνετε στη διαχείρισή σας και μεταβείτε στο μενού "Πρόσθετα". Εάν η προσθήκη σας εμφανίζεται στη λίστα προσθηκών, είστε καλά, διαφορετικά βεβαιωθείτε ότι έχετε ακολουθήσει τις οδηγίες μου και δοκιμάστε ξανά. Τώρα μπορείτε να ενεργοποιήσετε την προσθήκη.

Βήμα 2: Δημιουργήστε το Widget

Τώρα πρόκειται να δημιουργήσουμε το ίδιο το widget. Αυτό το widget θα είναι μια τάξη PHP που επεκτείνει την βασική τάξη WordPress WP_Widget. Βασικά, το widget μας θα οριστεί με αυτόν τον τρόπο:

// Η κλάση widget
Η κλάση My_Custom_Widget επεκτείνει το WP_Widget {

// Κύριος κατασκευαστής
δημόσια λειτουργία __construct () {
/ * ... * /
}

// Η φόρμα widget (για το backend)
φόρμα δημόσιας λειτουργίας (παρουσία $) {
/ * ... * /
}

// Ενημέρωση ρυθμίσεων widget
ενημέρωση δημόσιας λειτουργίας ($ new_instance, $ old_instance) {
/ * ... * /
}

// Εμφάνιση του widget
widget δημόσιας λειτουργίας ($ args, $ instance) {
/ * ... * /
}

}

// Καταχωρήστε το widget
συνάρτηση my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Αυτός ο κώδικας παρέχει στο WordPress όλες τις πληροφορίες που το σύστημα πρέπει να είναι σε θέση να χρησιμοποιήσει το widget:

  1. ο κατασκευαστής, για να ξεκινήσετε το widget
  2. ο συνάρτηση form () για να δημιουργήσετε τη φόρμα widget στη διαχείριση
  3. ο συνάρτηση ενημέρωσης (), για αποθήκευση δεδομένων widget κατά την έκδοση
  4. Και το συνάρτηση widget () για να εμφανιστεί το περιεχόμενο widget στο front-end

1 - Ο κατασκευαστής

Ο κατασκευαστής είναι το μέρος του κώδικα που καθορίζει το όνομα του widget και τα κύρια ορίσματα, παρακάτω είναι ένα παράδειγμα του πώς μπορεί να μοιάζει.

// Κύριος κατασκευαστής
δημόσια λειτουργία __construct () {
γονέας :: __ κατασκευή (
"my_custom_widget",
__ ("Το προσαρμοσμένο μου widget", "text_domain"),
πίνακας(
'customize_selective_refresh' => true,
)
)
}

Μην χρησιμοποιείτε το __ () γύρω από το όνομα του widget, αυτή η λειτουργία χρησιμοποιείται από το WordPress για μετάφραση. Σας συνιστώ πραγματικά να χρησιμοποιείτε πάντα αυτές τις λειτουργίες, για να κάνετε το θέμα σας πλήρως μεταφράσιμο. Και η χρήση της παραμέτρου "customize_selective_refresh" επιτρέπει στο widget να ανανεώνεται κάτω Εμφάνιση> Προσαρμογή κατά την επεξεργασία του widget, οπότε αντί να ανανεώνεται ολόκληρη η σελίδα μόνο το widget ανανεώνεται κατά την πραγματοποίηση αλλαγών.

2 - Η συνάρτηση form ()

Αυτή η λειτουργία είναι αυτή που δημιουργεί τις ρυθμίσεις φόρμας widget στην περιοχή διαχειριστή του WordPress (είτε στην ενότητα Εμφάνιση> Widgets ή Εμφάνιση> Προσαρμογή> Widgets). Εδώ θα εισαγάγατε τα δεδομένα σας για προβολή στον ιστότοπο. Θα εξηγήσω λοιπόν πώς μπορείτε να προσθέσετε πεδία κειμένου, περιοχές κειμένου, επιλεγμένα πλαίσια και πλαίσια ελέγχου στις ρυθμίσεις φόρμας widget.

// Η φόρμα widget (για το backend)
φόρμα δημόσιας λειτουργίας (παρουσία $) {

// Ορισμός προεπιλογών widget
$ defaults = πίνακας (
'τίτλος' => '',
'κείμενο' => '',
'textarea' => '',
"πλαίσιο ελέγχου" => ",
'select' => '',
)

// Αναλύστε τις τρέχουσες ρυθμίσεις με προεπιλογές
εξαγωγή (wp_parse_args ((array) $ instance, $ defaults)); ?>


/>

Αυτός ο κωδικός προσθέτει απλώς 5 πεδία στο widget (Τίτλος, κείμενο, κείμενο, επιλογή και πλαίσιο ελέγχου). Έτσι, πρώτα ορίζετε τις προεπιλογές για το widget σας και, στη συνέχεια, η επόμενη συνάρτηση αναλύει τις τρέχουσες ρυθμίσεις που έχουν οριστεί / αποθηκευτεί για το widget σας με τις προεπιλογές (οπότε τυχόν ρυθμίσεις που δεν υπάρχουν θα επανέλθουν στην προεπιλογή, όπως όταν προσθέσατε για πρώτη φορά ένα widget στο την πλευρική γραμμή σας). Και το τελευταίο είναι το html για κάθε πεδίο. Παρατηρήστε τη χρήση του esc_attr () κατά την προσθήκη των πεδίων φόρμας, αυτό γίνεται για λόγους ασφαλείας. Κάθε φορά που επαναλαμβάνετε μια μεταβλητή που καθορίζεται από τον χρήστη στον ιστότοπό σας, θα πρέπει να βεβαιωθείτε ότι έχει πρώτα απολυμανθεί.

3 - Η συνάρτηση ενημέρωσης ()

Η συνάρτηση ενημέρωσης () είναι πραγματικά απλή. Καθώς οι βασικοί προγραμματιστές του WordPress πρόσθεσαν ένα πραγματικά ισχυρό API widget, πρέπει να προσθέσουμε αυτόν τον κώδικα μόνο για να ενημερώσουμε κάθε πεδίο:

// Ενημέρωση ρυθμίσεων widget
ενημέρωση δημόσιας λειτουργίας ($ new_instance, $ old_instance) {
$ instance = $ old_instance;
$ instance ['title'] = isset ($ new_instance ['title']); wp_strip_all_tags ($ new_instance ['title']): '';
$ instance ['text'] = isset ($ new_instance ['text']); wp_strip_all_tags ($ new_instance ['text']): '';
$ instance ['textarea'] = isset ($ new_instance ['textarea']); wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox']); 1: ψευδές;
$ instance ['select'] = isset ($ new_instance ['select']); wp_strip_all_tags ($ new_instance ['select']): '';
επιστροφή $ παρουσίας;
}

Όπως μπορείτε να δείτε, το μόνο που έχουμε να κάνουμε είναι να ελέγξουμε κάθε ρύθμιση και αν δεν είναι κενή, αποθηκεύστε τη στη βάση δεδομένων. Παρατηρήστε τη χρήση των λειτουργιών wp_strip_all_tags () και wp_kses_post (), χρησιμοποιούνται για την εξυγίανση των δεδομένων προτού προστεθούν στη βάση δεδομένων. Κάθε φορά που εισάγετε ΟΠΟΙΟΔΗΠΟΤΕ περιεχόμενο που υποβάλλεται από χρήστη σε μια βάση δεδομένων, πρέπει να βεβαιωθείτε ότι δεν έχει κακόβουλο κώδικα. Η πρώτη συνάρτηση wp_strip_all_tags αφαιρεί τα πάντα εκτός από το βασικό κείμενο, ώστε να μπορείτε να το χρησιμοποιήσετε για οποιαδήποτε πεδία όπου η τελική τιμή είναι μια συμβολοσειρά και η δεύτερη συνάρτηση wp_kses_post () είναι η ίδια λειτουργία που χρησιμοποιείται για το περιεχόμενο της ανάρτησης και αφαιρεί όλες τις ετικέτες εκτός από βασικούς html όπως συνδέσμους , spans, divs, εικόνες κλπ.

4 - Η λειτουργία widget ()

Η λειτουργία widget () είναι αυτή που θα εξάγει το περιεχόμενο στον ιστότοπο. Αυτό θα δουν οι επισκέπτες σας. Αυτή η λειτουργία μπορεί να προσαρμοστεί ώστε να περιλαμβάνει τάξεις CSS και συγκεκριμένες ετικέτες ώστε να ταιριάζουν απόλυτα με την εμφάνιση του θέματος. Εδώ είναι ο κωδικός (μην παραλείπετε ότι αυτός ο κωδικός μπορεί να τροποποιηθεί εύκολα για να ταιριάζει στις ανάγκες σας):

// Εμφάνιση του widget
widget δημόσιας λειτουργίας ($ args, $ instance) {

απόσπασμα ($ args);

// Ελέγξτε τις επιλογές widget
$ title = isset ($ instance ['title']); apply_filters ('widget_title', $ instance ['title']): '';
$ text = isset ($ instance ['text']); $ instance ['text']: '';
$ textarea = isset ($ instance ['textarea']); $ instance ['textarea']: '';
$ select = isset ($ instance ['select']); $ instance ['select']: '';
πλαίσιο ελέγχου $ =! κενό ($ instance ['checkbox']); $ instance ['checkbox']: false;

// WordPress core before_widget hook (πάντα να περιλαμβάνεται)
echo $ before_widget;

// Εμφάνιση του widget
ηχώ '
"; // Εμφανίζεται ο τίτλος του widget εάν ορίζεται αν (τίτλος $) { echo $ before_title. $ τίτλος. $ after_title; } // Εμφάνιση πεδίου κειμένου εάν (κείμενο $) { ηχώ '

". κείμενο $. "

"; } // Εμφάνιση πεδίου textarea εάν ($ textarea) { ηχώ '

". $ textarea. "

"; } // Εμφάνιση πεδίου επιλογής εάν ($ επιλέξτε) { ηχώ '

". $ επιλέξτε. "

"; } // Εμφανίστε κάτι αν το πλαίσιο ελέγχου είναι αληθινό εάν (πλαίσιο ελέγχου $) { ηχώ '

Κάτι φοβερό

"; } ηχώ '
"; // WordPress core after_widget hook (συμπεριλαμβάνεται πάντα) echo $ after_widget; }

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

Ο πλήρης κωδικός προσθήκης Widget

Τώρα αν ακολουθείτε σωστά το plugin σας θα πρέπει τώρα να είναι πλήρως λειτουργικό και μπορείτε να το προσαρμόσετε ώστε να ταιριάζει στις ανάγκες σας. Εάν δεν ακολουθήσατε τον οδηγό ή θέλετε να ελέγξετε ξανά τον κωδικό, μπορείτε να επισκεφθείτε τη σελίδα Github για να δείτε τον πλήρη κώδικα.

Δείτε τον πλήρη κώδικα στο Github

συμπέρασμα

Είδαμε ότι η δημιουργία ενός widget μέσα σε μια προσθήκη είναι πολύ ενδιαφέρουσα, τώρα πρέπει να ξέρετε πώς να δημιουργήσετε ένα απλό plugin που περιέχει ένα widget με διαφορετικούς τύπους πεδίων και μάθατε πώς να προχωρήσετε λίγο περισσότερο χρησιμοποιώντας προηγμένες τεχνικές για να προσαρμόσετε το widget. Συγχαρητήρια, κάνατε καταπληκτική δουλειά!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map