طريقة تعريب قوالب الووردبريس - شرح التعريب

السلام عليكم ورحمة الله وبركاته

بناءا على طلب كثير من الاخوة ساشرح هنا بالصور اهم خطوات تعريب قوالب الووردبريس

اهم خطوة في تعريب قالب الووردبريس هي قلب الاتجاه وتحويل النصوص للكتابة من اليمين الى اليسار rtl

في البداية قم بتحميل البرامج التالية :

firefox
firebug
notebad++

الفير بج هي اضافة للفايرفوكس خاصة بالمطورين لكشف الكود المصدري للصفحة
وتجربة التعديلات عليها قبل التطبيق وهي مهمة جدا في عملية التعريب


اولا سنقوم بتركيب القالب المراد تعريبه وتفعيله ومن ثم نبدا بعملية قلب الاتجاهات في القالب من خلال ملف ال style.css

قلب اتجاهات القالب :

من اهم خطوات التعريب هي قلب اتجاهه ليتوافق والمستخدم العربي والمحتوى العربي في الموقع
نقصد بذلك وضع القائمة الجانبية على اليسار والمحتوى على اليمين اولا سنقوم
بعرض كود الصفحة كاملا من خلال الفيربج المضاف للفايرفوكس لمعرفة تقسيم
القالب ومسميات اقسام القالب

نضغط على اشارة الفايربج اسفل المتصفح لعرض الكود المصدري للقالب

لاحظ الكود المصدري للقالب :



1- القوائم العلوية
2- المحتويات مجموعة ( القائمةا لجانبية , التدوينات )
3 - اسفل القالب

لاحظ توزيعها بالصورة





سنبدا بقلب الاتجاه خطوة خطوة

اول خطوة نبداها من خلال محتوى Nav





من خلال الفايربج نقوم بفتح محتوى nav لمعرفة اقسامه والتعامل معها وقلب اتجاهاه


لاحظ ان هذا القسم يحتوي على جزئين هما قائمة الصفحات ومربع البحث
سنقوم الان بتغير اتجاههما ووضع قائمة الصفحات جهة اليمين والبحث في اليسار من خلال ملف style.css

القائمة الجانبية موجودة ضمن menus ومحتوياتها ضمن عناصر الترتيب li اذا نتوجه الى
رمز PHP:




#menus li








ونقوم بتغير اتجاهه من خلال الامر
رمز PHP:




float:right;








وايضا نقوم بالمثل مع خيار البحث ولكن بتغير الاتجاه الى الاتجاه المعاكس
رمز PHP:




float:left;










لاحظ انا ايضا قمنا بتعديل خيار الهامش
رمز PHP:




margin-right:-450px;








الى
رمز PHP:




margin-left:-450px








وهذا التعديل مهم جدا عند تغير اتجاه اي عنصر يتواجد له خيار هامش التعديل ليس بالقيمة انما بالاتجاه

تم الان الانتهاء من القسم الاول وهو nav

سنتوجه الان الى قسم : wrapper

هذا القسم يحتوي معظم محتويات القالب وهي القائمة الجانبية والموضوعات

يتوجب علينا الان وضع القائمة الجانبية في اليسار والموضوعات في اليمين
اذا نقوم بفتح الكود المصدري ل wrapper لمعرفة اسماء اقسامه ومعرفاتها لتكوين صورة عن القالب والمطلوب تغير اتجاهه

لاحظ الكود المصدري




يحتوي هذا القسم على ثلاث اجزاء هي :




1- راس الصفحة
2- محتويات الموضوعات
3- القائمة الجانبية


شاهد الصورة التمثيلية لقسم wrapper




صورة القالب :




اذا من الصورة الخطوة الاولى لدينا هي قلب اتجاه اعلى الصفحة header






نقوم بفتح جزء الهيدر من خلال الكود المصدري




شاهد الكودي المصدري للهيدر يحتوي على عنوان الموقع ووصف الموقع
العنوان جاء تحت h1 ووصف الموقع تحت h2
من خلال ملف style.css


الان نبحث داخل ملف style.css عن الكلاس
رمز Code:

#header h1

والكلاس
رمز Code:

#header h2

ونقوم بتغير اتجاهها من اليسار الى اليمين




المسؤول عن ذلك هو
رمز PHP:




float:right;








من المهم ايضا تعديل الهامش النصي من الامر padding عن تغيير اي اتجاه

امر padding يستخدم بالشكل التالي
padding-top
padding-right
padding-left
padding-bottom

يتم اختصاره احيانا ب :

رمز Code:

padding: top right bottom left;

مع اعطاء قيمة الهامش لكل اتجاه

دائما عند تغير اتجاه اي كلاس يحتوي على هامش نقوم بقلب اتجاه left و right في هذا الهامش ليتناسب مع الاتجاه الجديد
يعني لو كان عندنا هامش بهذا الشكل :


رمز Code:

padding:10px 0 15px 20px;

نقوم بقلبه ليصبح بهذا الشكل :


رمز Code:

padding:10px 20px 15px 0;

انتهينا الان من جزء اعلى الصفحة header

الان سنقوم بقلب اتجاه القائمة الجانبية (Sidebar-border ) والموضوعات ( content )
الموضوعات ستكون جهة اليمين والقائمة الجانبية جهة اليسار





من خلال ملف style.css نقوم بالبحث عن Sidebar-border وعن content

ونقوم بعكس اتجاهم من خلال تغير تموضعهن بالامر float

لاحظ التعديل





لاحظ ان ايقونة التغذية بقيت في مكانها فوق الموضوعات بدل ان تكون فوق القائمة الجانبية لذلك سنقوم بنقلها فوق القائمة الجانبية




نقوم بداية بتحديد الكلاس الخاص بها من خلال اضافة فيربج

شاهد هذا العرض التقديمي لطريقة تخحديد الكلاس لاي جزئية في القالب من خلال اضافة فير بج














الكلاس المسؤول هو rss كما هو واضح بالشرح
اذا نقوم بتغير مكان تموضعه من خلال الامر right بعكسه وتغيره الى left وهو المكان الجديد
شاهد الكود في الاسفل




انتهينا الان من قلب اتجاه القالب بشكل كامل
بقي فيط تغير اتجاه النصوص وجعلها موائمة للعربية اي تتجه من اليمين الى اليسار
ولهذا نستخدم الامر :


رمز Code:

text-align : right;

لجعل الكتابة تبدا من اليمين

والامر

رمز Code:

direction:rtl;

لجعل النصوص موائمة للغة العربية

نستطيع اضافة الامرين لكلاس body ولكن الامر direction في بعض القوالب عند
اضافته لاعلى كلاس يسبب بعض المشاكل خصوصا عند وجود القوائم وتقنيات
الاجاكس
لذلك سنقوم بوضع الامرين في الاجزاء المسؤولة عن اظهار النصوص والموضوعات
ويمكن جمع كل هذه الاجزاء في الكلاس wrapper اذا سنقوم بوضع الامرين داخل كلاس wrapper

شاهد الصورة




الان اصبح القالب متوافق تماما مع اللغة العربية

بقيت خطوة واحدة بسيطة وهي تغير المسميات الى اللغة العربية
وهي طريقة سهلة

القالب قبل قلب الاتجاه : اضغط هنا
القالب بعد قلب اتجاهه : اضغط هنا