תבנית וורדפרס בעברית היא תבנית שתומכת באמת בכיוון ימין-לשמאל (RTL): הפריסה מתהפכת נכון, התפריטים, הטפסים והאייקונים מתנהגים כמו שצריך, הגופן תומך בעברית, וכל המחרוזות ניתנות לתרגום. "תבנית שמתורגמת לעברית" ו"תבנית שבנויה לעברית" הם לא אותו דבר — תבניות רבות מציגות טקסט בעברית, אבל נשברות בפרטים: חץ שמצביע לכיוון הלא נכון, שדה טלפון שמתהפך, או סליידר שנע הפוך.
איך וורדפרס מטפלת ב-RTL
כשהאתר מוגדר לעברית, וורדפרס יודעת שזו שפה מימין לשמאל, ותבנית יכולה לבדוק זאת עם הפונקציה is_rtl(). לפי התיעוד של וורדפרס על תמיכה בשפות RTL, יש שתי דרכים מקובלות לעצב תבנית לעברית: קובץ rtl.css שדורס את הכללים הרלוונטיים, או גרסה מלאה ומשוקפת של קובץ העיצוב, שוורדפרס טוענת במקום המקורי כשהשפה היא RTL.
הדרך המודרנית, שבה אני עובד, היא שלישית: לכתוב את ה-CSS מלכתחילה עם מאפיינים לוגיים — margin-inline-start במקום margin-left — כך שאותו קוד עובד בשני הכיוונים. על הגישה הזו הרחבתי במאמר איך בונים אתר מימין לשמאל.
צ'קליסט: האם התבנית באמת מוכנה לעברית
| מה בודקים | איך זה נראה כשזה תקין |
|---|---|
| פריסה | הלוגו מימין, תפריט ועמודות מסודרים מימין לשמאל |
| אייקונים כיווניים | חצים של "הבא" ו"הקודם" מצביעים לכיוון הנכון |
| טפסים | תוויות ושדות מיושרים לימין; טלפון ומייל נשארים משמאל לימין |
| טקסט מעורב | מילים באנגלית ומספרים בתוך משפט עברי לא קופצים לסוף השורה |
| סליידרים וקרוסלות | נעים בכיוון הטבעי לעברית |
| גופן | גופן עברי אמיתי, לא נפילה לגופן ברירת מחדל |
| תרגום | כל המחרוזות של התבנית ניתנות לתרגום, כולל "קרא עוד" ותאריכים |
| מובייל | תפריט ההמבורגר נפתח מהצד הנכון |
הגופן: החלק שמשפיע על כל עמוד
הרבה תבניות "בינלאומיות" מגיעות עם גופן שאין בו אותיות עבריות, והדפדפן נופל לגופן מערכת. התוצאה נראית לא מקצועית ומשתנה ממכשיר למכשיר. צריך גופן עברי — רצוי שמור על השרת של האתר ולא נטען משירות חיצוני — עם המשקלים שהעיצוב צריך. באתר הזה, למשל, הגופן Heebo נטען מהשרת עצמו. פירטתי את השיקולים במאמר גופנים בעברית לאתר.
איך בודקים תבנית לפני שקונים
- מחפשים בתיאור התבנית תמיכה מפורשת ב-RTL, ולא רק "מוכנה לתרגום".
- אם יש דמו, משנים את שפת הדפדפן או בודקים אם יש דמו בעברית או בערבית.
- מתקינים בסביבת בדיקה, משנים את שפת האתר לעברית, ועוברים על הצ'קליסט שלמעלה.
- בודקים את התוספים הנלווים — טפסים, סליידר, חנות — כי גם הם צריכים לתמוך ב-RTL.
- בודקים בטלפון, לא רק במחשב.
תבנית מוכנה או ייעודית?
תבנית מוכנה עם תמיכה טובה בעברית יכולה להתאים לאתר קטן. אבל רוב התבניות המוכנות נבנו קודם לאנגלית, והעברית "הולבשה" עליהן אחר כך — ולכן התיקונים מצטברים: CSS נוסף, תוסף תרגום, התאמות לסליידר. בתבנית ייעודית שנכתבת מההתחלה לעברית, ה-RTL הוא חלק מהבסיס ולא תיקון. ההשוואה המלאה נמצאת במאמר חינמית, פרימיום או ייעודית.
טקסט מעורב: עברית, אנגלית ומספרים
הבעיה הנפוצה ביותר באתרים בעברית היא לא הפריסה אלא הטקסט המעורב. משפט עברי עם שם מוצר באנגלית, מספר טלפון, כתובת מייל או סימן פיסוק בסוף — והדפדפן מציג את החלקים בסדר הלא נכון: נקודה שקופצת לתחילת השורה, טלפון שמתהפך, סוגריים הפוכים.
הפתרון הוא בקוד, ולא בתוכן:
- להגדיר כיוון ושפה ברמת המסמך (
dir="rtl"ו-lang="he") — וורדפרס עושה זאת כשהשפה מוגדרת נכון. - לסמן שדות שתוכנם תמיד משמאל לימין — טלפון, מייל, כתובת אתר — עם
dir="ltr". - להשתמש ב-
unicode-bidi: plaintextלתוכן שהכיוון שלו לא ידוע מראש. - לבדוק כותרות, כפתורים ופירורי לחם עם מילים באנגלית — שם הבעיה בולטת במיוחד.
תבנית שמטפלת בזה ברמת הקוד חוסכת לעורכי התוכן את הצורך "לתקן" משפטים ידנית — תיקונים שלרוב נשברים בעריכה הבאה.
שאלות נפוצות
מספיק להתקין תוסף תרגום?
תוסף תרגום מתרגם מחרוזות, אבל לא מתקן פריסה, אייקונים או סליידרים. התמיכה ב-RTL צריכה להיות בקוד התבנית.
מה עם אתר דו-לשוני, עברית ואנגלית?
אז התבנית צריכה לעבוד היטב בשני הכיוונים — עוד סיבה לכתוב CSS לוגי. ראו אתר בכמה שפות.
איך יודעים אם הבעיה בתבנית או בתוסף?
מחליפים זמנית לתבנית ברירת המחדל של וורדפרס בסביבת בדיקה. אם הבעיה נעלמת — זו התבנית.
כל אתר וורדפרס שאני בונה נכתב מההתחלה לעברית, על תבנית ייעודית. פרטים בעמוד בניית אתרי וורדפרס, או ספרו לי מה לא עובד בתבנית הנוכחית.
אהבתם את המאמר?
