كيفية بناء قوالب WordPress تدعم RTL

يعني RTL من اليمين إلى اليسار. تستخدم لغات قليلة فقط في العالم اتجاه النص RTL، ولكن هذه اللغات تغطي أكثر من مليار شخص. إضافة دعم RTL لقالبك أمر بسيط ويمكن أن يزيد من سوقه بشكل كبير.

إليك صفحتان، إحداهما باتجاه RTL والأخرى باتجاه LTR (العادي):
يمكنك أن ترى كيف يظهر كل شيء في صفحة RTL «معكوساً» أفقياً. يبدو الأمر وكأنك تنظر إلى صفحة LTR «العادية» عبر مرآة. إن إنشاء هذه الصورة المعكوسة سهل للغاية في الواقع. سيقوم اتجاه «dir» في CSS بمعظم العمل ولن تحتاج سوى إلى تعديل بعض الأماكن.

تحميل ملف CSS مختلف للغات RTL

يعرف WordPress اللغات التي لها تدفق RTL ويسهل عليك تخصيص تخطيطها. أنشئ ملف rtl.css جديداً وضعه في الدليل الجذري لقالبك.

سيقوم WordPress بتحميل ملف rtl.css بعد تحميله لملف styles.css العادي، لذا يحتاج ملف RTL CSS فقط إلى تجاوز السمات التي تحتاج إلى تغيير. هذا يعني أن ملف rtl.css عادة ما يكون صغيراً جداً، بالنسبة لمعظم القوالب.

تعيين اتجاه الصفحة إلى RTL

تخبر سمة «direction» في CSS المتصفح باتجاه الصفحة. بالنسبة للغات RTL، ستحتاج إلى تعيينها إلى «rtl». هناك سمة «سحرية» أخرى يجب عليك تعيينها لعرض RTL بشكل صحيح. تُسمى «unicode-bidi». من السهل جداً فهم هذه السمة «السحرية»، عندما تعتاد على الكتابة في RTL. فهي تتحكم في طريقة عرض الأحرف داخل السطر.

لعرض RTL بشكل صحيح، أضف ما يلي إلى محدد .body:


{
direction:rtl;
unicode-bidi:embed;
}

وهكذا تكون قد انتهيت! يُعرض قالبك الآن باتجاه RTL. تقريباً. ستجعل هاتان العبارتان معظم الصفحة تبدو صحيحة. الآن، تحتاج إلى التعامل مع الاستثناءات.

عكس اتجاه النص، والطفو (floats) والمسح (clears)

يتطلب كل مكان في CSS، حيث تقوم بتعيين اتجاه النص وعناصر الطفو (float)، انتباهاً يدوياً.

ابحث عن جميع المحددات الخاصة بـ text-align، و float و clear. إذا كان أي منها يحدد اتجاهاً، فاعكسه من «right» إلى «left». تذكر تلك الصورة المعكوسة التي نحاول تحقيقها وسيجعل ذلك فهم هذا التحويل أسهل.

الرسومات التي تشير إلى الاتجاه

شيء آخر يجب الانتباه إليه هو الرسومات التي تحمل معنى «الاتجاه». على سبيل المثال، إذا كنت تنشئ عرض شرائح، فقد يكون لديك أسهم للعناصر التالية والسابقة. تذكر أن موقعك سيظهر عبر مرآة في لغات RTL، لذا يجب عليك عكس الرسومات الاتجاهية أيضاً. إذا كنت تستخدم سهماً يشير إلى اليمين لـ «التالي» في LTR، فيجب عليك توفير سهم يشير إلى اليسار لـ «التالي» في RTL.

اختيار الخطوط المخصصة

لا تمتلك لغات RTL نفس الخطوط الموجودة في لغات LTR. إذا كنت تستخدم خطوطاً مزخرفة ويعتمد تخطيط قالبك عليها، فيجب عليك إيجاد خطوط بديلة لهذه اللغات. إذا اخترت خطاً غير موجود في لغة RTL، فسيعود المتصفح إلى ما يعرفه. من الأفضل أن تحدد خطوطاً بديلة موجودة تعجبك.

إذا كنت تستخدم خطوط الويب القياسية، فلا مشكلة لديك.

كيفية اختبار قالبك في RTL

عندما تقوم بتطوير ملف RTL CSS الخاص بك، فمن الجيد دائماً اختبار ما تفعله.

1. غيّر اللغة في ملف wp-config.php إلى تلك اللغة. إذا كنت تستخدم WPML، فما عليك سوى إضافة لغة RTL إلى موقعك.

   



2. ترجم نصوص قالبك الثابتة في الكود (على الأقل تلك الموجودة في الواجهة الأمامية) إلى تلك اللغة. يتيح لك WPML القيام بذلك باستخدام وحدة ترجمة النصوص.

   



3. احصل على محتوى تجريبي بتلك اللغة. لسهولة التحرير في RTL في لوحة تحكم WordPress، اذهب إلى ملفك الشخصي، ومرر لأسفل إلى إعداد لغة الإدارة وعيِّن اللغة لتكون نفس لغة التحرير.

   

ألا تعرف أي لغات RTL؟ ما عليك سوى استخدام ترجمة Google. ستكون الترجمة في الغالب بلا معنى، ولكن لأغراض تطوير CSS، فهذا يفي بالغرض.

الآن، تصفح الأنواع المختلفة من المحتوى في موقعك. تأكد من تضمين المقالات، والصفحات، والصفحة الرئيسية وأي محتوى مخصص تنشئه.

للحصول على أفضل النتائج، ابحث عن شخص يتحدث تلك اللغة واطلب منه إجراء فحص سريع للتأكد من سلامة العمل. سيكتشف صديقك المتحدث بلغة RTL نسبة الـ 5% المتبقية من المشكلات التي ستفوتك. هذا أمر «يُحبذ وجوده»، لذا لا توقف جهودك في RTL إذا كنت لا تعرف أحداً للمساعدة في الاختبار. بمجرد إصدارك للنسخة الداعمة لـ RTL من قالبك، ستحصل على الكثير من الملاحظات من عملائك. إذا بذلت 95% من الجهد، فسيكونون سعداء بالمساهمة في إصلاحات الـ 5% المتبقية.

مواد إضافية – لوحة تحكم قالبك في لغات RTL

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

إلى جانب ذلك، سيرغب العديد من المستخدمين في الحصول على لوحة تحكم WordPress بلغتهم. هذا يعني أيضاً رؤية شاشات لوحة تحكم قالبك باتجاه RTL.

الطريقة السهلة لتحقيق توافق RTL هذا لشاشات لوحة تحكم قالبك هي استخدام فئات CSS القياسية في WordPress لعناصر واجهة المستخدم الرسومية (GUI). صحيح أن هذا يعني أنه لا يمكنك استخدام تأثيرات CSS مزخرفة لتجميل واجهة المستخدم الرسومية الخاصة بك. ولكنه يعني أيضاً أن واجهة المستخدم الرسومية الخاصة بك تندمج تماماً في لوحة تحكم WordPress وتُعرض بشكل صحيح في LTR / RTL.

إذا كان لابد من استخدام CSS المخصص الخاص بك لشاشات لوحة التحكم، فتحقق من كيف يبدو في لغة RTL. تنطبق نفس القواعد التي تتبعها لـ CSS الواجهة الأمامية على الواجهة الخلفية أيضاً. اعكس المحاذاة، والطفو (floats) والمسح (clears)؛ وتجنب التموضع المطلق (absolute positioning) وانتبه للصور.

مرجع رائع – قالب WordPress الافتراضي

للعلم، قوالب WordPress الافتراضية جميعها مكيفة تماماً للغات RTL. افتح القالب الافتراضي وابحث عن ملف rtl.css. سترى التغييرات التي أجراها على CSS للقالب الافتراضي. عادةً ما تكون هذه التغييرات صغيرة جداً ويسهل تتبعها.