Τεχνολογία

Ο απόλυτος οδηγός για τη δημιουργία μιας προσθήκης WordPress



Οι προσθήκες είναι ένα ζωτικό μέρος των ιστότοπων του WordPress που χρειάζονται συγκεκριμένες λειτουργίες.

Ενώ το επίσημο αποθετήριο WordPress έχει περισσότερα από 45.000 πρόσθετα από εσάς για να διαλέξετε, πολλά από αυτά τα πρόσθετα χάνουν το σημάδι.



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



Τι μπορείτε λοιπόν να κάνετε; Λοιπόν, μπορείτε να δημιουργήσετε το δικό σας.



Ο απόλυτος οδηγός για τη δημιουργία μιας προσθήκης WordPress

Δημιουργία εξαιρετικής προσθήκης WordPress ξεκινά με προσεκτικό σχεδιασμό.



Είτε κατασκευάζετε ένα από το μηδέν, είτε βασίζετε σε μια πλάκα λέβητα, είναι απαραίτητο να ακολουθείτε καλά τεκμηριωμένες βέλτιστες πρακτικές.

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



Εάν θέλετε να ελέγξετε τον τελικό πηγαίο κώδικα καθώς διαβάζετε, μπορείτε να τον βρείτε εδώ .

Ξεκινήστε με ένα σχέδιο.

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



Η προσθήκη που δημιουργούμε θα επιτρέψει στους επισκέπτες του ιστότοπου να αποθηκεύουν περιεχόμενο για ανάγνωση αργότερα.

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



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

Οθόνη ρυθμίσεων

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

Αποθήκευση του περιεχομένου

  • Εάν ο χρήστης είναι συνδεδεμένος, αποθηκεύστε περιεχόμενο σε ένα προσαρμοσμένο πεδίο χρήστη
  • Εάν ο χρήστης δεν είναι συνδεδεμένος, αποθηκεύστε περιεχόμενο στα cookie

Μηνύματα

Τα παρακάτω μηνύματα θα εμφανίζονται στην οθόνη ως απάντηση στην αλληλεπίδραση ενός επισκέπτη με την προσθήκη ή ως ετικέτες σε αντικείμενα με δυνατότητα δράσης:



  • 'Αποθήκευση αντικειμένου.'
  • 'Μη αποθήκευση αντικειμένου.'
  • 'Αποθηκεύτηκε. Δείτε αποθηκευμένα αντικείμενα. '
  • 'Δεν έχετε αποθηκευμένα αντικείμενα.'

Αποθηκευμένη οθόνη

Εδώ οι επισκέπτες βλέπουν τη λίστα των αναρτήσεων που έχουν αποθηκεύσει.

  • Εμφάνιση λίστας αποθηκευμένων αντικειμένων
  • Δημιουργήστε μια αποθηκευμένη σελίδα για την ενεργοποίηση της προσθήκης
  • Διαγραφή αποθηκευμένης σελίδας σχετικά με την απενεργοποίηση της προσθήκης

Σύντομος κωδικός

Με έναν σύντομο κωδικό, η Αποθηκευμένη σελίδα μπορεί να αποδίδεται οπουδήποτε προστίθεται.

Χρησιμοποιήστε βραστήρα.

Αυτό είναι το καλύτερο boilerplate Βρήκα. Είναι καλά δομημένο, προσανατολισμένο σε αντικείμενα και αποτελεσματικό. Ακολουθεί κάθε βέλτιστη πρακτική. Και είναι γρήγορο και ελαφρύ.

Μπορείς να χρησιμοποιήσεις αυτή η σελίδα για να δημιουργήσετε μια βάση κώδικα plugin με βάση αυτό το WordPress Plugin Boilerplate:

Λέβητας λέιζερ

Πρέπει να πάρετε ένα .φερμουάρ αρχείο.

Εξαγάγετε το και τοποθετήστε το στο φάκελο εγκατάστασης του WordPress: wp-content / plugins / .

Εάν ανοίξετε τον Πίνακα ελέγχου WordPress και μεταβείτε σε προσθήκες, θα δείτε ότι η προσθήκη σας εμφανίζεται εκεί. Μην το ενεργοποιήσετε ακόμα.

Χειριστείτε την ενεργοποίηση και την απενεργοποίηση.

Είναι σημαντικό για την προσθήκη μας να χειρίζεται σωστά την ενεργοποίηση και την απενεργοποίηση.

Όταν ενεργοποιηθεί η προσθήκη μας, θα δημιουργήσουμε μια σελίδα με την ονομασία 'Αποθηκευμένη', η οποία θα περιέχει τα αποθηκευμένα στοιχεία του χρήστη σε αυτό.

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

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

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

Μπορούμε να τα κάνουμε όλα αυτά μέσα περιλαμβάνει / class-toptal-save-activator.php και περιλαμβάνει / class-toptal-save-deactivator.php .

Ας ξεκινήσουμε με τη διαδικασία ενεργοποίησης:

__( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

Το activate() Η λειτουργία καλείται όταν είναι ενεργοποιημένη η προσθήκη.

Δημιουργεί μια νέα σελίδα χρησιμοποιώντας το wp_insert_post() λειτουργία και αποθηκεύει το αναγνωριστικό σελίδας στη βάση δεδομένων χρησιμοποιώντας add_option() .

Τώρα, ας προχωρήσουμε με την απενεργοποίηση της προσθήκης.

Το deactivate() Η συνάρτηση, η οποία καλείται όταν είναι απενεργοποιημένη η προσθήκη, ανακτά τη σελίδα χρησιμοποιώντας το get_option() λειτουργία, καταργεί την αντίστοιχη σελίδα από τη βάση δεδομένων χρησιμοποιώντας wp_delete_post() και καταργεί το αποθηκευμένο αναγνωριστικό από τον πίνακα επιλογών χρησιμοποιώντας delete_option() .

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

Ενεργοποίηση λειτουργικής μονάδας Wordpress

Εάν θέλαμε να απενεργοποιήσουμε την προσθήκη, αυτή η σελίδα θα καταργηθεί.

Εφόσον χρησιμοποιήσαμε true ως επιχείρημα στο wp_delete_post() μέθοδος, αυτή η σελίδα δεν θα πάει στον κάδο απορριμμάτων, αλλά θα διαγραφεί εντελώς.

Δημιουργήστε μια σελίδα ρυθμίσεων προσθήκης.

Μπορούμε να δημιουργήσουμε τη σελίδα ρυθμίσεων μέσα στο admin / class-toptal-save-admin.php αρχείο, και το πρώτο πράγμα που πρέπει να κάνουμε σε αυτό το αρχείο είναι να αφαιρέσουμε ή να σχολιάσουμε την κλήση προς wp_enqueue_style() μέσα στο enqueue_styles() συνάρτηση και κλήση στο wp_enqueue_script() μέσα στο enqueue_scripts() λειτουργία εάν δεν προσθέτουμε κανένα CSS / JS στην οθόνη διαχειριστή.

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

if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' ); if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

Αν αναρωτιέστε πού πήρα αυτό ‘tools_page_toptal-save’ μέρος από.

Λοιπόν, εδώ είναι το πράγμα, ξέρω ότι πρόκειται να δημιουργήσω μια σελίδα ρυθμίσεων με ένα slug toptal-save, και επίσης ξέρω ότι θα το προσθέσω στα Εργαλεία ( tools.php ) οθόνη. Έτσι, συνδυάζοντας αυτά τα δύο, μπορούμε να πούμε ότι η τιμή της μεταβλητής $hook πρόκειται να είναι ‘tools_page_toptal-save’ - μια συνένωση των δύο τιμών.

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

Δεδομένου ότι δεν θα προσθέσω προσαρμοσμένο στυλ στην οθόνη διαχειριστή μου - επειδή θέλω η οθόνη προσθηκών μου να μοιάζει με εγγενή οθόνη WordPress - δεν θα προσθέσω αυτόν τον κώδικα.

Τώρα, μπορούμε να προχωρήσουμε στη δημιουργία της σελίδας ρυθμίσεων.

Θα ξεκινήσουμε προσθέτοντας μια απλή μέθοδο στο ApeeScape_Save_Admin τάξη που θα καλέσει το add_submenu_page() λειτουργία.

/** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'ApeeScape Save', 'toptal-save' ), // page title __( 'ApeeScape Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

Αυτό είναι αρκετά χρέη επιχειρήματα στα οποία διαβιβάζουμε add_submenu_page() λειτουργία. Εδώ είναι τι σημαίνει κάθε ένα από αυτά.

  • Γονικός γυμνοσάλιαγκας: Το όνομα slug για το γονικό μενού (ή το όνομα αρχείου μιας τυπικής σελίδας διαχειριστή WordPress). Μπορείτε να δείτε την πλήρη λίστα των γονικών γυμνοσάλιαγκων εδώ .

  • Τίτλος σελίδας: Το κείμενο που θα εμφανίζεται στις ετικέτες τίτλου της σελίδας όταν είναι επιλεγμένο το μενού.

  • Τίτλος μενού: Το κείμενο που θα χρησιμοποιηθεί για τον τίτλο του μενού.

  • Ικανότητα: Η δυνατότητα που απαιτείται από τον χρήστη για να εμφανιστεί σε αυτό το μενού. Έχουμε χρησιμοποιήσει το 'management_options' που επιτρέπει την πρόσβαση στις επιλογές του Πίνακα διαχείρισης. Μπορείτε να διαβάσετε περισσότερα σχετικά με τους ρόλους και τις δυνατότητες εδώ .

  • Γυμνοσκόπηση μενού: Το όνομα γυμνοσάλιαγκας που αναφέρεται σε αυτό το μενού.

  • Λειτουργία με δυνατότητα κλήσης: Η συνάρτηση που θα κληθεί για έξοδο του περιεχομένου αυτής της σελίδας. Δεδομένου ότι έχουμε ορίσει το όνομα της συνάρτησης με δυνατότητα κλήσης, πρέπει να το δημιουργήσουμε, αλλά πριν το κάνουμε, χρησιμοποιήσαμε $this να αναφέρει μια παρουσία μιας τάξης από μέσα της. Δείτε τι έχει να πει η τεκμηρίωση της PHP:

Η ψευδο-μεταβλητή $ αυτή είναι διαθέσιμη όταν καλείται μια μέθοδος μέσα σε ένα αντικείμενο αντικειμένου. $ αυτό είναι μια αναφορά στο αντικείμενο κλήσης (συνήθως το αντικείμενο στο οποίο ανήκει η μέθοδος, αλλά πιθανώς ένα άλλο αντικείμενο, εάν η μέθοδος καλείται στατικά από το πλαίσιο ενός δευτερεύοντος αντικειμένου).

Στη συνέχεια, θα προσθέσουμε μια άλλη μέθοδο στην τάξη:

/** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

Αυτή η δυνατότητα κλήσης περιλαμβάνει το πρότυπό μας που πρόκειται να εμφανίσει τη σελίδα ρυθμίσεων. Μπορείτε να δείτε ότι αναφερόμαστε σε ένα αρχείο που βρίσκεται στο διαχειριστής / μερική που ονομάζεται toptal-save-admin-display.php .

Τώρα, εάν μεταβείτε στα Εργαλεία, δεν θα δείτε αυτήν την οθόνη. Γιατί; Επειδή δεν έχουμε συνδέσει το register_admin_page() μέθοδος στο admin_menu άγκιστρο.

Μπορούμε να το κάνουμε ανοίγοντας το δικό μας περιλαμβάνει / class-toptal-save.php αρχείο και προσθέτοντας αυτό το κομμάτι κώδικα μέσα στο define_admin_hooks() μέθοδο, ακριβώς κάτω από όπου το $plugin_admin = new ApeeScape_Save_Admin( $this->get_plugin_name(), $this->get_version() ); μέρος είναι.

/** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new ApeeScape_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Μην ανησυχείτε για τις κλήσεις προς add_action() αφού αυτό είναι κάτι που θα καλύψουμε αργότερα.

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

Σελίδα εργαλείων Wordpress

Κάνουμε κάποια πρόοδο, αλλά hei, πρέπει να εμφανίσουμε κάποιες ρυθμίσεις εδώ, οπότε ας το κάνουμε.

Θα αρχίσουμε να δημιουργούμε τα πεδία και αυτό θα κάνουμε με τη βοήθεια του API ρυθμίσεων WordPress .

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

/** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

Μέσα στο register_settings() λειτουργία μπορούμε να προσθέσουμε και να διαμορφώσουμε όλα τα πεδία. Μπορείτε να βρείτε την πλήρη υλοποίηση της συνάρτησης εδώ . Χρησιμοποιήσαμε τα παρακάτω στη συνάρτηση που φαίνεται παραπάνω:

  • register_setting() : Καταχωρεί μια ρύθμιση και την επιστροφή απολύμανσής της.
  • add_settings_section() : Προσθέτει μια νέα ενότητα σε μια σελίδα ρυθμίσεων.
  • add_settings_field() : Προσθέτει ένα νέο πεδίο σε μια ενότητα της σελίδας ρυθμίσεων.

Όποτε χρησιμοποιούσαμε μία από αυτές τις τρεις λειτουργίες, παρέχεται μια επιστροφή απολύμανσης. Αυτό επιτρέπει στα δεδομένα να απολυμαίνονται και, εάν είναι πεδίο, να εμφανίζουν το κατάλληλο στοιχείο HTML (πλαίσιο ελέγχου, ραδιόφωνο, είσοδος, κ.λπ.).

Επίσης, έχουμε περάσει μια σειρά δεδομένων σε αυτές τις επιστροφές κλήσεων, όπως label_for, περιγραφή ή προεπιλογή, όπως απαιτείται.

Τώρα, μπορούμε να δημιουργήσουμε αυτές τις επιστροφές απολύμανσης. Μπορείτε να βρείτε τον κωδικό για αυτές τις επιστροφές εδώ .

Αυτό είναι εντάξει, ωστόσο, πρέπει να συνδέσουμε τα πεδία σε admin_init γάντζο και μετά να τους δείξουμε.

Θα χρησιμοποιήσουμε add_action που είναι ένα άγκιστρο που ο πυρήνας του WordPress ξεκινά σε συγκεκριμένα σημεία κατά την εκτέλεση ή όταν συμβαίνει ένα συγκεκριμένο συμβάν. admin_init ενεργοποιείται πριν από οποιοδήποτε άλλο άγκιστρο όταν ένας χρήστης έχει πρόσβαση στην περιοχή διαχειριστή.

Πρώτον, πρέπει να προσθέσουμε μια ενέργεια στο περιλαμβάνει / class-toptal-save.php αρχείο.

/** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new ApeeScape_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Στη συνέχεια, σε admin / partials / topal-save-admin-display.php , πρέπει να παρέχουμε μια προβολή για την περιοχή διαχειριστή της προσθήκης μας:

Το settings_fields() Η λειτουργία χρησιμοποιείται για την παραγωγή πεδίων nonce, action και option_page για μια σελίδα ρυθμίσεων.

Ακολουθείται από το do_settings_sections() που εκτυπώνει όλες τις ενότητες ρυθμίσεων που έχουν προστεθεί σε μια συγκεκριμένη σελίδα ρυθμίσεων.

Τέλος, προστίθεται ένα κουμπί υποβολής χρησιμοποιώντας το παρεχόμενο κείμενο και τις κατάλληλες τάξεις χρησιμοποιώντας το submit_button() λειτουργία.

Τώρα, αν ρίξουμε μια ματιά στη σελίδα μας, θα έχει την εξής μορφή:

Πλήρες παράδειγμα σελίδας Wordpress

Αυτό πρέπει να κάνουμε μόνο στον τομέα διαχειριστή μας. Ας αρχίσουμε να δουλεύουμε στο δημόσιο τμήμα της προσθήκης μας.

Δημιουργήστε τη λειτουργία προσθήκης.

Εδώ έρχεται το ενδιαφέρον μέρος. Πρέπει να δημιουργήσουμε πολλές λειτουργίες για να διαχωρίσουμε τη λειτουργικότητά μας:

  • Μια λειτουργία που θα εμφανίζει το κουμπί 'Αποθήκευση στοιχείου'. Αυτό πρέπει να ελέγξει εάν ο τρέχων χρήστης έχει ήδη αποθηκεύσει αυτό το στοιχείο ή όχι, ανάλογα με αυτό, θα εμφανίσουμε διαφορετικό κείμενο καθώς και χρώμα.
  • Μια συνάρτηση που θα αποθηκεύσει / αποθηκεύσει ένα στοιχείο (AJAX).
  • Μια συνάρτηση που θα εμφανίζει όλα τα αποθηκευμένα στοιχεία.
  • Μια συνάρτηση που θα δημιουργήσει τους κωδικούς μας.

Ας ξεκινήσουμε με την εμφάνιση του κουμπιού. Θα τα κάνουμε όλα αυτά μέσα public / class-toptal-save-public.php .

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

  • Δημιουργία ενός μοναδικού ονόματος cookie για τον ιστότοπο
  • Δημιουργία cookie
  • Λήψη της τιμής cookie
  • Λήψη της ιδιότητας μέλους από τις ρυθμίσεις

Μπορείτε να βρείτε τον κωδικό για αυτές τις λειτουργίες βοηθού εδώ .

Το get_unique_cookie_name() Η συνάρτηση θα μας βοηθήσει να δημιουργήσουμε ένα μοναδικό όνομα cookie από τη διεύθυνση URL του ιστότοπου, το όνομα του ιστότοπου και το επίθετό μας. Αυτό συμβαίνει ώστε το όνομα cookie που δημιουργείται να μην έρχεται σε διένεξη όταν χρησιμοποιείται σε πολλούς ιστότοπους WordPress στον ίδιο τομέα.

Το toptal_set_cookie() και toptal_get_cookie() Οι συναρτήσεις θα δημιουργήσουν και θα πάρουν την αξία των cookie μας αντίστοιχα.

Το get_user_status() Η λειτουργία θα πάρει την κατάσταση του πλαισίου ελέγχου ιδιότητας μέλους στις ρυθμίσεις (επιστρέφοντας 1 όταν είναι επιλεγμένη, 0 διαφορετικά).

Τώρα, το ζουμερό μέρος, δημιουργώντας τη λειτουργία που θα είναι υπεύθυνη για την εμφάνιση του κουμπιού αποθήκευσης. Η υλοποίηση για το show_save_button() μπορεί να βρεθεί η λειτουργία εδώ . Έχουμε χρησιμοποιήσει μερικές νέες λειτουργίες από το WordPress API εδώ:

  • get_queried_object_id() : Ανακτά το αναγνωριστικό του τρέχοντος ερωτήματος αντικειμένου.
  • is_user_logged_in() : Ελέγχει εάν ο τρέχων επισκέπτης είναι συνδεδεμένος χρήστης.
  • get_user_meta() : Ανακτά το πεδίο μεταδεδομένων χρήστη για έναν χρήστη.
  • wp_create_nonce() : Δημιουργεί ένα κρυπτογραφικό διακριτικό που συνδέεται με μια συγκεκριμένη ενέργεια, χρήστη, συνεδρία χρήστη και χρονικό διάστημα.

Τώρα, ας δημιουργήσουμε μια λειτουργία που θα προσθέσει το κουμπί μας στο τέλος του περιεχομένου. Εδώ, έχουμε δύο βασικές απαιτήσεις.

  1. Βεβαιωθείτε ότι το κουμπί εμφανίζεται μόνο στους τύπους (τους) δημοσιεύσεων που έχουν επιλεγεί στις ρυθμίσεις.
  2. Βεβαιωθείτε ότι είναι επιλεγμένο το πλαίσιο ελέγχου για την προσάρτηση του κουμπιού.
/** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

Τώρα, πρέπει να συνδέσουμε αυτήν τη λειτουργία στο the_content άγκιστρο.

Γιατί; Επειδή the_content χρησιμοποιείται για το φιλτράρισμα του περιεχομένου της ανάρτησης αφού ανακτηθεί από τη βάση δεδομένων και πριν εκτυπωθεί στην οθόνη.

Με αυτό, μπορούμε να προσθέσουμε το κουμπί αποθήκευσης οπουδήποτε στο περιεχόμενο. Μπορούμε να το κάνουμε μέσα περιλαμβάνει / class-toptal-save.php σε define_public_hooks() μέθοδος, όπως αυτή:

/** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new ApeeScape_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

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

Οθόνη ρυθμίσεων προσθηκών Wordpress

Από εδώ, πρέπει να προχωρήσουμε και να διαμορφώσουμε αυτό το κουμπί.

Μπορούμε να το κάνουμε μέσα public / css / toptal-save-public.css . Βρείτε το ενημερωμένο αρχείο CSS εδώ .

Τώρα, ας δημιουργήσουμε μια συνάρτηση που θα σώσει πραγματικά το στοιχείο.

Θα το κάνουμε αυτό στη δημόσια τάξη μας και θα το κάνουμε με το AJAX. Ο κωδικός είναι εδώ .

Ας συνδέσουμε αυτήν τη λειτουργία στο WordPress AJAX.

/** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new ApeeScape_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Μπορείτε να διαβάσετε περισσότερα για το AJAX σε προσθήκες εδώ .

Πριν τελειώσουμε αυτό το μέρος, πρέπει να κάνουμε δύο ακόμη πράγματα.

  1. Τοπικοποίηση σεναρίου.
  2. Δημιουργήστε την κλήση AJAX στο κοινό / js / toptal-save-public.js

Ο εντοπισμός ενός σεναρίου θα γίνει μέσω του wp_localize_script() λειτουργία μέσα στο public/class-toptal-save-public.php αρχείο.

Επίσης, ενώ είμαστε σε αυτό, θα φροντίσουμε επίσης να εφαρμόσουμε την εμφάνιση αρχείων CSS και JS ανάλογα με την κατάσταση του πλαισίου ελέγχου 'χρησιμοποιήστε το στυλ μας'.

/** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in ApeeScape_Save_Loader as all of the hooks are defined * in that particular class. * * The ApeeScape_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in ApeeScape_Save_Loader as all of the hooks are defined * in that particular class. * * The ApeeScape_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

Τώρα, μπορούμε να συνεχίσουμε με την κλήση AJAX.

Το σενάριο front-end θα αναζητήσει στοιχεία με την κατηγορία 'toptal-save-button'.

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

Μπορείτε να βρείτε τον κωδικό εδώ και το απαραίτητο CSS εδώ .

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

Δείτε πώς λειτουργεί όλα.

Η επίδειξη προσθηκών Wordpress ολοκληρώθηκε

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

Μπορούμε να το κάνουμε μέσα public / class-toptal-save-public.php :

/** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

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

Σε περιλαμβάνει / class-toptal-save.php προσθέστε αυτόν τον κωδικό μετά από αυτήν τη γραμμή όπου προσθέσαμε το κουμπί μας.

// Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

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

Εδώ είναι ο πλήρης κωδικός του περιλαμβάνει / class-toptal-save-loader.php αρχείο.

Έχω προσθέσει μια νέα προστατευμένη μεταβλητή που ονομάζεται shortcodes, και στη μέθοδο κατασκευαστή της κλάσης, την έχω μετατρέψει σε πίνακα.

Στη γραμμή 104, έχω προσθέσει μια λειτουργία που θα είναι υπεύθυνη για τη δημιουργία των σύντομων κωδικών μας. μπορείτε να δείτε ότι είναι σχεδόν το ίδιο με τη συνάρτηση πάνω από αυτό (add_filter()), εκτός από ότι άλλαξα το 'φίλτρο' σε 'σύντομο' και 'φίλτρα' σε 'συντομεύσεις'.

Επίσης, στο run() μέθοδος, έχω προσθέσει ένα άλλο foreach που θα περάσει από τον πίνακα των κωδικών μας και θα τους εγγράψει στο WordPress.

Αυτό ήταν εύκολο.

Θυμηθείτε, στην αρχή, χρησιμοποιήσαμε έναν σύντομο κωδικό [toptal-saved], οπότε ας δημιουργήσουμε μια μέθοδο που θα εμφανίζει όλα τα αποθηκευμένα στοιχεία μας.

Βρείτε τον πλήρη κωδικό για αυτήν τη μέθοδο εδώ .

Τώρα, όπως πάντα, πρέπει να καταχωρήσουμε τον σύντομο κωδικό στο περιλαμβάνει / class-toptal-save.php :

/** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new ApeeScape_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Έχουμε δύο ακόμη πράγματα να κάνουμε εδώ.

  1. Στυλ στη σελίδα των αποθηκευμένων αντικειμένων μας.
  2. Βεβαιωθείτε ότι όταν ένας χρήστης καταργεί ένα αποθηκευμένο στοιχείο, εξαφανίζεται από τη σελίδα των αποθηκευμένων στοιχείων.

Για την πρώτη εργασία, μπορείτε να βρείτε τον απαραίτητο κωδικό CSS εδώ .

Για το δεύτερο, περιλαμβάνει λίγο scripting front-end.

Μπορείτε να βρείτε τον πλήρη κώδικα JavaScript εδώ .

Όπως θα δείτε στη γραμμή 52, έψαξα για το div με μια κλάση 'toptal-save-item'.

Στη συνέχεια, στις γραμμές 70-75, ελέγξουμε εάν το γονικό div έχει ένα στοιχείο toptal-save-item.

Εάν συμβαίνει αυτό, αποκρύπτουμε το στοιχείο μας με το fadeOut και μετά, αφού τελειώσει η κινούμενη εικόνα, καταργούμε εντελώς το στοιχείο από την οθόνη.

Τώρα, ας προχωρήσουμε στο πιο δύσκολο μέρος - καθιστώντας το αρθρωτό.

Κάντε το plugin modular.

Ο βασικός ορισμός ενός αρθρωτού πρόσθετου είναι:

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

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

Λοιπόν, θα χρειαστεί να κάνουμε μερικές αλλαγές στο register_saved_shortcode() μέθοδος:

  • Αλλαγή html_to_return έως inner_html_to_return όπου θέλουμε οι χρήστες να μπορούν να αλλάζουν το HTML. Βεβαιωθείτε ότι η πρώτη δήλωση του inner_html_to_return η μεταβλητή έχει '=' χωρίς τελεία που προηγείται.
  • Χρησιμοποιήστε το apply_filters() μέθοδος για την καταχώριση του φίλτρου μας.

Με αυτές τις δύο αλλαγές, θα πρέπει να καταλήξετε με κάτι παρόμοιο Αυτό .

Τώρα, εάν οι χρήστες θέλουν να αλληλεπιδράσουν με τον κωδικό μας, μπορούν να προσθέσουν κάτι τέτοιο μέσα στο functions.php αρχείο:

Δημιουργήστε αρχεία μετάφρασης.

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

Τούτου λεχθέντος, ας δούμε μερικές τεχνικές λεπτομέρειες σχετικά με το πώς το WordPress χειρίζεται τις μεταφράσεις.

Το WordPress χρησιμοποιεί το GNU gettext πλαίσιο εντοπισμού για μετάφραση. Σε αυτό το πλαίσιο, υπάρχουν τρεις τύποι αρχείων:

  • Πρότυπο φορητού αντικειμένου (POT)
  • Φορητό αντικείμενο (PO)
  • Αντικείμενο μηχανής (MO)

Κάθε ένα από αυτά τα αρχεία αντιπροσωπεύει ένα βήμα στη διαδικασία μετάφρασης.

Για να δημιουργήσουμε ένα αρχείο POT, χρειαζόμαστε ένα πρόγραμμα που θα κάνει αναζήτηση μέσω κώδικα WordPress και θα μεταφέρει όλο το κείμενο στις μεταφραστικές μας λειτουργίες, όπως __e() και _e(). Μπορείτε να διαβάσετε περισσότερα σχετικά με τις λειτουργίες μετάφρασης εδώ .

Εδώ μεταφράζουμε το κείμενο από το αρχείο POT, αποθηκεύοντας τόσο τα αγγλικά όσο και τη μετάφρασή μας σε ένα αρχείο PO και μετατρέπουμε το αρχείο PO σε ένα αρχείο MO.

Κάνοντας αυτό με μη αυτόματο τρόπο θα χρειαζόταν πολύς χρόνος δεδομένου ότι θα έπρεπε να γράψετε μερικές γραμμές κώδικα για κάθε μεταφράσιμο αρχείο που έχετε στην προσθήκη σας. Ευτυχώς, υπάρχει ένας καλύτερος τρόπος, χρησιμοποιώντας ένα εύχρηστο μικρό πρόσθετο που ονομάζεται Loco Translate.

Μόλις το εγκαταστήσετε και το ενεργοποιήσετε, μεταβείτε στο Crazy Μετάφραση > Πρόσθετα> Αποθήκευση ApeeScape.

Από εκεί, κάντε κλικ στο Επεξεργασία προτύπου και, στη συνέχεια, Συγχρονισμός και Αποθήκευση. Αυτό θα επεξεργαστεί το toptal-save.pot αρχείο μέσα στο φάκελο γλωσσών μας.

Τώρα, το πρόσθετο είναι διαθέσιμο για μετάφραση.

Δημιουργήστε την προσθήκη WordPress τώρα.

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

πώς να γράψετε ένα discord bot στη java

Έχουμε χρησιμοποιήσει τις λειτουργίες του WordPress με τρόπους που δεν εμποδίζουν τη συνολική απόδοση της πλατφόρμας.

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

Οι αγοραστές και οι προγραμματιστές θα προσαρμοστούν στο μάρκετινγκ εγγύτητας στο κατάστημα;

Τεχνολογία

Οι αγοραστές και οι προγραμματιστές θα προσαρμοστούν στο μάρκετινγκ εγγύτητας στο κατάστημα;
Το ApeeScape Finance δίνει τη δυνατότητα στο μέλλον της εργασίας να προσφέρει εξειδικευμένη χρηματοδότηση κατ 'απαίτηση

Το ApeeScape Finance δίνει τη δυνατότητα στο μέλλον της εργασίας να προσφέρει εξειδικευμένη χρηματοδότηση κατ 'απαίτηση

Αλλα