linnou
11-01-2013, بتوقيت غرينيتش 07:20 AM
السلام عليكم ورحمة الله وبركاته ,
أرجو أن يكون الجميع بألف صحة و سلامة
تعتبر عملية قولبة جملة joomla أو Templating عملية صعبة نسبياً خاصة بالنسبة لشخص مبتدى
لذلك فكرت فى عمل هذا الموضوع ليكون بمثابة دليل مبسط
فقط كل ما تحتاج هو محرر نصوص متطور مثل Notepad++ و برنامج تحرير صور مثل GIMP أو فوتوشوب المستخدم بكثرة
فى البداية مم يتكون القالب template ؟
يتكون القالب template من ملفات و مجلدات تكون فى أغلب الأحوال كالتاالى ,
index.php و هذا هو أساس القالب template و جسر الربط بين مكونات القالب template المختلفة و بدونه لا يكون القالب template و هو ملف مكتوب بلغة php يتم فيه إصدار التعليمات لجملة joomla حول تمثيل الصور و الأحرف و ما إلى ذلك
template_thumbnail.png هذه الصورة المصغرة للقالب template , و معمتها هى عرض صورة للقالب template للمعاينة قبل الاستخدام وهى غير ذات أهمية فى عملية البرمجة مطلقاً و يمكن حذفها و سيعمل القالب template
templateDetails.xml هو ملف معلوماتى من الطراز الأول , حيث يقوم بإخبار جملة joomla بملفات القالب template جميعها كى تتعامل معها بشكل منطقى , كذلك يحفظ به صانع القالب template حقه , و لن تستخدمه إلا إذا كنت تنوى عمل قالب template منذ البداية
هذه كانت الملفات , ننتقل إلى المجلدات ,
/images يتضمن هذا المجلد جميع الصور المستخدمه لعرض القالب template
/css لخبراء لغة css يحتوى هذا المجلد على ملف وحيد بامتداد css غالباً , و لغة css هى التى تتحكم فى طريقة عرض الأحرف و حجمها و المؤثرات عليها و ما إلى ذلك
سؤال يطرح نفسه عند عمل تعديلات على قالب template موجود على السيرفر SERVER مباشرة
لنفرض أنك قمت بنعديل صورة ضمن مجلد /images و أردت استبدالها , فلماذا يرفض السيرفر SERVER ذلك ؟
هذه إحدى الأشياء التى تجعل المستخدم على وشك أن يفقد أعصابه و لكنها فى الحقيقة ميزة أمنية هامة ,
فجملة joomla تقوم بحماية تلك الملفات من الوصول إليها بطرق غير شرعية , تماماً إذا أردت حذف ملف من على ويندوز و هو مفتوح بواسطة أى برنامجالمهم , عند التعديل على قالب template , ماذا أفعل ؟
أولا يجب أن يكون لديك سيرفر SERVER محلى لأن ذلك سيخلصك من مشكلة التصاريح و تعقيدات نظام الملفات على لينكس المستخدم على السيرفر SERVERات ,
و بعد انتهاء التعديل على القالب template تقوم بضغط جميع الملفات فى ملف مضغوط بامتداد zip تماماً كما ترى فى القوالب التى تحصل عليها , و أخيراً ترفع الملف إلى جملة joomla من لوحة التحكم
كيف أقوم بتعريب قالب template ؟
تعريب القالب template عملية سهلة ولكنها تحتاج إلى وقت و اختبار
لذلك فالأفضل أن تتم على سيرفر SERVER محلى كما ذكرنا سابقاً
و يكون الدافع لها هو إعجابك بأحد القوالب الغربية و رغبتك فى تحويله لتستخدمه على موقعك العربى
هذا طبعاً من حقك حيث أن كل ذلك تحت اتفاقية البرامج مفتوحة المصدر
و لكن ذلك لا يبرر إزالة الحقوق , على الأقل من ملف xml
ندخل فى الجد ,
سوف تحتاج كما ذكرنا إلى محرر نصوص متطور مثل نوتباد ++ لفتح ملفات index.php و template.css
أولاً : قم بفتح ملف index.php ستجد فى أعلى الملف الكود code التالى :
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
قم باستبداله بالكود code التالى
Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
و لاحظ الكود code الجديد لتجد dir="rtl" قد أضيفت و هى الكفيلة بعكس اتجاه القالب template 180 درجة ليصبح من اليمين إلى اليسار
قبل أن نترك ملف index.php لحاله , قم بالبحث عن الكلمات التالية
iso-8859-1
أو
utf-8
فإذا وجدت أيا منهما قم باستبدالها ب windows-1256 حيث هذا هو ترميز عرض الحروف العربية لأن الترميزات السابقة خاصة بعرض الحروف اللاتينية
أخيراً , حتى ننهى التعامل مع ملف index.php إذا كانت خبرتك فى لغة php جيدة فسيمكنك اللعب بالكود code سواء بالحذف أو الاستبدال أو حتى بالإضافة لكى تعدل طريقة ظهور القالب template
فضلاً راجع هذا الرابط حول مدلولات ما تجده فى ملف index.php
http://www.joomlart.com/tutorials/templates_tutorial/mambo_layout.html (http://www.joomlart.com/tutorials/templates_tutorial/mambo_layout.html)
الآن ننتقل إلى ملف css بعد الانتهاء من ملف index.php قم بحفظه و فتح ملف css
على النقيض من ملف index.php و الذى لم يكن بالضرورة فهم ما يجتويه واجباً
أؤكد أنه قبل الشروع فى تعديل ملف css يجب عليك الإحاطه بكامل محتوياته
حتى تعلم جيداً ماذا تفعل و لا تتسبب فى ضياع مجهودك بسبب خطأ صغير
فى البداية يتكون ملف css من عدة فقرات قياسية , كل فقرة منها ترتبط بجزء من القالب template
لذلك فعند تعاملك مع احدى الفقرات
انس بقية الملف و تعامل معها كأنها ملف منفصل و هكذا حتى تعدل على بقية الفقرات
مثلا , هذه تعتبر فقرة
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.joomlart.com/tutorials/templates_tutorial/understanding_mambo_css_in_5_minutes.html)
و هذا الرابط أيضاً
http://www.joomlaos.de/CSS_Guide.html (http://www.joomlaos.de/CSS_Guide.html)
حيث لا يمكن أن يخرج أى قالب template عن هذه الأطر القياسية , و هذا هو سبب وجود العديد من القوالب لجملة joomla أو لمامبو فى ما سبق
فمثلا إذا وجدت فى ملف css فقرة بعنوان a:mainlevel:link فهذا يعنى أنك ستتعامل مع القائمة الرئيسية أو أى قائمة للموقع
لنتقدم أكثر لندرك ماذا يجب تغييره حتى يتم تعريب القالب template ,
أول الأوامر التى يجب ملاحظتها و هى من أهم الأوامر هى
Code:float :
حيث يعمل هذا الأمر على التحكم فى محاذاه عنصر معين مثل القوائم و المحتوى و ما إلى ذلك
يتم وضع الأوامر left أو right أو center
فمثلاً و كما ستجد فى القوالب الغربية يكون الأمر
Code:float : left;
فقم بتغيير كلمة left إلى right و لا تنس إضافة الفاصلة المنقوطة بعد كل أمر
ثانى الأوامر هو
Code:font-family:
من منا يكره الخط الذى يتم عرض المحتوى به فى القالب template الافتراضى ؟
هذا لا لشىء إلا بسبب أن من يصنع القالب template قد قام وضع الخط
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
هذه الأوامر التى تتعلق بالتعريب ,
لاحظ جيداً أنه قد يتوجب عليك إضافتها لإحدى الفقرات , حيث قد لا تكون موجودة بالضرورة
و تتعامل معها جملة joomla على أنها يسار بشكل افتراضى و تذكر أنها تضاف فى سطر جديد بين بداية و نهاية الفقرة
توجد اوامر أخرى مثل
Code:color:
و أمامه يوضع كود code اللون بصيغة اتش تى ام ال
Code:background:
إذا أردت وضع خلفية للنص مثل صورة أو لون و يقبل كود code اللون أو رابط الصورة
Code:padding:
هذا الأمر يدخل ضمن اوامر المحاذاه و لكن المحاذاه غير المطلقة , تعلم أنه عندما تكتب أمام أمر المحاذاه right فإنها ستجعل المحاذاه لأفصى اليمين , و لكنك لا تريد ذلك بالتحديد , فيمكنك جعل المحاذاه لليمين قليلا
و يوضع أمام هذا الأمر من واحد إلى 4 أوامر يتم الفصل بينها بمسافة عادية كل منها يكون على صورة رقم بجواره px حيث تمثل px عدد بكسلات الشاشة عند العرض
و بالطبع وجود أربعة أكواد لتنظيم المحاذاه أعلى و أسفل و يمينا و يساراً , باختصار استخدم هذا الأمر لتخصيص العنصر الذى تعمل عليه على ذوقك و كما تحب بعيداً عن الخيارات المطلقة
بهذا نكون قد أنهينا ما يتعلق بملف css مع ملاحظة أنه عند التعديل يجب عليك تعديل فقرة و التأكد من نتيجة عملك فوراً و بعدها تكمل لفقرة أخرى
لا يشترط أن تعمل على كل الفقرات , هذا ما يتعلق بتعريب القوالب , لاتنس أن تحزم الملفات بعد الانتهاء من العمل عليها و تجربتها فى ملف مضغوط و ترفعه
أخيراً أرجو أن يكون الشرح طريقة واضح و مؤدى للغرض و لا تنسونا من صالح دعائكم
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
أرجو أن يكون الجميع بألف صحة و سلامة
تعتبر عملية قولبة جملة joomla أو Templating عملية صعبة نسبياً خاصة بالنسبة لشخص مبتدى
لذلك فكرت فى عمل هذا الموضوع ليكون بمثابة دليل مبسط
فقط كل ما تحتاج هو محرر نصوص متطور مثل Notepad++ و برنامج تحرير صور مثل GIMP أو فوتوشوب المستخدم بكثرة
فى البداية مم يتكون القالب template ؟
يتكون القالب template من ملفات و مجلدات تكون فى أغلب الأحوال كالتاالى ,
index.php و هذا هو أساس القالب template و جسر الربط بين مكونات القالب template المختلفة و بدونه لا يكون القالب template و هو ملف مكتوب بلغة php يتم فيه إصدار التعليمات لجملة joomla حول تمثيل الصور و الأحرف و ما إلى ذلك
template_thumbnail.png هذه الصورة المصغرة للقالب template , و معمتها هى عرض صورة للقالب template للمعاينة قبل الاستخدام وهى غير ذات أهمية فى عملية البرمجة مطلقاً و يمكن حذفها و سيعمل القالب template
templateDetails.xml هو ملف معلوماتى من الطراز الأول , حيث يقوم بإخبار جملة joomla بملفات القالب template جميعها كى تتعامل معها بشكل منطقى , كذلك يحفظ به صانع القالب template حقه , و لن تستخدمه إلا إذا كنت تنوى عمل قالب template منذ البداية
هذه كانت الملفات , ننتقل إلى المجلدات ,
/images يتضمن هذا المجلد جميع الصور المستخدمه لعرض القالب template
/css لخبراء لغة css يحتوى هذا المجلد على ملف وحيد بامتداد css غالباً , و لغة css هى التى تتحكم فى طريقة عرض الأحرف و حجمها و المؤثرات عليها و ما إلى ذلك
سؤال يطرح نفسه عند عمل تعديلات على قالب template موجود على السيرفر SERVER مباشرة
لنفرض أنك قمت بنعديل صورة ضمن مجلد /images و أردت استبدالها , فلماذا يرفض السيرفر SERVER ذلك ؟
هذه إحدى الأشياء التى تجعل المستخدم على وشك أن يفقد أعصابه و لكنها فى الحقيقة ميزة أمنية هامة ,
فجملة joomla تقوم بحماية تلك الملفات من الوصول إليها بطرق غير شرعية , تماماً إذا أردت حذف ملف من على ويندوز و هو مفتوح بواسطة أى برنامجالمهم , عند التعديل على قالب template , ماذا أفعل ؟
أولا يجب أن يكون لديك سيرفر SERVER محلى لأن ذلك سيخلصك من مشكلة التصاريح و تعقيدات نظام الملفات على لينكس المستخدم على السيرفر SERVERات ,
و بعد انتهاء التعديل على القالب template تقوم بضغط جميع الملفات فى ملف مضغوط بامتداد zip تماماً كما ترى فى القوالب التى تحصل عليها , و أخيراً ترفع الملف إلى جملة joomla من لوحة التحكم
كيف أقوم بتعريب قالب template ؟
تعريب القالب template عملية سهلة ولكنها تحتاج إلى وقت و اختبار
لذلك فالأفضل أن تتم على سيرفر SERVER محلى كما ذكرنا سابقاً
و يكون الدافع لها هو إعجابك بأحد القوالب الغربية و رغبتك فى تحويله لتستخدمه على موقعك العربى
هذا طبعاً من حقك حيث أن كل ذلك تحت اتفاقية البرامج مفتوحة المصدر
و لكن ذلك لا يبرر إزالة الحقوق , على الأقل من ملف xml
ندخل فى الجد ,
سوف تحتاج كما ذكرنا إلى محرر نصوص متطور مثل نوتباد ++ لفتح ملفات index.php و template.css
أولاً : قم بفتح ملف index.php ستجد فى أعلى الملف الكود code التالى :
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
قم باستبداله بالكود code التالى
Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
و لاحظ الكود code الجديد لتجد dir="rtl" قد أضيفت و هى الكفيلة بعكس اتجاه القالب template 180 درجة ليصبح من اليمين إلى اليسار
قبل أن نترك ملف index.php لحاله , قم بالبحث عن الكلمات التالية
iso-8859-1
أو
utf-8
فإذا وجدت أيا منهما قم باستبدالها ب windows-1256 حيث هذا هو ترميز عرض الحروف العربية لأن الترميزات السابقة خاصة بعرض الحروف اللاتينية
أخيراً , حتى ننهى التعامل مع ملف index.php إذا كانت خبرتك فى لغة php جيدة فسيمكنك اللعب بالكود code سواء بالحذف أو الاستبدال أو حتى بالإضافة لكى تعدل طريقة ظهور القالب template
فضلاً راجع هذا الرابط حول مدلولات ما تجده فى ملف index.php
http://www.joomlart.com/tutorials/templates_tutorial/mambo_layout.html (http://www.joomlart.com/tutorials/templates_tutorial/mambo_layout.html)
الآن ننتقل إلى ملف css بعد الانتهاء من ملف index.php قم بحفظه و فتح ملف css
على النقيض من ملف index.php و الذى لم يكن بالضرورة فهم ما يجتويه واجباً
أؤكد أنه قبل الشروع فى تعديل ملف css يجب عليك الإحاطه بكامل محتوياته
حتى تعلم جيداً ماذا تفعل و لا تتسبب فى ضياع مجهودك بسبب خطأ صغير
فى البداية يتكون ملف css من عدة فقرات قياسية , كل فقرة منها ترتبط بجزء من القالب template
لذلك فعند تعاملك مع احدى الفقرات
انس بقية الملف و تعامل معها كأنها ملف منفصل و هكذا حتى تعدل على بقية الفقرات
مثلا , هذه تعتبر فقرة
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.joomlart.com/tutorials/templates_tutorial/understanding_mambo_css_in_5_minutes.html)
و هذا الرابط أيضاً
http://www.joomlaos.de/CSS_Guide.html (http://www.joomlaos.de/CSS_Guide.html)
حيث لا يمكن أن يخرج أى قالب template عن هذه الأطر القياسية , و هذا هو سبب وجود العديد من القوالب لجملة joomla أو لمامبو فى ما سبق
فمثلا إذا وجدت فى ملف css فقرة بعنوان a:mainlevel:link فهذا يعنى أنك ستتعامل مع القائمة الرئيسية أو أى قائمة للموقع
لنتقدم أكثر لندرك ماذا يجب تغييره حتى يتم تعريب القالب template ,
أول الأوامر التى يجب ملاحظتها و هى من أهم الأوامر هى
Code:float :
حيث يعمل هذا الأمر على التحكم فى محاذاه عنصر معين مثل القوائم و المحتوى و ما إلى ذلك
يتم وضع الأوامر left أو right أو center
فمثلاً و كما ستجد فى القوالب الغربية يكون الأمر
Code:float : left;
فقم بتغيير كلمة left إلى right و لا تنس إضافة الفاصلة المنقوطة بعد كل أمر
ثانى الأوامر هو
Code:font-family:
من منا يكره الخط الذى يتم عرض المحتوى به فى القالب template الافتراضى ؟
هذا لا لشىء إلا بسبب أن من يصنع القالب template قد قام وضع الخط
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
هذه الأوامر التى تتعلق بالتعريب ,
لاحظ جيداً أنه قد يتوجب عليك إضافتها لإحدى الفقرات , حيث قد لا تكون موجودة بالضرورة
و تتعامل معها جملة joomla على أنها يسار بشكل افتراضى و تذكر أنها تضاف فى سطر جديد بين بداية و نهاية الفقرة
توجد اوامر أخرى مثل
Code:color:
و أمامه يوضع كود code اللون بصيغة اتش تى ام ال
Code:background:
إذا أردت وضع خلفية للنص مثل صورة أو لون و يقبل كود code اللون أو رابط الصورة
Code:padding:
هذا الأمر يدخل ضمن اوامر المحاذاه و لكن المحاذاه غير المطلقة , تعلم أنه عندما تكتب أمام أمر المحاذاه right فإنها ستجعل المحاذاه لأفصى اليمين , و لكنك لا تريد ذلك بالتحديد , فيمكنك جعل المحاذاه لليمين قليلا
و يوضع أمام هذا الأمر من واحد إلى 4 أوامر يتم الفصل بينها بمسافة عادية كل منها يكون على صورة رقم بجواره px حيث تمثل px عدد بكسلات الشاشة عند العرض
و بالطبع وجود أربعة أكواد لتنظيم المحاذاه أعلى و أسفل و يمينا و يساراً , باختصار استخدم هذا الأمر لتخصيص العنصر الذى تعمل عليه على ذوقك و كما تحب بعيداً عن الخيارات المطلقة
بهذا نكون قد أنهينا ما يتعلق بملف css مع ملاحظة أنه عند التعديل يجب عليك تعديل فقرة و التأكد من نتيجة عملك فوراً و بعدها تكمل لفقرة أخرى
لا يشترط أن تعمل على كل الفقرات , هذا ما يتعلق بتعريب القوالب , لاتنس أن تحزم الملفات بعد الانتهاء من العمل عليها و تجربتها فى ملف مضغوط و ترفعه
أخيراً أرجو أن يكون الشرح طريقة واضح و مؤدى للغرض و لا تنسونا من صالح دعائكم
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
