RTL ועברית בוורדפרס — המדריך המקיף

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

מה זה RTL ולמה זה חשוב?

RTL = Right-to-Left. עברית (וארבית) נכתבות מימין לשמאל, בניגוד לאנגלית שנכתבת משמאל לימין (LTR).

בוורדפרס, RTL משפיע על:

• מיקום כפתורים וסרגל ניווט
• סדר טקסט בטפסים ובלוגים
• מיקום תמונות ביחס לטקסט
• padding/margin (שמאל ב-LTR = ימין ב-RTL)

וורדפרס עצמו תומך ב-RTL מלא — אבל לא כל ערכת עיצוב ולא כל תוסף בנוי כראוי לזה.

שלב 1: הגדרת שפת האתר לעברית

הגדרות → כללי → שפת אתר → עברית

לאחר שמירה, וורדפרס יוריד את חבילת השפה העברית ויפעיל RTL אוטומטית בממשק הניהול וב-front-end.

שלב 2: בחרו ערכת עיצוב שתומכת ב-RTL

לא כל ערכה תומכת ב-RTL כראוי. בחרו ערכה שמציינת במפורש "RTL Support":

ערכות חינמיות עם RTL מצוין:

• Astra — RTL מלא, נבדק ומתוחזק. הכי נפוץ בישראל.
• Kadence — RTL טוב, עיצוב מודרני
• OceanWP — RTL מלא, המון אפשרויות התאמה

בדיקת RTL של ערכה לפני התקנה:

1. חפשו "RTL" בדף תיאור הערכה ב-WordPress.org
2. בדקו screenshots — האם ניתן לראות demo בעברית?
3. חפשו rtl.css בתיקיית הערכה — אם קיים, הערכה תומכת RTL

ב-Elementor עם Astra: Elementor מכבדת את ה-RTL של הערכה. אבל בדקו בpreviewer לפני שמפרסמים — יש widgets ספציפיים שדורשים התאמה ידנית.

שלב 3: גופנים עבריים

הבעיה: רוב גופני Google Fonts לא תומכים בעברית. שימוש בגופן לא-תואם יציג את הטקסט בגופן default של הדפדפן.

גופנים עבריים ב-Google Fonts שעובדים:

• Heebo — הנפוץ ביותר, קריא, מודרני
• Assistant — נקי, מתאים לממשקים
• Rubik — עגול יותר, ידידותי
• Frank Ruhl Libre — סריף, מתאים לטקסטים ארוכים

איך להוסיף לוורדפרס:

/* ב-Appearance → Customize → Additional CSS */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700&display=swap');

body {
  font-family: 'Heebo', sans-serif;
}

חלופה עם פחות impact על מהירות:

/* self-host הגופן דרך תוסף OMGF (חינמי) */
/* זה מוריד את הגופן לשרת שלכם ומסיר את HTTP request לגוגל */

שלב 4: בעיות RTL נפוצות ואיך לפתור אותן

בעיה 1: כפתורי ניווט בצד הלא-נכון

תסמינים: תפריט ניווט מופיע בשמאל במקום בימין, כפתורי "הבא/הקודם" הפוכים.

פתרון:

/* Additional CSS */
.nav-menu {
  text-align: right;
}
.nav-menu li {
  float: right;
}

ב-Elementor: ודאו שב-Section Settings → Advanced → Direction מוגדר RTL.

בעיה 2: תמונות מסתדרות בצד הלא-נכון

תסמינים: תמונה float עם טקסט נמצאת בצד שמאל במקום ימין.

פתרון בגוטנברג: בלוק תמונה → עמוד 2 columns → סדרו תמונה בימין, טקסט בשמאל.

פתרון ב-CSS:

.wp-block-image.alignleft {
  float: right;
  margin-left: 1.5em;
  margin-right: 0;
}

בעיה 3: טפסים — placeholder בצד הלא-נכון

תסמינים: טקסט ה-placeholder מיושר לשמאל בשדה שהטקסט אמור להיות בימין.

פתרון:

input[type="text"],
input[type="email"],
textarea {
  text-align: right;
  direction: rtl;
}

בעיה 4: WooCommerce — checkout לא RTL

תסמינים: כפתורים ב-checkout מיושרים לשמאל, שדות בסדר LTR.

פתרון: WooCommerce עצמה תומכת RTL אבל חלק מה-gateways לא. בדקו כל gateway שאתם מתקינים עם RTL.

/* תיקון סדר שדות checkout */
.woocommerce-billing-fields .form-row {
  float: right;
}

שלב 5: בדיקת RTL — checklist

לפני שמפרסמים אתר עברי:

• תפריט ניווט — נמצא בצד ימין, קריא משמאל לשמאל
• כפתורים — סדר הפעולות הגיוני ב-RTL
• טפסי יצירת קשר — שדות ו-placeholder בימין
• תמונות עם טקסט — התמונה נמצאת בצד ה"חיצוני" (ימין לפסקה ראשונה)
• WooCommerce checkout — כל השדות נגישים ב-RTL
• גופן עברי — נטען בכל הדפים, לא נשאר ב-default
• Mobile — בדקו ב-Chrome DevTools בגודל 375px (iPhone)

אחסון וביצועים לאתרים עבריים

שיקול שרבים מפספסים: latency לגולשים ישראלים.

שרת בפרנקפורט נותן TTFB של ~180ms מישראל. שרת ישראלי (כמו uPress) נותן 89ms. ההבדל ניכר.

עבור קהל ישראלי בלבד, uPress או ספק ישראלי אחר יספקו חוויית גלישה מהירה יותר משמעותית. ראו השוואת ספקי אחסון ישראלים לפירוט מלא.