הוספת נכסים (קבצי Javascript ו- CSS) בוורדפרס

כיצד מוסיפים קבצי Javascript ו- CSS באתרי וורדפרס?

רבים מאיתנו משתמשים ב CSS על מנת לשנות את מראה האתר, וב Javascript על מנת לשפר או להוסיף פונקציונליות כזו או אחרת. אך גם לדרך בה אתם מוסיפים נכסים אלו בוורדפרס ישנה חשיבות לא קטנה.

במקום להניח קישור לקבצים אלו ב Header או ב Footer האתר, עלינו להשתמש בפונקציונליות המובנית של וורדפרס הנקראית enqueueing. במדריך זה אסביר כיצד להוסיף נכסים, הלא הם קבצי CSS ו Javascript באתרי וורדפרס ומדוע אין להשתמש בדרכים אחרות.

מה זה בעצם enqueueing?

enqueueing הוא דרך ידידותית להוספת קבצי Javascript וקבצי עיצוב (CSS) באתרי וורדפרס ומספקת דרך שיטתית לטעינת קבצים אלו. באמצעות enqueueing באפשרותינו לומר לוורדפרס היכן ומתי לטעון נכסים אלו ובנוסף לציין אם ישנם תלויות כלשהן (dependencies) בין קובץ אחד למשנהו.

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

חשבו על כך – רבים התוספים אשר משתמשים בספריה jQuery. אם כל אחד מתוספים אלו יטען את jQuery ממקור אחר יווצר כאוס מוחלט וה Javascript באתר שלכם יפסיק לעבוד עקב שגיאות.

אז בהקשר של enqueueing ווורדפרס אנו מדברים על שתי פונקציות מרכזיות:

  • הפונקציה wp_enqueue_script מאפשרת לבצע enqueuing לסקריפטים (JS).
  • הפונקציה wp_enqueue_style מאפשרת לבצע enqueuing לקבצי עיצוב (CSS).

לפני שנדבר בהרחבה על פונקציות אלו והפרמטרים שלהן, נראה דוגמה בסיסית לשימוש ב wp_enqueue_script להוספת קובץ JS באתר וורדפרס. הפונקציה הבאה תטען קובץ בשם my-script.js הנמצא התיקייה הראשית של התבנית בה אנו משתמשים (אם קיים).

function my_assets() {
	wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/my-script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_assets' );

על enqueueing בהרחבה

בואו ניתן מבט על הפרמטרים שזמינים לנו בפונקציות אלו. שימו לב כי שתיהן מקבלות חמישה פרמטרים כאשר הארבעה הראשונים זהים:

wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer );
wp_enqueue_style( $handle, $source, $dependencies, $version, $media );
  • handle – זהו שם ייחודי של הנכס. עדיף להשתמש רק באותיות lowercase.
  • source – כתובת ה URL של הנכס. וודאו כי אתם משתמשים בפונקציות כגון get_template_directory_uri ו plugins_uri.
  • dependencies – מערך של handles עליהם תלוי הנכס שלכם. שמות הנכסים המופיעים פה ייטענו לפני הנכס שהוספתם.
  • version – מספר גירסה שיתווסף. זה מבטיח שהצופה האתר יקבל תמיד את הגירסה הנכונה ללא קשר לקאשינג (caching).
  • in_footer – פרמטר זה קיים רק עבורwp_enqueue_script. במידה ותקבעו true בפרמטר זה הסקריפט תמיד ייטען באמצעות הפונקציה wp_footer בתחתית העמוד.
  • media – פרמטר זה קיים רק עבורwp_enqueue_style. הוא מאפשר לכם לקבוע את סוג המדיה בה קובץ CSS זה יטען, למשל: screens, print, handheld…

שימוש נכון ב enqueueing להוספת נכסים

איני חושב שציינתי, אך התוצאה הסופית של פעולת ה enqueueing תהיה תגיות script או תגיות link סטנדרטיות בקוד המקור של האתר.

נסתכל רגע על הדוגמה הבאה אליה נתייחס כדוגמה א׳. קוד זה הינו יטען שלושה קבצי JS ושני קבצי CSS בדף HTML סטנדרטי:

<!DOCTYPE html>
<head>
	<script type='text/javascript' src='jquery.js'>
	<script type='text/javascript' src='owl.carousel.js'></script>
	<link rel='stylesheet' type='text/css' href='reset.css'>
	<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
	Website content here
	<script type='text/javascript' src='website-scripts.js'></script>
</body>
</html>

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

מכיוון וסדר הטעינה של קבצים אלו חשוב, אם תתחילו להוסיף אותם בעצמכם ל Header ול Footer, תלכו לאיבוד מהר מאד. כפי שציינו, enqueueing היא שיטה המאפשרת לציין אילו נכסים אנו מעוניינים לטעון, היכן לטעון אותם (ב Header או ב Footer), והאם ישנה תלות בין קובץ אחד לאחר.

בואו נראה כיצד להוסיף את הנכסים המופיעים בקוד מעלה באתר וורדפרס באמצעות enqueueing. על קוד זה להיות בקובץ functions.php של תבנית האב, תבנית הבת או קובץ כלשהו בתוסף שלכם:

function my_assets() {
	wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array( 'reset' ) );
	wp_enqueue_style( 'reset', get_stylesheet_directory_uri() . '/reset.css' );

	wp_enqueue_script( 'owl-carousel', get_stylesheet_directory_uri() . '/owl.carousel.js', array( 'jquery' ) );
	wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/website-scripts.js', array( 'owl-carousel', 'jquery' ), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'my_assets' );

שימו לב כי מופיעה פונקציה חדשה שלא הזכרנו ושמה wp_enqueue_style.

שני הקבצים הראשונים שהוספנו בקוד זה הינם קבצי CSS. מבחינת סדר הקריאה, שימו לב כי קראנו לקובץ style.css לפני שקראנו לקובץ reset.css למרות שהוא תלוי בו. זו אינה בעיה מפני שהגדרנו את התלות בין השניים בפרמטר השלישי.

הנכס השלישי שהוספנו הינו Owl Carousel שאני נורא אוהב ומאפשרת ליצור קרוסלת מגניבות. כפי שאתם שמים לב, בפרמטר השלישי של קובץ זה הגדרנו כי נכס זה תלוי ב jQuery וייטען לאחריו.

אין צורך לבצע enqueue ל jQuery מכיוון וזה כבר מבוצע אוטומטית על ידי וורדפרס.

הסקריפט האחרון שהוספנו הינו theme-script. סקריפט זה תלוי ב jQuery וב Owl Carousel. למעשה, היינו יכולים לתת תלות אך ורק ל Owl Carousel, מכיוון וזו תלויה ב jQuery ולכן הסקריפט שהוספנו ייטען לאחר שניהם בכל מקרה. עם זאת, אני מעדיף תמיד לרשום כל תלות בכדי לקבל את כל האינפורמציה כאשר אני מסתכל על הקוד.

הפרמטר הרביעי הוא אופציונלי ומציין את הגירסה של הסקריפט אותה קבענו על 1.0. באופן כללי, גירסת הסקריפט או קובץ ה CSS מאפשרת לנו לבצע Cache Busting לאחר שינויים בקוד. החלק האחרון בפאזל הוא לוודא כי הסקריפט המדובר (theme-script) נטען בפוטר ולכן הפרמטר החמישי מוגדר כ true.

אז ניתן להבין מכך שאינכם צריכים לדאוג לסדר הקריאה של הנכסים, כלומר באפשרותכם לשנות את סדר שורות 2-6 והקוד יעבוד בדיוק אותו דבר.

רישום נכסים

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

ההרשמה מאפשרת לוורדפרס לדעת על אותם נכסים, כאשר enqueueing מוסיף את אלו בפועל באתר שלכם. הנה גירסה אלטרנטיבית להוספת Owl Carousel:

function my_assets() {
	wp_register_script( 'owl-carousel', get_stylesheet_directory_uri() . '/owl.carousel.js', array( 'jquery' ) );
	wp_enqueue_script( 'owl-carousel' );
}

add_action( 'wp_enqueue_scripts', 'my_assets' );

אך הפונקציה wp_enqueue_script() מבצעת את את ההרשמה בעצמה אם לא עשיתם זאת בעצמכם. אז מדוע להשתמש בשתי פונקציות כשבעצם רק אחד מספיק?

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

נניח ולשורטקוד מסויים שיצרתם דרוש Javascript. אם תבצעו לו enqueue ותשייכו אותו להוק wp_enqueue_scripts כבדוגמה מעלה (שורה 6), הוא ייטען בכל עמוד ועמוד באתר שלכם, גם כשאותו שורטקוד אינו בשימוש.

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

לסיום חלק זה נאמר כי הפונקציות wp_register_scripts ו wp_register_styles חולקות את אותם פרמטרים כמו המקבילות שלהן בפונקציות ה enqueueing. עם זאת, במידה והחלטתם לבצע רישום, באפשרותכם להוסיף אך ורק את ה handle בעת השימוש בwp_enqueue_script.

הסרת נכסים

לוורדפרס גם פונקציות dequeueing המאפשרת לבטל טעינה של קבצים ונכסים מתבניות או תוספים:

  • wp_deregister_script()
  • wp_deregister_style()
  • wp_dequeue_script()
  • wp_dequeue_style()

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

function my_assets() {
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', get_template_directory_uri() . '/jquery-latest.js' );
}

add_action( 'wp_enqueue_scripts', 'my_assets' );

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

כיצד למנוע טעינה של נכסים הנקראים על ידי תוסף?

נניח ותרצו למנוע מתוסף כלשהו טעינה של CSS מסויים, זהו תהליך מאד פשוט ברגע שאת יודעים מה ה handle בו משתמש התוסף לקרוא לאותו קובץ. נניח ותוסף כלשהו קורא ל fontawesome.css בכדי לטעון Icon Fonts של FontAwesome.

עליכם למצוא בקבצי הפלאגין את ה handle בו הוא משתמש עבור ה CSS של fontawesome ולהסיר אותו בצורה הבאה (functions.php):

function my_assets() {
    /*** Replace handle with FontAwesome handle ***/
	wp_deregister_style( 'handle' );
}
add_action( 'wp_enqueue_scripts', 'my_assets' );

אז באופן כללי, ניתן להשתמש בפונקציות אלו על מנת להסיר נכסים שאינם נחוצים מתבניות ומתוספים כאלו ואחרים.

לסיכום

אני מאמין שאתם מבינים עד כמה הוספת נכסים (enqueueing) בצורה הנכונה הוא תהליך חשוב. התהליך מסיר מכם את הצורך לתחזק את התלות בין הנכסים בעצמכם ומאפשר לכם להוסיף ולנהל אותם בצורה מודולרית.

enqueueing נדרש בכל התבניות והתוספים של וורדפרס. התבנית או התוסף שלכם לא יאושרו בריפוסיטורי של וורדפרס ובחנויות פרימיום ללא שימוש בתהליך זה. הוא נועד בכדי ״לשחק יפה״ ולמנוע התנגשויות עם תוספים של מפתחים אחרים המותקנים באתר שלכם וחשוב שכל מפתח וורדפרס יעבוד בצורה הזו.

אם אהבתם את המאמר אני מניח שתהנו מהמדריך המסביר כיצד לעכב פריסת Javascript באתרי וורדפרס ולשפר את זמן הטעינה. הרגישו חופשי להגיב בתגובות מטה.. 🙂

רועי יוסף
רועי יוסף

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

5תגובות...
  • יהודה 5 ביוני 2017, 12:05

    תודה על עוד מדריך מעולה – מפורט במידה, מקצועי מאוד ויחד עם זה נגיש לכל הרמות. שאלה שנתקלתי בה לאחרונה: מה הדרך המומלצת להוסיף JS לדף *ספציפי*?

    יש תוספים מתאימים – אבל לא ממש מוצלחים. הדרך בה בסוף בחרתי היא שימוש ב – conditional tags, ואם התנאי מתקיים אז מתבצעת הקריאה ל-wp_enqueue_script.

    אבל אני לא מת על זה… התנאי שבחרתי הוא לפי ה – slug של הדף, והוא עלול להשתנות. גם על ID אני לא סומך לטווח ארוך, והוא גם לא ממש מבהיר לי באיזה דף מדובר רק ממבט על ה-ID. הכי הייתי רוצה לשלוט בזה דווקא דרך ה-ADMIN ולא דרך הקוד, כי אז רואים ממש בעיניים מהם הסקריפטים שכל דף קורא להם.
    מכיר דרך מומלצת להוספת נכסים כזו?

    תודה 🙂 יהודה

השאירו תגובה

פעימות