Search

הוספת נכסים (קבצי 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 באתרי וורדפרס ולשפר את זמן הטעינה. הרגישו חופשי להגיב בתגובות מטה.. 🙂

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

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

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

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

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

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

    תודה 🙂 יהודה

    • רועי יוסף 5 יוני 2017, 12:24

      היי יהודה, תודה 🙂

      הדרך הנכונה היא כפי שאתה מבצע, conditional tag לפי ה slug. אני חושב שאתה צריך לסמוך על ה slug לטווח ארוך.. אין לשנות אותו בעיקרון לאחר שנקבע.

      ניתן לבצע זאת דרך האדמין באמצעות advanced custom fields לדוגמא אך זו לא הדרך הנכונה והיא מאד מסורבלת. השאר בדרך בה אתה עושה זאת. אין לי תוסף מומלץ שמבצע זאת בצורה פשוטה בארסנל..

      • יהודה 5 יוני 2017, 13:10

        תודה על התשובה!
        וגם אם לא למדתי ממנה משהו חדש, לפעמים סתם כיף לשמוע שאתה עושה דברים נכון 🙂

      • יהודה 9 יוני 2017, 19:33

        בהמשך לנ"ל: עליתי על שני תוספים שמאפשרים שליטה גרנולרית בסקריפטים וסטיילים, פר סקריפט/סטייל ופר פוסט/קטגוריה וכו'. האחד חינמי, ונראה שעובד רק על פלאגינים (טוען את הפלאגין רק בעמודים שצריך):

        https://wordpress.org/plugins/plugin-organizer

        השני בכסף, ונראה שמאפשר כנראה שליטה טובה אף יותר:

        https://tomasz-dobrzynski.com/wordpress-gonzales

        שניהם מהסעיף האחרון במאמר התותחי של סמאשינג:

        https://www.smashingmagazine.com/2017/06/better-faster-optimized-wordpress-websites

        לא בטוח אם יתאימו לצרכיי, אבל טובים לשימוש בכל מקרה 🙂

        • רועי יוסף 10 יוני 2017, 1:00

          אני משתמש ב Plugin Organizer … כתבתי על כך גם מאמר ואני ממליץ על הפלאגין בחום 🙂

  • אלון גולדמן 31 דצמבר 2018, 17:15

    היי, משהו שחשוב להוסיף:

    אפשר לרשום נכסים ולהוסיף אותם רק במידת הצורך – אבל אי אפשר להוסיף נכסים בtemplate כלשהי. (אפשרי, אבל עובד רק חלק מהפעמים, ועושה בעיות). לכן אם רוצים להוסיף נכסים ספציפיים שלא יטענו בכל האתר, אלא רק בדפים מסויימים – אפשר בתוך קובץ functions.php להוסיף תנאים, למשל:

    if (is_singular()) { ... }

    לכל התנאים הלוגיים אפשר לראות כאן:
    https://codex.wordpress.org/Conditional_Tags

    חוץ מזה, תודה על הפוסט! עזר לי מאוד!

    • רועי יוסף 31 דצמבר 2018, 17:35

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

      תודה! 🙂

  • שני 6 מרץ 2019, 0:29

    "נניח ותרצו למנוע מתוסף כלשהו טעינה של CSS מסויים, זהו תהליך מאד פשוט ברגע שאת יודעים מה ה handle" – מה זה ואיך מוצאים את ה handle?
    תודה!

    • רועי יוסף 6 מרץ 2019, 1:10

      היי שני 🙂

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

      	wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array( 'reset' ) );

      במקרה הזה, ה handle הוא theme-style.

  • רוב 16 יוני 2019, 12:19

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

    function my_assets() {
    	wp_deregister_style( 'zien_fonts-css' );
    }
    
    add_action( 'wp_dequeue_style', 'my_assets' );

    zien_fonts-css זה ה-ID שיש בו את הקריאה לגוגל פונט.

    • רועי יוסף 16 יוני 2019, 13:57

      לא – הקוד הנכון הוא:

      function my_assets() {
      	wp_deregister_style( 'zien_fonts-css' );
      }
      
      add_action( 'wp_enqueue_scripts', 'my_assets' );
      • רוב 16 יוני 2019, 14:07

        תודה, בתוך הפונקציה אני יכול להוסיף עוד קריאות כמו:

        wp_deregister_style( 'zien_fonts-css' );

        ולשנות את ה-ID למה שצריך?

  • עדי 5 יולי 2020, 14:36

    סליחה על הבורות המוגזמת שלי,

    אבל איפה אני מוסיפה את זה? מתוך הלוח בקרה של וורדפרס לאן אני צריכה ללכת? או בקבצים של השרת? כי בתכלס יש לי את ה html, css, js ואין לי מושג איפה אני שמה אותם…

    אם זה ארוך ולא קשור אשמח גם כן לדעת:)

    • רועי יוסף 14 יולי 2020, 2:33

      היי עדי 🙂
      סליחה על התגובה המאוחרת, אנא חדדי את השאלה – מה את מנסה בדיוק לעשות (מה מטרתך)?

  • עדי 17 ינואר 2021, 12:14

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

    • רועי יוסף 17 ינואר 2021, 14:13

      היי עדי,

      תוסיפי את הקוד הבא בקובץ functions.php של התבנית שלך והכניסי את הסקריפט שקיבלת היכן שסימנתי. בהצלחה!

      function add_activetrail_script() {
      
          //    הכניסי כאן את הסקריפט
          
      }
      add_action( 'wp_head', 'add_activetrail_script' );
      • עדי 17 ינואר 2021, 19:54

        כמו שאמרתי לא ממש מבינה בקוד.. איך אני מגיעה לקובץ functions.php של התבנית? אתה אולי מכיר את אקטיב טרייל ויודע לעזור לי עם זה? – אני מנסה להטמיע פופ-אפ אבל פעם שעברה זה עשה לי בעיות באתר- אשמח לדעת איך אני יכולה לשים את הקוד מבלי לפגוע בדברים אחרים באתר, ובמידת הצורך איך להחזיר את האתר למה שהוא היה לפני הקוד..

        • רועי יוסף 17 ינואר 2021, 19:56

          שלחי לי דרך עמוד צור קשר הודעה ואעזור לך…

  • אודליה גבאי 14 מרץ 2023, 18:34

    היי רועי,
    אשמח לדעת איך אוכל לשנות תצוגת תאריך של תיבת Date
    כשהמשתמש מזין תאריך בתיבה ואני רוצה להציג את זה בדף זה מציג לי את התאריך הפוך.
    תודה מראש!

    • אודליה גבאי 14 מרץ 2023, 18:35

      סורי נחתכה ההודעה התכוונתי לתגית

      <input type="date">

תגובה חדשה

ניווט מהיר

Up!
לבלוג