שילוב Weglot ב- WordPress: יתרונות ואתגרים

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

מבוא

במאמר זה אחלוק את החוויה שלי בהתקנת Weglot באתר WordPress שבו כבר היה מותקן Polylang. כאשר מתכננים אתר בשפות שונות, יש לקחת בחשבון לא רק את התרגום של הטקסטים, אלא גם את התאמתם לעיצוב, לתפריטים ולפריסה הכוללת של האתר, מה שמקשה את ההתאמה באתרים המשלבים שפות LTR ו-RTL כמו אנגלית ועברית.

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

קצת על התוסף

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

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

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

המקרה שאיתו התמודדתי

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

כאשר מתרגמים אתר, ישנם כמה היבטים שיש לקחת בחשבון:

  1. פיתוח – הקמה וסנכרון של כל עמודי האתר כך שיהיו מותאמים לכל שפה בצורה מושלמת.
  2. תרגום התוכן – יש לתרגם את כל עמודי האתר באופן מקצועי לשפות הנבחרות, מה שמצריך מתרגמים וכותבי תוכן לשפות היעד.
  3. קופי ומיקרו-קופי חבוי – בכל אתר ישנם טקסטים חבויים, כמו הודעות שגיאה בעת שליחת טופס או הודעות בלולאות פוסטים המופיעות רק במצבים מסוימים (כמו הודעה על כך שלא נמצאו פוסטים בקטגוריה וכדו׳). כשעוסקים במלאכת התרגום, חשוב מאוד לוודא שכל מחרוזת טקסט באתר תתורגם, גם אם מדובר בטקסט שולי המופיע רק במצבים מסוימים.

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

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

ולגבי תרגום הטקסט, במקום לתרגם את התוכן ידנית, Weglot מתרגם את כל האתר אוטומטית לשפות הרצויות, מה שחוסך את הצורך באנשי מקצוע לתרגום ידני של כל פיסת טקסט באתר. אז נכון, כשמדובר באתר קטן עם מספר עמודים בודדים, זו לא בעיה לתרגם את האתר ידנית, אבל כשמדובר באתרים גדולים מרובי עמודים, (ובמקרה שלי מעל 100 עמודים) ועם כמה וכמה סוגי CPT – התרגום הידני יכול להיות עבודה סיזיפית המצריכה זמן ותקצוב גבוה.

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

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

התקנת התוסף

השלב הראשון בהתקנת התוסף הוא הרשמה באתר של Weglot. לאחר ההרשמה, מקבלים גישה להורדת התוסף. באזור המשתמש ב- Weglot נעתיק את ה-API Key המופיע תחת Projects < Setup.

API Key בממשק Weglot

את ה-API, נדביק בעמוד הגדרות התוסף בוורדפרס.

API Key בדשבורד וורדפרס

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

כך הוספנו את השפות ב-Weglot. שימו לב שהשפה העברית הוחרגה, ובהמשך אציג כיצד לבצע החרגת שפות.

ממשק הוספת שפות ב-Weglot

החרגת העברית

בעת עבודה עם תוספים כמו Polylang ו-WPML, יש צורך ביצירת עמוד משוכפל עבור כל שפה. עבור שפות LTR התהליך הוא די פשוט, מכיוון שהשכפול מתמקד בעיקר בתרגום הטקסט ולא דורש שינויים בעיצוב. לעומת זאת, Weglot פועל בצורה שונה – הוא לא נוגע בפריסת העמודים או בעיצוב, אלא רק במחרוזות הטקסט. לכן, כאשר מוסיפים שפה חדשה ב-Weglot, אנו תמיד נשארים עם עמוד מעוצב אחד בלבד לכל השפות.

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

כך ביצענו את ההחרגה:

החרגת שפות ב-Weglot

אוטמטית מתווסף CSS ייעודי המטפל בכיוון וביישור עבור השפה העברית:

html[lang="he-IL"] body {
       direction: RTL!important;
       text-align: right!important;
}
html[lang="he-IL"] .left {
      text-align: right!important;
}

בדרך זו, מנענו מ-Weglot להתערב בטיפול בשפה העברית.

כעת יש לנו שתי אפשרויות לגבי הצגת השפה העברית:

  1. לבנות את האתר מחדש על דומיין (או סב-דומיין) נפרד עבור העברית.
  2. להשתמש בטמפלטים נפרדים לשפה העברית באתר הנוכחי.

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

מחליף השפות

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

כדי לערוך את סוויצ׳ר השפות ב-Weglot, יש לגשת לאזור ההגדרות של התוסף תחת Language Switcher וללחוץ על Switcher Editor. משם נגיע לממשק עריכה המאפשר לנו להתאים את מיקום הסוויצ׳ר ולעצב אותו בהתאם לאתר שלנו.

ממשק מחליף השפות ב-Weglot

השליטה במיקום הסוויצ׳ר בהדר מתבצעת על ידי לחיצה על כפתור הוספה (+) ולאחר מכן הזזה שלו למיקום הרצוי. לדוגמה, אם נרצה למקם את הסוויצ׳ר בסוף ההדר, נלחץ על כפתור ההוספה, ומיד יופיע לנו הסוויצ׳ר במרכז העמוד. כעת ניתן לגרור אותו למקום הרצוי. לאחר שמיקמנו אותו באזור הרצוי, Weglot מזהה באופן אוטומטי את הקלאס של האלמנט בו מיקמנו את הסוויצ׳ר.

במקרה שלי, היה קיים כפתור בסוף ההדר, כך שהמערכת שייכה את הסוויצ׳ר באופן אוטומטי ולפי המיקום שקבעתי לאחר הכפתור, כאלמנט בתוך הקלאס העוטף של הכפתור, וכאילו הסוויצ׳ר היה חלק מהכפתור, דבר שלא היה רצוי מבחינתי. לכן כדי לשלוט בתקינות המיקום המדויק, הוספתי קלאס ייחודי, בשם: for-weglot-switcher-white, כך:

קביעת קלאס שבו יושב מחליף השפה

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

קונטיינר שבו יושב מחליף השפה

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

קונטיינר שבו יושב מחליף השפה

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

הדר נוסף באתר והדר במובייל

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

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

הצגת העברית במחליף השפות

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

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

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    var checkExist = setInterval(function() {
        var weglotSwitcherDesktop = document.querySelector('#weglot-switcher-1 .language-list');
        var weglotSwitcherMobile = document.querySelector('#weglot-switcher-2 .language-list');
      // Desktop  
if (weglotSwitcherDesktop) {
            if (!document.querySelector('#weglot-switcher-1 .language-option a[aria-label="HE"]')) {
                var hebrewLinkDesktop = document.createElement('div');
                hebrewLinkDesktop.classList.add('language-option');
                var hebrewAnchorDesktop = document.createElement('a');
                hebrewAnchorDesktop.href = 'https://www.commbox.io/he/';
                hebrewAnchorDesktop.innerText = 'HE';
                hebrewAnchorDesktop.style.color = 'rgb(0, 0, 0)';
                hebrewAnchorDesktop.target = '_blank';
                weglotSwitcherDesktop.appendChild(hebrewLinkDesktop);
                hebrewLinkDesktop.appendChild(hebrewAnchorDesktop);
            }
        }
        // Mobile
        if (weglotSwitcherMobile) {
            if (!document.querySelector('#weglot-switcher-2 .language-option a[aria-label="HE"]')) {
                var hebrewLinkMobile = document.createElement('div');
                hebrewLinkMobile.classList.add('language-option');
                var hebrewAnchorMobile = document.createElement('a');
                hebrewAnchorMobile.href = 'https://www.commbox.io/he/';
                hebrewAnchorMobile.innerText = 'HE';
                hebrewAnchorMobile.style.color = 'rgb(0, 0, 0)';
                hebrewAnchorMobile.target = '_blank';
                weglotSwitcherMobile.appendChild(hebrewLinkMobile);
                hebrewLinkMobile.appendChild(hebrewAnchorMobile);
            }
        }
        if (weglotSwitcherDesktop || weglotSwitcherMobile) {
            clearInterval(checkExist);
        }
    }, 1000);
});
</script>

סיכום

ל-Weglot, כמו לכל תוסף, יש יתרונות וחסרונות.

היתרונות המרכזיים:

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

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

ההמלצה שלי: באתרים שאינם משלבים שפות LTR ו-RTL כמו עברית, Weglot הוא פתרון מצוין ואף מומלץ. כאשר משלבים שפות LTR ו-RTL, יש לבחון כל מקרה לגופו כדי להעריך אם התוסף מתאים. במקרה שלי, למרות האתגרים, הוא עדיין הביא פתרון.

תוכן העניינים