הדרך המסורתית לטעינת קבצי JS ו-CSS בקובץ html היא באמצעות תגית script תוך ציון src או link תוך ציון rel="stylesheet". בוורדפרס, על מנת לאפשר שליטה טובה יותר במיתוג סקריפטים וקבצי סגנון בעמודים מסויימים, ובכלל להכניס את כל הקבצים למנגנון ניהול מרכזי, משתמשים במחסנית queue, שבה מציבים את כל הקבצים שרוצים, ובזמן אתחול העמוד, עובר מנהל הסקריפטים על כל מה שנמצא בתור הזה וטוען אותו אוטומטית. כלומר, אם אני מעוניין להגדיר סקריפט (לדוגמה) שייטען מראש, אני קורא לו בשם ורושם אותו באמצעות wp_register_script, ואז מכניס את הסקריפט שכעת יש לו שם לתור באמצעות wp_enqueue_script. אם משהו כבר הוכנס בשלב כלשהוא לתור, ואני רוצה להסיר אותו בעמוד מסוים או בכלל, אני יכול גם להסיר באמצעות wp_dequeue_script. בסופו של דבר, בזמן טעינת האתר, כשהשרת מרכיב את רכיב ה-head, הוא יעבור על התור שיש לו וירכיב רשימת תגיות script עם הסקריפטים שרשומים לו.

ראוי להזכיר שב-core של וורדפרס יש לא מעט ספריות שכבר רשומות וכל מה שצריך אם רוצים לטעון אותן זה לקרוא להן. חלקן כבר נטענות כברירת מחדל (בממשק האדמין, המוני המונים), ואם אני רוצה לבטל אותן אני צריך לעשות מבעוד מועד dequeue. בממשק הפרונט של האתר, בד"כ אין טעינה אוטומטית של סקריפטים – מה שמצריך את המתכנת לשלב ספריות בעצמו. כך, לדוגמה, אם הוא רוצה להשתמש ב-jquery, הוא שם בתיקיה המיוחדת ל-js את הגרסה שהוא הוריד ומפנה ידנית לקובץ, או שמציב לינק ל-cdn. כמובן, וזה מיותר להזכיר, את כל ההצבה וההסרה של סקריפטים (וכאמור, קבצי סטייל) עושים בשלב מחזור החיים של לפני טעינת העמוד, כלומר בשלב ה-functions.php.

זה המצב הקיים – שגורם לכמה "בעיות":
א. יותר מדי שורות קוד לטעינה של סקריפטים וקבצי סטייל, יותר מדי פעמים שצריך לכתוב enqueue script.
ב. מחסור ב-reusability של משאבים שגם ככה מותקנים באתר, אז בשביל מה להתקין עוד ועוד עותקים וגרסאות של jquery, jquery-ui וכו'? בטח, כשהדבר יכול לגרום בשלב זה או אחר לקונפליקטים (כל פלאגין הרי משתמש בעותק שלו של jquery…)

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

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

 global $scriptsArray;
scripts::theme_scripts($scriptsArray);

בשביל הסדר הטוב אני מגדיר את המערך בקובץ ה-config שטענתי הרי מראש בפקודה הראשונה בקובץ functions.php.

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

add_action('admin_init', scripts::admin_custom_css() ); 

class scripts {

    public static function theme_scripts($array=array()) {
/*
        wp_enqueue_style('bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
        wp_enqueue_script('bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js', array(), '1.0.0', true);
*/
        scripts::loadScripts(array(),VIEWS_PAGES,"css");
        scripts::loadScripts(array(),VIEWS_GLOBALS."css/","css");
        scripts::loadScripts(array(),VIEWS_GLOBALS."js/","js");
        scripts::loadScripts($array,"","");
    }

    public static function admin_custom_css()
    { 
        wp_enqueue_style( 'rtl', get_template_directory_uri().'/rtl-admin.css');                
    }
    
    public static function loadScripts($array,$dir,$suffix) {        
        $files = scandir(TEMPLATEPATH.$dir);

        foreach ($files as $file) {
            if (!($file == '.' || $file == '..')) {
                $fname = explode(".", $file);
                if($suffix=="css")
                    wp_enqueue_style($fname[0],get_template_directory_uri().$dir . $fname[0].'.'.$suffix);
                if($suffix=="js")
                    wp_enqueue_script($fname[0],get_template_directory_uri().$dir . $fname[0].'.'.$suffix,array(), '1.0.0', true);
            }
        }
        
        if(count($array))
        {
            foreach($array as $script)
            {
                $scripts=get_object_vars($GLOBALS['wp_scripts']);
                $scriptClass=$scripts['registered'][$script];
                $name=$scriptClass->handle;
                $src=$scriptClass->src;
                if (substr($src, 0,1)=='/')
                {
                    $src=  site_url().$src;
                }
                $deps=$scriptClass->deps;
                $ver=$scriptClass->ver;
                echo '';                
            }
        }
    }

}

הקלאס כולל כאמור כמה פונקציות סטטיות:

  • theme_scripts – שכוללת קריאה לספריות, או למערך. במידה ומדובר בספריה, היא מציינת את שמה והאם מדובר בסקריפטים או בקבצי סטייל. בדוגמה שנתתי ציינתי שלוש ספריות: ספריית קבצי ה-css הגלובלית של האתר, ספריית קבצי ה-js הגלובלית של האתר וספריית קבצי ה-css הייחודיים לעמודים שונים שהגדרתי. שלושת אלה בלבד, מפני שאני נוהג להגדיר בכל קלאס פר-קומפוננטה שאני עושה, גם קובץ סטייל וסקריפט ייחודיים לקומפוננטה שמופעלים רק במידה והקומפוננטה מופעלת (או תמיד, אך מתייחסים רק להאש הייחודי לקומפוננטה ולכן כשהקומפוננטה לא מופעלת, הם לא ישפיעו). רק אציין, במידה ומדובר במערך, היא סורקת את המערך, מחלצת את המיקום שבו הסקריפט נמצא וטוענת אותו בדרך המסורתית (כלומר, script src). הריצה הזאת על המערך או הקבצים מתבצעת בפונקציה loadScripts. אגב, הפונקציה הזאת היא גם מקום לשים לינקים ל-cdn, הדוגמה שנתתי היא אם תרצו לטעון את bootstrap ואין לכם חשק להוריד אותו ולשים בתיקיה של ה-css.
  • loadScripts – כאמור, "רצה" על אחד משניים: א. קבצים בספריה המפורטת, ב. סקריפטים/ספריות שכבר נמצאות ב-core והיא פשוט מחלצת את המיקום שלהן לפי שמן שהוגדר מראש, על פי הלינק לדוקומנטציה שניתן לעיל.
  • admin_custom_css – במידה ורוצים להגדיר הגדרות מיוחדות לתצוגת ממשק האדמין, לדוגמה, מה שנתתי: הגדרות rtl , עבור פלאגינים שונים שלא התחשבו בממשק עברית. מוסיפים לאקשן admin_init את הפונקציה הסטטית הזו, ובתוכה מגדירים אילו קבצים נרצה לטעון בטרם טעינת ממשק האדמין.

בדרך זו, של טעינה אוטומטית שמצטרפת לטעינה האוטומטית של קבצי הסטייל והסקריפט פר-קומפוננטה, לא צריך להסתבך עם קוד רב מדי כשרוצים להכליל קבצים מסוימים. רק כוללים את הקלאס הזה, וקוראים כאמור בהדר לפונקציה הסטטית theme_scripts (שיכולה גם להכניס פרמטר של מערך ריק או null)

כתיבת תגובה

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