לוקליזציה של JS בוורדפרס

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

כשלוחצים על “לתחומי לימוד נוספים”, נפתחת רשימת תחומי לימוד, והמלל “לתחומי לימוד נוספים” הופך להיות “צמצום תחומי הלימוד”:

אז בהתחלה, ניסיתי לכתוב בתוך footer.php הגדרות של משתנים ע”י משיכה מ-PHP, אבל זה לא עבד – המחרוזות היו ריקות תמיד. המשכתי לנסות בכל מיני אופנים בעצמי, כי לא חשבתי שאצליח למצוא משהו באינטרנט על זה – לא חשבתי שיש עוד אנשים שאכפת להם מלוקליזיצה עד כדי כך. אבל בסוף, אחרי שכל האופנים שניסיתי לא עבדו, החלטתי לשאול את ד”ר גוגל – אם לא יועיל, לא יזיק.
וד”ר גוגל כדרכו לא הכזיב. הוא שלח אותי למאמר הזה, ושם הראו בפשטות איך אפשר ליצור משתנים של JS בתוך functions.php, ולקרוא להם מתוך JS. ואכן כך עשיתי:
בפונקציה שיושבת על ה-hook של wp_enqueue_scripts, הוספתי את שורות הקוד הבאות:

// get strings from language files, and put them into javascript variables 
$params = array( 'sOpenDisciplines' => __("open disciplines", "singalovsky"), 
                  'sCloseDisciplines' => __('close disciplines', 'singalovsky'), ); 
// create inline definitions of these vars, for use in the script.js file 
wp_localize_script('my-theme-script', 'MyScriptParams', $params);

קודם כל הגדרתי מערך php שבתוכו שני איברים, כל איבר הוא מחרוזת תרגום בעברית שאני רוצה להעביר ל-JavaScript.

דבר שני , קראתי ל-wp_localize_script. הקריאה הזו דורשת כמה פרמטרים:

1. 1. הפרמטר הראשון ב-wp_localize_script הוא השם של הסקריפט שאנחנו מוסיפים בדף. זה ידוע בכינוי handle, והוא הפרמטר הראשון שמעבירים לפונקציה wp_enqueue_script. כך למשל:

      wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array( 'jquery', 'jQuery-ui' ), 1, TRUE );

      הפרמטר הראשון הוא ‘my-theme-script’, ולכן זה הפרמטר הראשון שצריך להעביר ל-wp_localize_script. אם נשנה את השם ל-‘landing-page-js’ למשל, צריך לשנות את זה בקריאות לשתי הפונקציות wp_enqueue_script ו- wp_localize_script.

   2. הפרמטר השני הוא שם האובייקט שייווצר ב-JavaScript, שבתוכו יהיו המחרוזות שאנחנו מעבירים מ-PHP. במקרה שלנו קראתי לו MyScriptParams .
   3. הפרמטר השלישי הוא מערך המחרוזות עצמו. זה המשתנה $params , שאותו הגדרתי ראשון בקוד לעיל.

מה שנוצר בדף ה-HTML זה הקוד הבא:

<script type='text/javascript'>
/* <![CDATA[ */
    var MyScriptParams = {
       "sOpenDisciplines":"\u05dc\u05ea\u05d7\u05d5\u05de\u05d9 \u05dc\u05d9\u05de\u05d5\u05d3 \u05e0\u05d5\u05e1\u05e4\u05d9\u05dd",
        "sCloseDisciplines":"\u05e6\u05de\u05e6\u05d5\u05dd \u05ea\u05d7\u05d5\u05de\u05d9 \u05d4\u05dc\u05d9\u05de\u05d5\u05d3"
    };
/* ]]> */
</script>

אנחנו רואים שאכן נוצר אובייקט בשם MyScriptParams, ושיש בתוכו המאפיינים sOpenDisciplines ו-sCloseDisciplines שהיו במשתנה $params.

כעת אני יכולה לפנות אליהם מקובץ ה-JS:

  $("#moreTracks").html(MyScriptParams.sOpenDisciplines);

ובא לציון גואל 🙂