שימוש בפונקציות gettext בקבצי JavaScript

WordPress משתמשת בספריית הקוד הפתוח gettext על מנת לאפשר לוקליזציה של הקוד שלה וכך לאפשר לתרגם אותה בקלות וביעילות. כאשר מפתחים תוספים או תבניות חשוב להשתמש בפונקציות ה-gettext על מנת לאפשר תרגום שלה ולאפשר שימוש באתרים רב לשוניים.

פונקציות ה-gettext המוכרות הן בעיקר _e ו-__, אך פונקציות אלו עובדות אך ורק ב-PHP, אז מה נעשה כאשר נצטרך להכניס מחרוזות טקסט בקבצי JavaScript?

דרכים לפתרון בעיית לוקליזציה ב-JavaScript

דרך א׳ – לא מומלצת

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

שימוש ב-Inline JavaScript אינו מומלץ מכיוון שהוא לרוב לא מאפשר לבצע אופטימיזציה טובה של האתר מכיוון שלא ניתן לאחד את קוד ה-JavaScript לקובץ אחד, דבר שמאט את עליית העמוד.

דוגמא להמחשה:

<script>
  var _myMessage = '<?php _e( 'Hello World!', 'dorzki' ); ?>';
</script>

דרך ב׳ – הדרך הנכונה ביותר

הדרך הנכונה היא לבצע הפרדה בין קבצי ה-JavaScript לבין ה-PHP ולבצע קישור בין השניים ע״י הדפסה של אובייקט JSON דרך PHP ע״י שימוש בפונקציה wp_localize_script.

שימוש ב-wp_localize_script

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

function dorzki_enqueue_script() {
  
  wp_enqueue_script( 'dorzki-js', get_template_directory_uri() . '/assets/js/scripts.js', false, '1.0.0', true );

  wp_localize_script( 'dorzki-js', 'langObj', array( 
    'greeting' => __( 'Hello World', 'dorzki' )
  ) );

}

add_actions( 'wp_enqueue_scripts', 'dorzki_enqueue_script' );

חשוב לשים לב כי מזהה הסקריפט חייב להיות זהה למזהה הסקריפט שקבענו כאשר רשמנו את הסקריפט על מנת ש-WordPress תדע להדפיס את האובייקט לפני הסקריפט על מנת שנוכל להשתמש בו בסקריפט שלנו.

אם נרענן את הדף ונצפה במקור נוכל לראות כי WordPress הדפיסה לפני הקישור לקובץ סקריפט שלנו את הקוד הבא:

<script type='text/javascript'>
/* <![CDATA[ */
var langObj = { "greeting" : "Hello World" };
/* ]]> */
</script>

כעת, נוכל להעתיק את קוד ה-JavaScript שלנו לקובץ חיצוני ולהשתמש באובייקט שהגדרנו, langObj, על מנת לגשת למחרוזות טקסט שהגדרנו.

var _myMessage = langObj.greeting;

סיכום

wp_localize_script היא פונקציה חזקה מאוד אשר מאפשרת לנו להעביר מידע בין קוד ה-PHP שלנו לבין הקוד JavaScript שלנו, זה יכול להיות מחרוזות טקסט לתרגום, וזה יכול להיות פרמטרים אחרים כגון פלט של אלגוריתם מסויים או כל דבר אחר – בקיצור, השמיים הם הגבול!

בנימה זאת אאחל לכם גמר חתימה טובה!