أداة أنشأتها لتعريب واجهات المواقع وصنع rtl.css

عندما يرغب اصحاب المواقع والمدونات بالبحث عن ستايل أو ثيم لمواقعهم, غالبا تكون هناك مشكلة تعريب أو الدعم للغة العربية وبالتحديد استعراض الموقع بواجهة “اليمين إلى اليسار”. السبب الأساسي هو أن هذه الثيمات والواجهات لا تحتوي على ملف قالب css يدعم العرض من اليمين إلى اليسار. طبعا انا مريت بالتجربة نفسها عند تعريبي لمدونتي وبدء الواجهة العربية لها :).

تعريب قوالب وثيمات ووردبريس

في وقت كتابة هذه التدوينة، كان عدد الثيمات في موقع ووردبريس هو 1,895 ثيم. لكن عند البحث عن الثيمات التي تدعم العرض من اليمين لليسار وتحتوي ملفات rtl css فعددها 221 ثيم فقط. طبعا هذا بدون ما نضع في الحسبان مسألة هل هي فعلا تعدعم الواجهة العربية بشكل صحيح أو ان صاحب الثيم “اجتهد” ليكسب السوق العربي. سبب شكي هو ان عملية تعريب ملف الcss لا تتم فقط بتبديل كلمة “left” مع كلمة “right”، العملية بصراحة متعبة نوعا ما لأنه يجب الانتباه إلى الإزاحات عند الصور وطريقة عرض الجداول وغيرها.

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

كيفية تعريب ثيمات وقوالب ووردبريس:

ببساطة، يمكنك الذهاب إلى موقعي: www.RTL-er.com

Right-to-Left css

الطريقة سهلة: تقوم بنسخ محتويات ملف ال css الحالي وهو طبعا للواجهة الإنجليزية. وتلصق الكود في الصندوق الأيسر Original وتضغط على زر Convert, عندها الموقع راح يقرأ الكود بالكامل ويقوم بإجراء التعديلات اللازمة ويستعرض لك النتيجة في الصندوق الأيمن Converted. طبعا تقوم بنسخ الكود واستخدامه على حسب موقعك أو مدونتك. في حالة الووردبريس مثلا تقوم بإنشاء ملف اسمه rtl.css وتلصق الكود بداخله وتحفظ الملف في نفس مجلد الثيم.

إذا كان هناك أي استفسارات أو صعوبات، بإمكانك سؤالي هنا عن طريق كتابة رد على التدوينة، أو في حالة ان الأداة افادتك وأعجبتك فيمكنك مشاركتها عن طريق فيسبوك أو تويتر لعلها تصل إلى شخص آخر يستفيد منها أيضا 🙂

وبالتوفيق للجميع ولا أطلبكم إلا دعوتكم 🙂

www.RTL-er.com


       

Comments (5)

  1. كيفة استخدام ملف rtl المرفق مع القالب
    لدى قالب ومرفق معه ملف rtl ولا اعرف كيف استخدمه ارحو المساعده فى شرح كيفية تحويل القالب زاستخدام الملف

  2. شكرا لك على هذه الأداة الرائعة تستحق كل الثناء والتقدير وأحاول مساعدتك في تحسينها
    واجهتني مشكلة مع طريقة جيددة في التصميم في تلوين الحدود حيث يستعمل بعض المصممين الطريقة التالية
    background-color: #fff #FFF #000 #000
    لتلوين حدين وترك حدين شفافين
    والشكر موصول لك مجددا

  3. شكرا لك على الاداة الرائعه . انا شخصي لدي ثيم مثوفر فيه ملف ال rtl.css وقد قمت بتنزيل اضافة ال Polylang للتحويل بين اللغات لكن المشكلة الواجهتني في انوا كيف اجعل ملف اللفة العربية يقرا من ملف ال , وrtl.css وليس style.css

اترك رد