Πώς εισάγει σωστά το WordPress το JavaScript;Προσαρμοσμένη φόρτωση αρχείων JS και CSS

ΧρησιμοποιήστεΙστοσελίδα WordPressπρογραμματιστές, ανάπτυξηWordPress pluginΉ κατά την προσαρμογή ενός θέματος WordPress, αναφέρονται ορισμένοι πόροι δέσμης ενεργειών JavaScript και CSS.

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

Η εσφαλμένη μέθοδος αναφοράς

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

Τύπος 1:Οι ετικέτες συνδέσμων αναφέρονται σε αρχεία CSS

• Οι ετικέτες σεναρίου εφαρμόζουν αρχεία JS.Δεν είναι αναλυτικά εδώ.

Τύπος 2:Χρησιμοποιήστε τη συνάρτηση wp_head

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

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Αντιγράψτε τον παραπάνω κώδικα στο αρχείο functions.php για αναφορά στα αντίστοιχα αρχεία.

Μηχανισμός πόρων WordPress Enqueue Scripts

Όπως όλοι γνωρίζουμε, το WordPress έχει πολλά πρόσθετα:

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

Χρησιμοποιήστε τη συνάρτηση wp_enqueue_script

• Για να αναφέρετε έναν πόρο στο WordPress θα πρέπει να χρησιμοποιήσετεwp_enqueue_scriptΜια συνάρτηση που έχει τη λέξη ουρά στο όνομα της συνάρτησης που βρίσκεται σε σειρά ή ταξινομημένη.
• Με τον τρόπο του WordPress για την ουρά των πόρων (Enqueue Scripts), οι αναφορές διαχωρίζονται από τα αντίστοιχα αρχεία και τον βασικό κώδικα.
• Εάν ο χρήστης θέλει να απενεργοποιήσει τον πόρο, μπορεί να τον διαγράψει, να τον τροποποιήσει και να τον σχολιάσει χωρίς να τον τροποποιήσει από τον βασικό κώδικα.

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

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

Εάν χρησιμοποιείτε αυτήν τη συνάρτηση για να αναφέρετε τα δικά σας αρχεία JS και CSS, πρέπει να τη χρησιμοποιήσετεwp_register_scriptΗ συνάρτηση καταχωρεί ένα αναγνωριστικό (λαβή) και στη συνέχεια χρησιμοποιείwp_enqueue_scriptΗ συνάρτηση καλεί τον πόρο που αντιστοιχεί σε αυτή τη σημαία.

Πώς να εισάγετε σωστά αρχεία JS και CSS στο WordPress;

Το WordPress παρέχει λογικές μεθόδους εισαγωγής για μεθόδους JS και CSS.

Μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα για να εισαγάγετε το αρχείο plugin.css στην προσθήκη ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

Το παραπάνω χρησιμοποιεί τη συνάρτηση wp_register_script για να δημιουργήσει έναν πόρο με το αναγνωριστικό plugin_stylesheet.

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

Αν και το όνομα της συνάρτησης είναι δέσμη ενεργειών, δεν έχει καμία σχέση με τον τύπο του αρχείου πόρων και ισχύει τόσο για CSS όσο και για JS.

Η συνάρτηση wp_register_script δεν είναι πραγματικά τόσο απλή, μπορεί να έχει πέντε παραμέτρους:

1) $handle:Αναγνωριστικό πόρου.

• 由wp_enqueue_scriptΜΕΤΑΦΟΡΑ.

2) $src:Η τοποθεσία του πόρου.

• Οι σχετικές ή απόλυτες διευθύνσεις χρησιμοποιούν ενσωματωμένες λειτουργίες WordPress για να λάβουν διευθύνσεις κ.λπ.
• ΚοινόςΘέσηλειτουργία έχειplugins_url,get_template_directory_uri等.

3) $deps:βασίζομαι.

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

4) $ver:Έκδοση πόρων, προαιρετική.

5) $in_footer:Το βάζεις στο κάτω μέρος;

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

Ας δούμε ένα πιο πλήρες παράδειγμα αναφοράς αρχείου JavaScript ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

Τα θέματα του WordPress χρησιμοποιούν το wp_enqueue_script για την εισαγωγή πόρων

Προγραμματιστές στην ανάπτυξη θεμάτων WordPress, χρήσηwp_enqueue_scriptΕισαγωγή πόρων.

• Τα παραπάνω παραδείγματα είναι παραδείγματα πόρων αναφοράς για την ανάπτυξη προσθηκών WordPress.
• Η μέθοδος που αναφέρεται στο θέμα είναι παρόμοια.

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

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

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