تعريب قالب ورودبريس بالخطوات المفصلة
هل تعلم أن اللغة العربية هي سادس لغة مستخدمة في العالم ويتحدث بها أكثر من 420 مليون شخص حول العالم، وبالتالي فإن تعريب قالب ووردبريس أمر يستحق التعلم لكونه يهم جزء كبير من العملاء، لذا يحرص كثير من مطوري القوالب على جعل قوالبهم داعمة للغة العربية لتلبية متطلبات عملائهم.
فإذا كنت مطورًا أو مصممًا لقالب ووردبريس وكنت ترغب في جعل القالب مناسب للمواقع العربية (يدعم الترجمة للعربية ويدعم الاتجاه من اليمين لليسار) فهذا الموضوع موجه لك.
إن عملية تعريب القالب تتضمن مرحلتين أساسيين
المرحلة الأولى: الترجمة
بداية يتوجب عليك ترجمة عبارات ونصوص القالب الأساسية المكتوبة باللغة الانجليزية مثل (Featured Posts-Read More- Author …الخ) إلى اللغة التي تريدها وهي في حالتنا اللغة العربية
هذه العملية تسمى ترجمة القالب Theme Translation أو توطين القالب Localization Theme وهي تكفي لتحويل القالب لأي لغة اتجاهها موافق للغة الانجليزية أي تكتب وتقرأ من اليسار لليمين (كالفرنسية أو التركية أو الاسبانية) لكن بالنسبة للغات التي تكتب من اليمين لليسار مثل لغتنا العربية فنحن بحاجة للمرور بالمرحلة الثانية لإتمام التعريب.
المرحلة الثانية: دعم RTL
في هذه المرحلة يتوجب عليك تحويل اتجاه كافة عناصر القالب الضرورية كالفقرات والعناوين والصور من اليمين لليسار لتوافق اتجاه قراءة اللغة العربية وتعرف هذه المرحلة باسم RTL Support
لنشرح كيفية إنجاز كل مرحلة من هذه المراحل بمزيد من التفصيل:
1-ترجمة القالب
لحسن الحظ يوفر وودربريس للمطورين إمكانية توفير ملف نموذج الترجمة POT الذي يتضمن كافة السلاسل النصية الأساسية المطلوب ترجمتها ويمكن ترجمة هذا النموذج بسهولة لأي لغة من خلال إنشاء ملفات ترجمة PO & MO منفصلة لكل لغة نرغب بترجمة القالب لها. .
كي تنشئ هذا الملفات عليك تثبيت برنامج PoEdit على جهاز الحاسب الخاص بك ثم تطلب منه أن يستخرج كل السلاسل النصية القابلة للترجمة من ملفات القالب
لعلك تتساءل كيف نحدد ما هي السلاسل النصية القابلة للترجمة؟
كي يستطيع ووردبريس تحديد ماهي السلاسل النصية القابلة للترجمة في قالب مافهو يستخدم إطار عمل يسمى gettext localization framework الذي يوفر ترجمة على مستوى السلسلة النصية أي أن كل سلسلة نصية تتم ترجمتها على حدة. ويملك ووردبريس 14 دالة جاهزة تسمح لك بإعداد لترجمات الخاصة بالسلاسل النصية وأهم هذه الدوال:
__()
_e()
_n()
وبالتالي عليك أن تقوم كمطور للقالب بتطبيق احد هذه الدوال على جميع السلاسل النصية التي تريد ترجمتها.
في هذه الحالة سيعمل ووردبريس بالشكل التالي:
إذا جعلت لغة الموقع هي اللغة العربية مثلاً فإن ووردبريس سوف يبجث عن الترجمة العربية لكافة هذه السلاسل النصية المغلفة بهذه الدوال ويعرضها للمستخدم، وإذا جعلت لغة الموقع هي التركية على سبيل المثال فسيبجث عن توفر الترجمة التركية لهذه السلاسل النصية ويعرضها في الموقع وهكذا..وفي حال لم تتوفر ترجمة موافقة لهذه السلاسل باللغة المطلوبة فسيتم عرضها باللغة الانجليزية.
على سبيل المثال لجعل عبارة Read More قابلة للترجمة علينا أن نضمنها ضمن دالة الترجمة بالشكل التالي:
تسجيل الدخول لعرض الكود
أو
تسجيل الدخول لعرض الكود
وتجدر الإشارة لأن هناك حالات أكثر صعوبة لترجمة السلاسل النصية فقد تحتاج لترجمة سلسلة نصية تتضمن متغيرات بداخلها مثلًا لترجمة عبارة This blogpost is posted by التي تعني تم كتابة هذا المقال من قبل والتي يأتي بعدها متغير يمثل اسم الكاتب يتم تغليف السلاسل النصية بدوال الترجمة بالشكل التالي.
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
هنا تم استخدام الدالة sprintf التي تعيد سلسلة نصية منسقة. وتم تمرير السلسلة المطلوبة لها ثم تم تمرير الرمز التالي ٪ s ضمن دالة الترجمة تسجيل الدخول لعرض الكودوالرمز ٪ s هنا هو عبارة عن token سيتم استبداله بقيمة المعامل التالي الممرر للدالة وهو هنا المتغير $author الذي يمثل اسم الكاتب.
بعد تغليف جميع السلاسل النصية المراد ترجمتها في القالب يجب جعل القالب يتعرف على المكان الذي سيبحث فيه عن ترجمات هذه السلاسة ويتم ذلك باستخدام الدالة load_theme_textdomain في ووردبريس التي تأخذ وسيطين بالشكل التالي
تسجيل الدخول لعرض الكود
يشير الوسيط الأول $ domain إلى معرّف فريد لاسترجاع السلاسل المترجمة، عادة يستخدم المطورون اسم القالب الخاص themename كمعرف مناسب هنا.
والوسيط الثاني $ path يمثل المسار المطوب للبحث عن ملف الترجمة po / mo (توضع عادة هذه الملفات في مجلد باسم languages ضمن مجلد القالب). إذا لم يتم تحديد قيمة لهذا الوسيط ، فسيفترض ووردبريس أنه المجلد الجذر القالب بعد ذلك ، أضف هذه السطور إلى بداية كل ملف من ملفات نماذج القالب (ملفات PHP الموجودة ضمن مجلد القالب)
تسجيل الدخول لعرض الكود
وقم بإضافة الكود التالي إلى ملف وظائف القالب functions.php:
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
بالطبع ، استبدل themename في الكود السابق بالدومين الخاص بك ونحن نفضل ان تتبع العرف وتضع اسم القالب الخاص بك هنا كدومين فريد.
الآن بعد أن تم تجهيز الكود البرمجي الخاص بالقالب لعملية الترجمة عليك إنشاء ملف نموذج الترجمة POT الذي ذكرته سابقًا والذي يتكون من جميع السلاسل القابلة للترجمة في القالب الخاص بك.
يتم إنشاء هذا الملف بسهولة بشكل آلي من خلال برنامج POEdit وعليك كمطور قالب إنشاء هذا الملف وتضمينه مع ملفات قالبك عند توزيع القالب حتى يتمكن المستخدمون النهائيون من ترجمة القالب بأنفسهم بسهولة
خطوات إنشاء ملف نموذج الترجمة:
1-قم بتشغيل البرنامج POEdit و اختر من القائمة ملف الأمر جديد
2- اختر بداية اللغة الانجليزية (لأنك تنشئ الآن ملف النموذج الذي يتضمن السلاسل الأصلية دون ترجمة)
3-قم بحفظ الملف بالاسم الافتراضي en.po أو بأي اسم مميز كاسم القالب نفسه ضمن مجلد languages تنشؤه ضمن مجلد القالب
4-ستظهر لك نافذة فيها خياران (حدث من POT و استخرج من المصادر) اختر منها الخيار الثاني استخرج من المصادر كما يلي
5- من التبويب مسارات المصادر قم بالنقر فوق + ثم أضف مجلدات وحدد مسار المجلد الجذر للقالب الخاص بك
6- من تبويب كلمات المصادر المفتاحية حدد كافة دوال الترجمة التي استخدمتها في كود قالبك وغلفت فيها سلاسل القالب الخاص بك ثم انقر على زر حسنًا في الأسفل لبدء عملية الاستخراج.
7- سيتم مسح كافة الملفات الموجودة في المسار الذي حددته واستخراج كافة السلاسل النصية وفق الكلمات الرئيسية التي أدخلتها وستحصل على ملف النموذج المطلوب بالشكل التالي
الآن قم بإعادة تسمية ملف po الذي حصلت عليه الغير مترجم إلى الامتداد pot لتمييزه عن ملفات الترجمة الخاصة بكل لغة وبهذا تكون قد انتيهت من إنشاء ملف قالب POT الجاهز للترجمة
ملاحظة:
ستلاحظ مع كل عملية إنشاء ملف PO ملفًا آخر بالامتداد MOتم إنشاؤه تلقائيًا داخل نفس المجلد وهو ملف لغة آله مخصص للقراءة من قبل جهاز الحاسب، بينما ملف PO هو ملف للقراءة من قبل المستخدمين البشريين لذا يمكنك حذف هذا الملف لأنك تحتاج فقط إلى تضمين ملف النموذج POT مع قالبك.
إذا كنت مطورًا للقوالب يمكن أن تعتبر أن مهمة الترجمة قد انتهت هنا وسيكون قالبك الأن جاهز للترجمة ويمكن لأي صاحب موقع يستخدم قالبك أن يقوم بمواصلة العمل بناء على ما قمت به ويترجم العبارات الواردة في ملف POT للغته المحلية من خلال أحد إضافات ووردبريس مثل Loco Translate أو TranslatePress التي تساعد اصحاب المواقع على إنشاء ملفات الترجمة الخاصة بهم بسهولة أو من خلال برنامج نفسه POEdit
كما يمكنك متابعة الخطوات وتوفير ملفات الترجمة الخاصة باللغة العربية ar.po ar.mo أو أي لغة يستخدمها عملاؤك مع القالب الخاص بك
لترجمة نموذج الترجمة من خلال برنامج POEdit نفسه قم باختيار القائمة ملف واختر جديد لكن اختر هذه المرة اللغة العربية
الآن احفظ ملف الترجمة ar.po بجانب ملف نموذج الترجمة الذي أنشاته لقالبك واختر حدد من POT ليتم توفير كافة السلاسل المطلوب ترجمتها من ملف النموذج كما يلي
قم بالمرور على هذه السلاسل واحدة تلو الأخرى وترجمها بالترجمة المناسبة لها باللغة العربية
بعد المرور على كل السلاسل النصية والانتهاء من ترجمتها كاملة احفظ ملف الترجمة وجرب تغيير لغة موقع ووردبريس إلى اللغة العربية من خلال لوحة تحكم الموقع الإعدادات> عام> اختر لغة الموقع واختر اللغة العربية وستلاحظ ظهور كافة العبارات التي أضفتها لملف الترجمة ظاهرة باللغة العربية.
بهذا تكون المرحلة الأولى قد انتهت وحان دور الانتقال للمرحلة الثانية في تعريب القالب
2-دعم الاتجاه من اليمين لليسار RTL
كما ذكرت في بداية الموضوع بالنسبة للغة العربية وكافة اللغات الأخرى التي تقرأ من اليمين إلى اليسار لن تكون ترجمة هذه المواقع كافيةـ بل تحتاج كمطور قوالب لدعم تغيير الاتجاه من اليمين إلى اليسار لقالبك عند تطبيق أحد هذه اللغات في موقع ووردبريس.
هناك عدة طرق لتمكين RTL لموقع ووردبريس الخاص بك والطريقة المفضلة لدي هي أن تضمن في قالبك ملفين للتنسيقات واحد style.css للتنسيقات العامة والآخر rtl.css يتجاوز ملف style.css جزئيًا عند الضرورة ويقوم بتحويل اتجاه الموقع ووعرض جميع عناصر الموقع المهمة من اليمين إلى اليسار.
في هذه الحالة عندما يكتشف ووردبريس أن لغة الموقع هي اللغة العربية (أو أي لغة أخرى اتجاهها من اليمين لليسار) سيعمل على تحميل ملف التنسيقات rtl.css هذا تلقائيًا بعد تحميل ملف style.css وسيتم عرض موقع الويب الخاص بك بالشكل المطلوب.
لذا قم بإنشاء ملف جديد باسم rtl.css ضمن المجلد الجذر لقالبك -بجانب ملف style.css- وقم بكتابة أكواد مهمتها عكس كافة الخصائص المتعلقة بالمحاذاة والاتجاهات ضمنه (إذا كانت لليمين في الملف الأصلي اجعلها لليسار وإذا كنت لليسار اجعلها لليمين)
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
ملاحظة: هناك مواقع تساعدك على القيام بهذه المهمة تلقائيا مثل
https://cssjanus.github.io/
https://rtlcss.com/playground/
كل ما عليك هو إدخال كود ملف التنسيقات الأصلي (من اليسار إلى اليمين) لتحوله لك إلى كود معكوس (من اليسار إلى اليمين) يمكنك لصقه في ملف rtl.css الذي أنشاته
ملاحظة: لا يجب أن تقوم بنسخ كامل الكود الخاص بتنسيقات القالب style.css في ملف rtl.css لأنك ستحصل كود مكرر بلا داعي فالأفضل أن تفحص كل سطر من CSS وتعدل يدويًا عناصر الاتجاهات فقط في ملف منفصل وتعكس قيمها. فهذا رغم كونه يتطلب وقت وجهد أكبر لكنه ينتج ملف أصغر ويجعل قالب ووردبريس أسرع وأفضل أداء.
ولا تنسى لكذلك في حال وجود أي صور أو أيقونات تشير إلى اتجاه معين كالأسهم سيلزمك استبدالها بنسخ تشير للاتجاه المعاكس وتحديث المرجع لها في ملف rtl.css أيضًا وجعل القيم الأساسية لخصائص مثل (margin، padding، ،borders، background-positionright، left positioning) لها صفر قبل تعيين قيم جديدة
مثلاً إذا كان لديك الكود التالي في ملف التنسيقات الأساسي
تسجيل الدخول لعرض الكود
اجعله كما يلي:
تسجيل الدخول لعرض الكود
بمجرد إجراء كافة التغييرات المطلوبة احفظ ملف التنسيقات rtl.css وقم بعرض موقعك باللغة العربية وتأكد من أنه يعمل كما يجب، ويعدل اتجاهات كل العناصر لتظهر بالشكل المناسب وفي حال وجود عناصر لا تظهر كما ينبغي عليك فحصها يدويًا وإجراء تعديلات لها حتى تناسب موقعك العربي.
أخيرًأ أنصح بقراءة المقال التالي للمزيد من المعلومات المفصلة حول تعريب قالب ووردبريس وفي حال كان لديك اي سؤال أو استفسار بخصوص تعريب قالب ووردبريس الرجاء كتابته في قسم التعليقات أسفل الموضوع.
