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

על הדרך להוספת קבצי Javascript ו- CSS באתר וורדפרס באמצעות enqueueing

רבים מאיתנו משתמשים ב css על מנת לשנות את מראה האתר, וב javascript על מנת לשפר ולהוסיף פונקציונליות כזו או אחרת. חשוב לדעת, כי הדרך בה אתם מוסיפים נכסים אלו בוורדפרס חשובה לא פחות מתוכן הקבצים עצמם. במקום להניח אותם ב header או ב footer, עלינו להשתמש בפונקציונליות המובנית של וורדפרס הנקראית enqueue. במדריך זה אסביר כיצד להוסיף נכסים הלא הם קבצי css ו javascript לאתר וורדפרס.

מה זה בעצם enqueueing ?

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

באמצעות enqueueing, אנו אומרים לוורדפרס על אותם נכסים שאנו רוצים לטעון והיא תדאג כבר למקם אותם ב header וב footer. אתם יכולים אפילו לציין תלות (dependency) של script או style כזה במשנהו ווורדפרס תטען אותם בסדר המבוקש.

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

השורה התחתונה

לא משנה כיצד אתם משייכים את אותם נכסים, התוצאה הסופית תהיה תגיות script או link איפשהו ב html של האתר. הקוד הבא הינו דוגמא לשלושה סקריפטים ושני קבצי css הנטענים באתר:

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

שימוש נכון ב enqueueing להוספת נכסים (קבצי javascript וקבצי css)

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

על קוד זה להיות בקובץ functions.php של התבנית, תבנית הבת או קובץ התוסף שלכם. שימו לב כי גם קבצי ה css וגם קבצי ה javascript מתווספים על ידי שיוך פונקציה להוק wp_enqueue_scripts.

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

הנכס השלישי שהוספנו הינו Owl Carousel שאני נורא אוהב. בפרמטר השלישי הגדרנו כי נכס זה תלוי ב jquery. אין לנו צורך לבצע enqueue ל jquery מכיוון וזה כבר מבוצע אוטומטית על ידי וורדפרס.

תנו מבט ב WordPress Codex על מנת לראות אילו נכסים כלולים כבר עם וורדפרס.

על הדרך, הצטרפו לרשימת התפוצה !

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

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

על enqueueing בהרחבה

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

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

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

רישום נכסים

למעשה, ישנם שני שלבים לבצע על מנת להוסיף נכס, אך הפונקציה wp_enqueue_script() יכולה לבצע זאת בשלב אחד. טכנית, נכסים קודם נרשמים ורק אחר כך מתבצע enqueue. הרשמה מאפשרת לוורדפרס לדעת על אותם נכסים, כאשר enqueueing מוסיף את אלו בפועל באתר שלכם. הנה גירסה אלטרנטיבית בכדי להוסיף את Owl Carousel:

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

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

הפונקציות wp_register_scripts() ו wp_register_styles() חולקות את אותם פרמטרים כמו המקבילות שלהן בפונקציות ה enqueueing. ההבדל היחידי בינהן הוא שפונקציות ה enqueueing מאפשרת לכם לקבוע רק את ה handle במידה ואותם נכסים כבר רשומים.

הסרת נכסים

לוורדפרס גם פונקציות dequeueing עבור נכסים:

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

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

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

לסיכום

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

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

אם ישנם שאלות והערות הרגישו חופשי להגיב בתגובות מטה.. 🙂

רועי יוסף

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

תגובות פייסבוק

{ 5 תגובות… הוסף אחת }
  • יהודה 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 לדוגמא אך זו לא הדרך המכונה והיא מאד מסורבלת. השאר בדרך בה אתה עושה זאת. אין לי תוסף מומלץ שמבצע זאת בצורה פשוטה בארסנל..

השאירו תגובה

כבר הולכים ? הרשמו לרשימת התפוצה !

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

לעולם לא נשתף את הפרטים שלכם...