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

[linnou]

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

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

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

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

firefox (http://www.mozilla.com/ar/)
firebug (https://addons.mozilla.org/ar/firefox/addon/1843/)
notebad (http://sourceforge.net/projects/notepad-plus/files/)++

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


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

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

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

نضغط على اشارة الفايربج اسفل المتصفح لعرض الكود code المصدري للقالب template http://img64.imageshack.us/img64/3279/firebug.jpg

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

http://img38.imageshack.us/img38/9944/81505881.jpg

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

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

http://img42.imageshack.us/img42/4675/05302014024637.jpg



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

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

http://img6.imageshack.us/img6/1421/nav1m.jpg



من خلال الفايربج نقوم بفتح محتوى nav لمعرفة اقسامه والتعامل معها وقلب اتجاهاه
http://img198.imageshack.us/img198/4599/menuck.jpg

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

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

<code style="white-space:nowrap"> <code> #menus li
</code> </code>

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

<code style="white-space:nowrap"> <code> float:right;
</code> </code>

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

<code style="white-space:nowrap"> <code> float:left;
</code> </code>

http://img256.imageshack.us/img256/3782/searchmw.jpg

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

<code style="white-space:nowrap"> <code> margin-right:-450px;
</code> </code>

الى رمز PHP:

<code style="white-space:nowrap"> <code> margin-left:-450px
</code> </code>

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

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

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

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

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

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




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


http://img185.imageshack.us/img185/4560/05302014013639.jpg

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





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

http://img155.imageshack.us/img155/5900/05302014014214.jpg


صورة القالب template :

http://img214.imageshack.us/img214/6602/05302014013801.jpg


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

http://img63.imageshack.us/img63/6661/headerje.jpg




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

http://img59.imageshack.us/img59/8149/jeader2.jpg


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


الان نبحث داخل ملف style.css عن الكلاس رمز Code:
#header h1
والكلاس رمز Code:
#header h2
ونقوم بتغير اتجاهها من اليسار الى اليمين


http://img13.imageshack.us/img13/6244/paddingheader.jpg

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

<code style="white-space:nowrap"> <code> float:right;
</code> </code>

من المهم ايضا تعديل الهامش النصي من الامر 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 )
الموضوعات ستكون جهة اليمين والقائمة الجانبية جهة اليسار


http://img690.imageshack.us/img690/634/05302014014812.jpg


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

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

لاحظ التعديل

http://img101.imageshack.us/img101/3275/floatleftright.jpg



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

http://img256.imageshack.us/img256/2144/05302014015232.jpg


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

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


http://img717.imageshack.us/img717/944/44759081.gif


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

http://img541.imageshack.us/img541/1931/rssleft.jpg


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

رمز Code:
text-align : right;
لجعل الكتابة تبدا من اليمين

والامر
رمز Code:
direction:rtl;
لجعل النصوص موائمة للغة العربية

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

شاهد الصورة

http://img413.imageshack.us/img413/5364/warperdirection.jpg


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

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

القالب template قبل قلب الاتجاه : اضغط هنا (http://demo.zww.me/?wptheme=zBench)
القالب template بعد قلب اتجاهه : اضغط هنا (http://wp-gallary.com/demo?theme=zBench)






https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©