הוספת קבצי CSS ו-JavaScript לתבנית וורדפרס

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

לפני שניגש לחלק העיקרי, אערוך לכם היכרות קצרה עם 2 פונקציות חשובות שנשתמש בהן בהמשך:
1. get_stylesheet_directory_uri() – מחזירה את הנתיב של תבנית הבת שלנו.
2. get_template_directory_uri() – מחזירה את הנתיב של תבנית האם שלנו.

קדימה, לתכל'ס 🙂
על מנת להוסיף קבצי CSS ו-JavaScript לתבנית וורדפרס באופן תקין יש להשתמש ב-2 פונקציות:
wp_enqueue_style עבור קבצי CSS
wp_enqueue_script – עבור קבצי JaveScript

השימוש בפונקציות הנ"ל מתבצע בדף functions.php שבתיקיית התבנית שלנו.

wp_enqueue_style

הפונקציה wp_enqueue_style מאפשרת לנו לכלול קבצי CSS בתבנית הבת שלנו והיא מקבלת מספר פרמטרים.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

handle – שם קובץ ה-CSS, פרמטר חובה ובנוסף הוא חייב להיות יחיד, אסור לתת את אותו השם פעמיים!
src – נתיב הקובץ, פרמטר חובה.
deps – מערך של שמות הקבצים שבהם הקובץ יהיה תלוי, כלומר לא ייטען לפני שהם ייטענו, פרמטר אופציונלי.
במידה ואין תלות משאירים את המערך ריק: array().
ver – מספר גרסא של הקובץ, פרמטר אופציונלי.
media – סוג המדיה כגון "screen", "print". ערך דיפולטיבי: "all". פרמטר אופציונלי.
במידה ולא מעוניינים לרשום את מספר הגרסא יש לתת ערך false.

function my_custom_style() {
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . 'css/my_style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'my_custom_style' );

אז מה בעצם עשינו כאן?
יצרנו פונקציה בשם my_custom_style, בתוכה ביצענו קריאה לפונקציה wp_enqueue_style עם הערכים של קובץ ה-css שלנו.
לאחר מכן הוצאנו את הפונקציה לפועל.
מה בפועל יקרה? קובץ ה-CSS שלנו (my_style.css) אשר נמצא בתיקיית css בתוך תיקיית תבנית הבת שלנו יתווסף אל ה-head של האתר שלנו.
אם נרצה למשל להוסיף את קובץ ה-CSS שלנו לדפי מערכת הניהול, נשתמש ב-admin_enqueue_scripts במקום ב-wp_enqueue_scripts בשורה מספר 4.

כיצד נסיר קובץ css?
בבקשה:

dequeue_css_file()  {
	wp_dequeue_style( 'slide-css' ); 
}
add_action('wp_print_styles', 'dequeue_css_file', 100);

הקוד הנ"ל יסיר קובץ שה-handle שלו הוא slider-css.

wp_enqueue_script

הפונקציה והשימוש מאוד דומה לפונקציה wp_enqueue_style.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

כפי שניתן לראות, מלבד הפרמטר האחרון, הכל זהה.
הפרמטר in_footer – ערך true יקבע כי הקריאה לסקריפט תמוקם בתחתית הדף שלנו.
למה זה טוב? כאשר קובץ נטען בראש הדף, הוא מעכב את טעינת ה-DOM שלנו מה שעלול לפגוע במהירות טעינת האתר וה-SEO של האתר שלנו.
פרמטר זה הוא אופציונלי וערך ברירת המחדל הוא false.

דוגמא:

function my_custom_script() {
  wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my_script.js', array ( 'jquery' ), 1.3, true);
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' );

בדוגמא הנ"ל, טענו קובץ בשם my_script.js שנמצא בתיקיית js בתיקיית תבנית הבת שלנו.
בנוסף הקובץ שלנו תלוי ב-jquery ולכן ציינו זאת בפרמטר deps, גרסתו היא 1.3 והוא ייטען בתחתית הדף.

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

כמובן לא אסיים לפני שאראה לכם כיצד להסיר קובץ JS קיים:

function dequeue_script_file() {
   wp_dequeue_script( 'slider-js' );
}
add_action( 'wp_print_scripts', 'dequeue_script_file', 100 );

הקוד הנ"ל יסיר קובץ JS שה-handle שלו הוא slider-js.

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *