כיצד וורדפרס מציגה כראוי JavaScript?טעינה מותאמת אישית של קבצי JS ו-CSS

用אתר וורדפרסמתכנתים, מפתחיםתוסף וורדפרסאו בעת התאמה אישית של ערכת נושא וורדפרס, יש התייחסות לכמה משאבי סקריפטים של JavaScript ו-CSS.

• בדרך כלל, אנשים משתמשים בתגיות קישור, סקריפט ישירות עבור HTML.
• למעשה, לוורדפרס יש פונקציות ושיטות מתוחכמות מובנות להפניה לסקריפטים.
• לכן, השימוש בהפניות השיטה המובנות של וורדפרס הוא מקצועי יותר וניתן להרחבה יותר.

שיטת הציטוט הפגומה

ישנן שתי שיטות ציטוט נפוצות, זה בסדר, זה פשוט לא מושלם או סביר.

סוג 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

כפי שכולנו יודעים, לוורדפרס יש הרבה תוספים:

• כמעט כל תוסף מפנה לקובץ משאבים כלשהו.
• באופן בלתי נמנע, יהיו התנגשויות בין משאבים אליהם מתייחסים שני תוספים, אשר יהפכו ללא יציבים ועלולים להשפיע על היעילות.

השתמש בפונקציה wp_enqueue_script

• כדי להפנות למשאב בוורדפרס עליך להשתמשwp_enqueue_scriptפונקציה שיש לה את המילה enqueue בשם הפונקציה הממוקמת בתור או ממוינת.
• עם הדרך של וורדפרס לסדר משאבים (Enqueue Scripts), ההפניות מופרדות מהקבצים המתאימים וקוד הליבה.
• אם המשתמש רוצה להשבית את המשאב, הוא יכול למחוק, לשנות ולהעיר אותו מבלי לשנות אותו מקוד הליבה.

כמו כן, חלק מהספריות הנפוצות כמו jQuery, jQuery UI וכו' מובנות בוורדפרס.

אנחנו יכולים להשתמש בפונקציה wp_enqueue_script כדי לקרוא ישירות לספרייה המובנית, מה שחוסך קוד ומפרט ברור יותר.

אם אתה משתמש בפונקציה זו כדי להתייחס לקובצי JS ו-CSS משלך, עליך להשתמשwp_register_scriptהפונקציה רושמת מזהה (handle) ולאחר מכן משתמשתwp_enqueue_scriptהפונקציה קוראת למשאב המתאים לדגל זה.

כיצד לייבא נכון קובצי JS ו-CSS בוורדפרס?

וורדפרס מספקת שיטות ייבוא ​​הגיוניות לשיטות 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:מיקום המשאב.

• כתובות יחסיות או מוחלטות משתמשות בפונקציות מובנות של וורדפרס כדי לקבל כתובות וכו'.
• מְשׁוּתָףמיצובלפונקציה יש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' ); 
?>

ערכות נושא של וורדפרס משתמשות ב-wp_enqueue_script כדי לייבא משאבים

מתכנתים בפיתוח נושא וורדפרס, שימושwp_enqueue_scriptייבוא ​​משאבים.

• הדוגמאות שלעיל הן דוגמאות למשאבים המוזכרים לפיתוח תוסף וורדפרס.
• השיטה הנזכרת בנושא דומה.

ההבדל העיקרי הוא להשתמש בפונקציה המתאימה כדי לקבל את ספריית ערכת הנושא כדי לקבל את כתובת קובץ המשאב תחת ערכת הנושא.

אתה יכול להשתמשget_template_directory_uriפונקציה כדי לקבל את ספריית הנושא הנוכחית.

אם אתה משתמש בערכת נושא לילד, תצטרך להשתמשget_stylesheet_directory_uriהפונקציה מקבלת את ספריית ערכת האב כדי לקבל את המשאבים המתאימים.