25 أكتوبر 2010

شرح تعريب قوالب جملة خطوه خطوه

المتطلبات
=====
فقط كل ما تحتاج هو محرر نصوص متطور مثل Notepad++ و برنامج تحرير صور مثل فوتوشوب  
الملفات الهامه فى القالب
==============

يتكون القالب من ملفات و مجلدات ومن أهمها

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

template_thumbnail.png هذه الصورة المصغرة للقالب , و مهمتها هى عرض صورة للقالب للمعاينة قبل الاستخدام وهى غير ذات أهمية فى عملية البرمجة مطلقاً و يمكن حذفها و سيعمل القالب

template Details.xml هو ملف معلوماتى من الطراز الأول , حيث يقوم بإخبار جملة بملفات القالب جميعها كى تتعامل معها بشكل منطقى , كذلك يحفظ به صانع القالب حقه , و لن تستخدمه إلا إذا كنت تنوى عمل قالب منذ البداية


ندخل فى الجد ,

سوف تحتاج كما ذكرنا إلى محرر نصوص متطور مثل نوتباد ++ لفتح ملفات index.php و template.css

أولاً : قم بفتح ملف index.php ستجد فى أعلى الملف الكود التالى :

Code:

<html xmlns="http://www.w3.org/1999/xhtml">


قم باستبداله بالكود التالى


Code:

<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">


و لاحظ الكود الجديد لتجد dir="rtl" قد أضيفت و هى الكفيلة بعكس اتجاه القالب 180 درجة ليصبح من اليمين إلى اليسار

قبل أن نترك ملف index.php لحاله , قم بالبحث عن الكلمات التالية

iso-8859-1

أو
windows-1256


فإذا وجدت أيا منهما قم باستبدالها ب utf-8

أخيراً , حتى ننهى التعامل مع ملف index.php إذا كانت خبرتك فى لغة php جيدة فسيمكنك اللعب بالكود سواء بالحذف أو الاستبدال أو حتى بالإضافة لكى تعدل طريقة ظهور القالب

فضلاً راجع هذا الرابط حول مدلولات ما تجده فى ملف index.php

http://www.joomlart.com/tutorials/templates_tutorial/mambo_layout.html
==========
الآن ننتقل إلى ملف css بعد الانتهاء من ملف index.php قم بحفظه و فتح ملف css

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

فى البداية يتكون ملف css من عدة فقرات قياسية , كل فقرة منها ترتبط بجزء من القالب

لذلك فعند تعاملك مع احدى الفقرات
انس بقية الملف و تعامل معها كأنها ملف منفصل و هكذا حتى تعدل على بقية الفقرات

مثلا , هذه تعتبر فقرة

Code:

div#header_r {
height: 90px;
background: url(../images/mw_header_blue_t_r.png) 100% 0 no-repeat;
padding-left: 370px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: left;
}


لاحظ انها تبدأ بالقوس { و تنتهى ب { و هذا ما يساعدك عليه برنامج Notpad++

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

http://www.joomlart.com/tutorials/templates_tutorial/understanding_mambo_css_in_5_minutes.html

و هذا الرابط أيضاً

http://www.joomlaos.de/CSS_Guide.html

حيث لا يمكن أن يخرج أى قالب عن هذه الأطر القياسية , و هذا هو سبب وجود العديد من القوالب لجملة أو لمامبو فى ما سبق

فمثلا إذا وجدت فى ملف css فقرة بعنوان a:mainlevel:link فهذا يعنى أنك ستتعامل مع القائمة الرئيسية أو أى قائمة للموقع

لنتقدم أكثر لندرك ماذا يجب تغييره حتى يتم تعريب القالب ,

أول الأوامر التى يجب ملاحظتها و هى من أهم الأوامر هى


Code:float :


حيث يعمل هذا الأمر على التحكم فى محاذاه عنصر معين مثل القوائم و المحتوى و ما إلى ذلك

يتم وضع الأوامر left أو right أو center

فمثلاً و كما ستجد فى القوالب الغربية يكون الأمر


Code:float : left;


فقم بتغيير كلمة left إلى right و لا تنس إضافة الفاصلة المنقوطة بعد كل أمر


ثانى الأوامر هو
Code:font-family:


من منا يكره الخط الذى يتم عرض المحتوى به فى القالب الافتراضى ؟

هذا لا لشىء إلا بسبب أن من يصنع القالب قد قام وضع الخط
arial
أو
sans serif
و هذا مناسب للانجليزية و لكن ليس لعين المستخدم العربى عند عرض لغته الأم ,

لذلك سوف تجد هذا الأمر

Code: font-family: Arial, Helvetica, sans-serif;


فقم بتغييره إلى


Code: font-family: Tahoma, Arial, Helvetica, sans-serif;


لاحظ اننا أضفنا خط تاهوما و هو الأفضل لعين المستخدم العربى

و لاتقم بحذف بقية الخطوط الأخرى , حيث لا نضمن وجود خط Tahoma عند الجميع , من باب الاحتياط ليس أكثر

ثالث تلك الأوامر هو
Code:

text-align:


و هو يختلف عن الأمر
float :
فى أن الأخير مهمته محاذاه العنصر مثل القائمة أو الموديل أو المحتوى , بينما الأول وظيفته محاذاة النص بداخل العنصر

أيضاً يقبل إضافة left أو right أو center

هذه الأوامر التى تتعلق بالتعريب ,

لاحظ جيداً أنه قد يتوجب عليك إضافتها لإحدى الفقرات , حيث قد لا تكون موجودة بالضرورة
و تتعامل معها جملة على أنها يسار بشكل افتراضى و تذكر أنها تضاف فى سطر جديد بين بداية و نهاية الفقرة

توجد اوامر أخرى مثل


Code:color:

و أمامه يوضع كود اللون بصيغة اتش تى ام ال

Code:background:

إذا أردت وضع خلفية للنص مثل صورة أو لون و يقبل كود اللون أو رابط الصورة


Code:padding:

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

و يوضع أمام هذا الأمر من واحد إلى 4 أوامر يتم الفصل بينها بمسافة عادية كل منها يكون على صورة رقم بجواره px حيث تمثل px عدد بكسلات الشاشة عند العرض

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

بهذا نكون قد أنهينا ما يتعلق بملف css مع ملاحظة أنه عند التعديل يجب عليك تعديل فقرة و التأكد من نتيجة عملك فوراً و بعدها تكمل لفقرة أخرى

لا يشترط أن تعمل على كل الفقرات , هذا ما يتعلق بتعريب القوالب , لاتنس أن تحزم الملفات بعد الانتهاء من العمل عليها و تجربتها فى ملف مضغوط و ترفعه

أخيراً أرجو أن يكون الشرح واضح و مؤدى للغرض و لا تنسونا من صالح دعائكم

تم النقل و التنقيح بواسطة المدون 
كتبها في
التسميات:

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)