تفعيل دعم اللغات

الدرس: تفعيل دعم اللغات (Translation & RTL Support) في قالب ووردبريس

1. مقدمة: ليه دعم اللغات مهم في القوالب؟

لو عايز موقعك يوصل لعدد أكبر من الناس سواء عرب أو غير عرب، لازم القالب يكون جاهز للغات مختلفة. مش بس ترجمة النصوص، كمان لازم يدعم اللغات اللي بتكتب من اليمين للشمال (RTL) زي العربية، الفارسية، والعبرية.

دعم اللغات مش بس بيخلي الموقع متاح أكتر، كمان بيحسن تجربة المستخدم ويخلي موقعك محترف أكتر.

2. الفرق بين الترجمة والـ RTL

  • الترجمة (Translation): تحويل النصوص المكتوبة في القالب من اللغة الأصلية (غالبًا إنجليزي) للغة تانية
  • الـ RTL (Right To Left): تحويل اتجاه الكتابة وتصميم القالب بحيث يكون مناسب للغات اللي بتكتب من اليمين للشمال زي العربية

3. خطوات تفعيل دعم الترجمة في القالب

أول حاجة: استخدام دوال الترجمة في الكود

لو في القالب عندك نصوص ثابتة زي:

<h1>Welcome to my website</h1>

ده غلط لو عايز تدعم لغات مختلفة. لازم تستخدم دوال الترجمة بتاعت ووردبريس، زي:

<h1><?php _e('Welcome to my website', 'your-textdomain'); ?></h1>
  • _e() بتطبع النص وترجمه لو موجود
  • __() بترجع النص للترجمة بدون طباعة (تستخدم لما تحب تخزن النص في متغير)
  • your-textdomain هو معرف خاص بقالبك عشان تتعرف عليه ملفات الترجمة

4. استخدام ملفات POT, PO, MO

  • POT (Portable Object Template): ملف القالب الأصلي اللي بيحتوي على جميع النصوص اللي ممكن تتترجم، وهو ملف فارغ من الترجمة.
  • PO (Portable Object): نسخة مترجمة من POT بتحوي النصوص الأصلية والترجمة بجانبها.
  • MO (Machine Object): ملف ترجمة مضغوط بيستخدمه ووردبريس فعليًا لتحميل الترجمات بسرعة.

القالب بيحمل ملف الـ MO الخاص باللغة اللي الموقع شغال بيها.

5. إضافة دعم ملفات اللغات في functions.php

عشان تخلي ووردبريس يعرف يشغل ملفات الترجمة الخاصة بقالبك، لازم تضيف الكود ده في ملف functions.php:

function abozaid_theme_setup() {
    load_theme_textdomain('your-textdomain', get_template_directory() . '/languages');
}
add_action('after_setup_theme', 'abozaid_theme_setup');
  • your-textdomain نفس النص اللي استخدمته في دوال الترجمة
  • /languages المجلد اللي هتحط فيه ملفات الترجمة (PO و MO)

6. طريقة إنشاء ملفات الترجمة باستخدام أدوات مجانية

استخدام برنامج Poedit (الأشهر)

  1. افتح Poedit
  2. اختار “Create new translation”
  3. اختار ملف الـ POT اللي جاي مع القالب أو اللي أنت عملته
  4. ابدأ ترجم كل النصوص للعربية أو اللغة اللي عايزها
  5. احفظ الملف باسم اللغة، مثلاً ar.po
  6. البرنامج هيعمل تلقائيًا ملف ar.mo

أدوات أونلاين

  • Loco Translate – إضافة ووردبريس تتيح الترجمة من لوحة التحكم
  • Poeditor.com – موقع لترجمة ملفات POT أونلاين

7. إضافة دعم الـ RTL في القالب

لو عايز القالب يدعم العربية واللغات اللي بتكتب من اليمين للشمال، لازم تخلي الكود يدعم الاتجاه ده.

الخطوة 1: في ملف style.css

في رأس ملف style.css، لازم تضيف:

/*
Theme Name: Abozaid Theme
Text Domain: your-textdomain
...
*/

الخطوة 2: إعداد ملف rtl.css

  • لازم تعمل ملف rtl.css في مجلد القالب
  • في الملف ده هتكتب CSS اللي بيغير اتجاه العناصر من اليسار لليمين

مثال:

body {
    direction: rtl;
    text-align: right;
}

.header {
    float: right;
}

الخطوة 3: تحميل ملف rtl.css تلقائيًا

ووردبريس بيقدر يحمل ملف rtl.css لو مسماه بالطريقة دي، لكن لازم تضيف كود في functions.php عشان يتأكد من تحميله:

function abozaid_load_styles() {
    wp_enqueue_style('abozaid-style', get_stylesheet_uri());

    if (is_rtl()) {
        wp_enqueue_style('abozaid-rtl', get_template_directory_uri() . '/rtl.css', array('abozaid-style'));
    }
}
add_action('wp_enqueue_scripts', 'abozaid_load_styles');

8. كيف تختبر دعم RTL في القالب؟

  • غير لغة موقع ووردبريس للغة عربية من لوحة التحكم (Settings > General > Site Language)
  • افتح الموقع وشوف إذا الاتجاه اتغير للعربي (من اليمين لليسار)
  • اختبر كل الصفحات وشوف الهيدر، الفوتر، القوائم، النصوص، هل كلها بتظهر مظبوطة
  • جرب في أجهزة مختلفة والشاشات الصغيرة

9. نصائح وأخطاء شائعة لازم تتجنبها

  • ما تستخدمش اتجاه ثابت في CSS: زي float: left; بدون تحكم في الـ RTL
  • استخدم وحدات CSS مرنة: زي margin-inline-start بدل margin-left
  • تجنب الصور اللي مش مناسبة للاتجاه العكسي: يعني لو في صورة سهم أو شكل لازم تعكسه في RTL
  • اختبر كل العناصر في الوضعين LTR و RTL
  • دايمًا استخدم دوال الترجمة مش نصوص ثابتة

10. أفضل الممارسات في تصميم قوالب متعددة اللغات

  • استخدم دوال الترجمة بشكل صحيح (مثل _e, , esc_html)
  • نظم ملفات الترجمة في مجلد منفصل /languages
  • صمم CSS بحيث يكون قابل للتعديل والانعكاس مع RTL بسهولة
  • جرب القالب مع إضافات الترجمة (زي WPML، Polylang) لو هتدعم مواقع متعددة اللغات
  • اعتمد على خاصية is_rtl() في PHP لتغير بعض الوظائف أو النصوص حسب اتجاه اللغة
  • لا تستخدم نصوص في الصور، أو استخدم نسخ مخصصة من الصور للغات المختلفة

11. مراجعة سريعة

  • دعم اللغات بيبدأ باستخدام دوال الترجمة في الكود
  • ملفات POT, PO, MO هي أساس الترجمة في ووردبريس
  • لازم تضيف load_theme_textdomain في functions.php
  • ملف rtl.css ضروري لدعم الاتجاه من اليمين للشمال
  • لازم تختبر القالب على أكثر من لغة واتجاه
  • دايمًا استخدم أدوات ترجمة معروفة زي Poedit أو Loco Translate

12. أسئلة شائعة

س: هل لازم كل النصوص في القالب تستخدم دوال الترجمة؟
ج: أيوه، عشان تكون القابلية للترجمة كاملة ومش ناقصة.

س: هل لازم أعمل rtl.css يدوي؟
ج: الأفضل، عشان تتحكم في التفاصيل، لكن ممكن تستخدم أطر عمل CSS بتدعم RTL تلقائيًا.

س: هل ممكن أستخدم Google Translate للترجمة؟
ج: ممكن، لكن مش احترافي وبيأثر على جودة الموقع، الأفضل الترجمة اليدوية.

س: هل القالب يدعم اللغات لو ما عملتش حاجة؟
ج: لأ، لازم تكتب الكود صح وتضيف ملفات الترجمة.

س: هل لازم أنشئ ملفات PO و MO لكل لغة؟
ج: أيوه، كل لغة ليها ملفات خاصة بيها.

مقالات مشابهة