الجزء الاول من دورة تصميم قالب joomla

Eng Ahmed

ادارة المنتدى
9 مارس 2008
3,318
11
38
www.support-ar.com

" قَالُوا سُبْحَانَكَ لَا عِلْمَ لَنَا إِلَّا مَا عَلَّمْتَنَا إِنَّكَ أَنْتَ الْعَلِيمُ الْحَكِيمُ "

(البقرة 32)

kugca3bk2wbh9d3jswj.gif


عن أبي هريرة قال قال رسول الله : صلى الله عليه وسلم

من سئل عن علم فكتمه ألجمه الله بلجام من نار يوم القيامة

ورواه ابن ماجه والترمذي وحسنه من حديث علي بن الحكم له طرق عن علي بن الحكم ، وعلي من رجال البخاري ، ووثقه ابن سعد وأبو داود وغيرهما .

kugca3bk2wbh9d3jswj.gif


بسم الله

اننى أحاول ان أضيف لكم ماتعلمته عن طريق الاحتكاك الحقيقى وربما لا يكون ذو أهميه عند البعض ولكن ربما يفيد آخرين وهى في النهاية سوف تكون مرجع متواضع لمن يرغب .
kugca3bk2wbh9d3jswj.gif


تنفرد joomla بأسلوب فريد وغير مسبوق في إداراتها للمواقع حيث إنها لا تقوم بإنشاء أي صفحات تنشا عليها محتواها بل تقوم بإنشاء محتواها في قاعدة بيانات وتقوم باستدعائها لتضعها لك في أماكنها التي تقوم بتخصصيها عن طريق الموديولات التي تقوم بتصميمها في القالب الخاص بك ونحن هنا لن نخوض في طريقة برمجة joomla الرهيبة بل الغرض هو التعريف وطريقة تركيب وتصميم القالب والتي تتميز بمرونة غير عادية جعلتها تحوز هذه المكانة بين تطبيقات إدارة محتوي المواقع .
kugca3bk2wbh9d3jswj.gif

في البداية يجب أن نعرف أن هناك ارتباطا وثيقا بين تصميم قالب لجملة و بين الخيارات الأساسية للقوائم التى تحتويها إدارة الموديلات فى لوحة تحكم جملة –
بمعنى أن البوسيشن - Position - الخاص مثلا بقائمة المنيو- mod-mainmenu - الموجودة فى إدارة المديولات كما بالصورة التالية

7iawhu166s9vds5yn8y.jpg




نلاحظ المربع الأحمر و الذي يحتوى على لائحة طبقة الموديل - Module Class Suffix - و هي التي تحتوى على الامتداد الذي يخبر ملف Index الخاص بالقالب بطريقة ما سوف نشرحها بطريقة العرض –
بمعنى أننا عندما نقوم بتصميم مكان للموديل فإننا نحدد له الوضع الذى سوف يظهر فيه فى واجهة الموقع

نوضح أكثر !!

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

·None
·Table
·Xhtml
·Rounded
·Horizons
·Outline

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

"modules" name="user1" style="none"

فى هذا الكود فإننا نخبر ملف index بصيغة عرض الموديل أن يكون Position الخاص به هو None كما بالكود كلمة None هنا يفهمها ملف index على أنها أمر ان لا يطبق اى Position و يعتمد على Positioncss الأساسي للقالب

ولو وضعناه بهذه الصيغة

"modules" name="user1" style=" Rounded"

فإن هذا يعنى أن ملف index سيعرض القوائم بصورة منفصلة عن بعضها كما هو موجود في القالب الأفتراضى لجملة تعال نرى تطبيق لهذه المعلومات لنرى معنى ما قلناه
أفتح القالب الأفتراضى و أنظر الى القوائم سنجد أن القائمة الرئيسية و القائمة التى تليها و هى مصادر جملة هذه القوائم تم وضعها فى شكل منفصل و لو نظرنا الى القائمة اليمنى فهى ليس لها إطار هذا هو الفرق !!!


8ug2mw52yc65ittak51.jpg



فالقائمة اليسرى تم اختيار الكود

"modules" name="user1" style=" Rounded "
و فى القائمة اليمنى

"modules" name="user1" style=" Xhtm

السؤال – ؟

هل يجب كتابة style الخاص بكل موديل فى ملف index ؟

الإجابة : لا
يمكنك أن تخبر جملة نفسها أن تعرض بالصيغة التى تريدها عن طريق الصورة الأولى و التى فيها لاحقة الموديل وخيارات أخرى خاصة بنطاق Position و التي نخبر فيها جملة ان تعرض القائمة اليسرى بقوائم منفصلة و هذا الذى تجده داخل المربع الأحمر .
هنا قد يبدر الى ذهنك سؤال –

أنت تقول ان عندما أضع Rounded فإنه يعرض قوائم منفصلة و في الصورة مكتوب menu_ الموجودة داخل المربع الأحمر بالصورة

الإجابة هنا

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

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

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

فيمكنك اختراع طريقة عرض خاصة بك و تضعها فى هذه الخانة بأي أسم ترغبه كما يحدث الآن مع قوالب Joomlart حيث تم برمجة لائحة تسمى FS1,FS2,FS3 لتعرض الموديل بصورة معينة كما بالصورة التوضيحية

d1rglmfutt6vfh9z4lrp.jpg


qbns4hahk566cb9qpaby.jpg


gyyiwr3t09i83vml1ps.jpg


و هذا ليس معناه ان نتجاهل ملف index عندما نقوم بتصميمه و لكن هذا يتم بطرق متعددة فيمكن الا نذكر فى ملف اindex اىPosition على الإطلاق و يكفى ان نضع برمجته فقط فى index لتتكرر مع المديولات في نفس المكان و نشير إليها فى لوحة تحكم جملة
قد يبدو الأمر مبهم لبعض المبتدئين بعض الشئ و لكن صدقني هو فى غاية غاية السهولة عندما اقوم بشرحه باستفاضة ستجد الأمر فى منتهى السهولة
kugca3bk2wbh9d3jswj.gif

ألان لنطلق لبدا العمل وتجهيز ورشة العمل الخاصة بالقالب

الأن سنقوم بتصميم القالب بصورته الأفتراضية و سنجعله مثل القوالب العالمبة ببعض التعديلات من خلال لوحة التحكم و بعض أوامر الكلاسات الجاهزة و التى ستجعل القالب فى النهاية إحدى روائع قوالب جملة
أول المهام الآن و هو تجهيز قالب من الصفر لجملة أعتمادا على احد الملفات الجاهزة للقالب Html و سوف اقوم فى نهاية الدورة بشرح كيف تقوم بعمل تصميم و تقطيعه و ربطه بملفات ال CSS لأستخدامه فى تصميم قالب لجملة

الخطوة الأولى:- وهى تجهيز برنامج الدريم ويفر وربطه بالسيرفر المحلى ليكون السيرفر الذي سوف نقوم بالتعديل عليه لعمل ذلك اتبع الصور التالية
j3f4k1py4t4gne2jn4ct.jpg


gqtqrk58tfto1rpmghr.jpg




فى الخانة رقم 1 قم باختيار أسم لموقع و ليس للقالب فى حالتنا هذه قمنا بتسميته Joomlaeyes
فى الخانة رقم 2 ضع مسار مجلد القوالب على السيرفر الخاص بك localhost
فى الخانة 3 أتركها كما هى
فى الخنة رقم 4 ضع عنوان السيرفر المحلى
فى الخانة 5 قم بإزالة العلامة حيث ان قوالب جملة لا تستسيغ هذا الخيار و هو الكاش ثم أضغط Ok

ستجد أن الموقع قد ظهر فى قائمة اللوكال فايل كما فى الصورة التالية و يحتوى على القوالب الأفتراضية السابق إضافتها فى الكود الأساسي لجملة
39aiw8hhnurq7rz8j89e.jpg



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

الخطوة الثانية:-
من المفترض أنك قمت بتثبيت الإضافة Dr fourm1.5 الخاصة بصناعة موديلات القالب و هذه الإضافة تعمل على جميع إصدارات برنامج Dreamweaver و هنا استخدمت الأصدار CS3 بناءا على رغبة الكثير من الأعضاء لعدم توفر النسخة CS4 و الأختلاف الوحيد فى القوائم و ليست فى الإضافة نفسها فهى تظهر كما بالصورة التالية
f5yu3ar8mn6egxo1p70.jpg



و تظهر فى قائمة انسرت كما فى الصورة التالية


vtfb74aosivv99fpx5up.jpg



و سنتعرض لها فى الشرح التالى عندما نقوم بوضع المديولات
لكن أنتبه لما هو داخل الأطار الأحمر لأننا سوف نستخدمه بطريقة خاصة
الأن نقوم بفتح السيرفير المحلى و الدخول الى ملف القوالب و نضيف ملف القالب المصمم بلغة Html و الذى قمت بتحميله و ضعه داخل ملف التمبليت
بالرجوع مرة أخرى الى برنامج Dreamweaver و أنظر ستجد القالب يظهر فى قائمة السيرفر المحلى و يظهر فيه ملف الأندكس بصيغة Html و الذى سوف نقوم بسحبه لتصميم قالبنا الجديد كذلك يظهر ملف CSS و كذلك يظهر ملف الأيميج و الذى سوف نقوم باستخدام الصور الموجودة بداخله .

wr89z02pdedkoj6de6kk.jpg


i5ysh8kgeydg4h76q0a.jpg




الأن الخطوة الأولى فى إنشاء القالب
وانتباه جيدا

من قائمة ملف جديد اختار ملف بى اتش بى فارغ سيظهر الملف بالصورة التالية
4yrr7psemqzzc8ynj1n7.jpg




ثم أضغط على New مرة أخرى و أختار ملف جديد CSS
ثم ملف جديد و أختار ملف جديد xml
الآن أصبح لدينا 3ملفات مفتوحة كما بالصورة التالية

twc1e4q1vxsxaavzv9i2.jpg




الأول سيكون ملفindex الخاص بالقالب
الثاني سيكون ملف CSS الخاص بالقالب
الثالث سيكون ملف xml
نعود مرة أخرى الى السيرفر المحلى و نقوم بفتح مجلد template و نقوم بفتح القالب الأفتراضى لجملة كما فى الصورة التالية

n4svjx6viinpqbop57hg.jpg



قبل كل شئ يجب ان نتعرف على محتويات هذا القالب و تذكر اننا أنشانا ثلاثة ملفات بالدريم ويفر
و بنظرة على الصورة سنجد أن الملفات التى تم تعليمها باللون الأحمر هى ملفات اساسية فى جميع القوالب التى سوف نقوم بالشرح عليها أى انها تستخدم هى هى كل مرة فهى لا تتغير ما عدا ملف Html فهو يضاف عليه بعض الأشياء مثل دفتر الزوار او فورم الدخول إذا رغبت ان يكون له وضعية خاصة و هذا ما سنقوم بشرحة فى مرحلة متقدمة
اما بقية الملفات فسيتم التعديل عليها بما يتفق مع تصميمنا الجديد


السؤال – هل يمكن أخد نسخة من هذه الملفات و استخدامها بديل للملفات التى انشاناها ببرنامج Dreamweaver أتتذكرها الثلاث ملفات


الإجابة– بالطبع نعم يمكن اخذ نسخة كاملة من هذا القالب الأفتراضى و مسح محتوياته بالكامل و بالطبع الغير معلم عليها باللون الأحمر و لكننا هنا نريد ان نتعلم من الصفر و تستطيع بعد ذلك ان تأخذ نسخة من اى قالب تريده بشرط ان يكون مطابق للقالب الأفتراضى .
ملحوظة – هذا بالنسبة للمبتدئين علما هناك محترفون يستطيعون تغيير الكلاسات (DIv) لأى قالب و سحبه لإنشاء قالب جديد
بمعنى انك لو حاولت الأن سحب اى قالب و العمل عليه بدون معرفة سابقة لكيفية وضع المديولات و الديفات و الكلاسات الخاصة به فسيخرب تصميمك
لأن اساس التعامل بين ملفات القالب هو نظام النداءات التكاملية أى ان كل ملف من ملفات القالب يؤدى غرض معين و فى وقت معين و بطريقة معينة حينما يطلب منه ذلك
و الأهم اننا سوف نتعلم اين نضع الكلاسات و Div الأساسية و من بعدها ستجد الأمور أكثر متعة و سهولة


بقى شئ واحد و هو ان نتعرف على دور باقى الملفات الغير محددة باللون الأحمر فملف index معرف انه الملف الأساسى للقالب و هو يساوى الملف رقم 1 الذي انشأ ناه ببرنامج Dreamweaver


و فولدر ال CSS سوف يحتوى على الملف رقم 2 الذى انشاناه فى برنامج Dreamweaver


أما ملف templateDetails فهو الذى يحتوى على مسارات القالب و محتوياته من صور و ملفات و هو المسئول الأول و الأخير عن تركيب القالب و أى خطا به لن يعمل القالب و سنتعلم كيفية إنشاء ملف أفتراضى خاص بنا يحمل حقوق تصميمنا لنستخدمه فى كل مرة نقوم بتصميم قالب
ملف images معروف انه يحتوى على صور التصميم أما الصورة template_thumbnail فهى صورة مصغرة للقالب و تظهر فى لوحة التحكم عن الوقوف على اسم القالب
نعود مرة أخرى الى ملف template في السرفر المحلى و ننشئ فولدر جديد و نسميه my_template
و هو الذى سنضع فيه ملفات القالب الجديد الذي سوف نقوم بتصميمه
و نعود مرة أخرى الى القالب الأفتراضى و نقوم بنسخ الملفات المعلم عليها باللون الأحمر و إضافتها الى القالب الذى قمنا بإنشائه و نقوم بإضافتها الى مجلد القالب الجديد و يمكنك اخذ نسخة من مجلد images او إنشاء ملف جديد و لا تنسى ايضا إنشاء فولدر و نسميه بأسم CSS و الذى سوف نضع فيه ملف CSS للاتجاهات سواء اليسرى أو اليمنى و احدهم هو الملف الذي سبق و أنشانا فى برنامج Dreamweaver علما بأنه سوف يتم تغيير اتجاه القالب اتوماتيكيا بدون طرق التعريب المتعارف عليها
أنظر الى الصورة التالية – أصبح المجلد بهذا الشكل و لم يتبقى لإنشاء القالب سوى الثلاث ملفات التى انشأناهم ببرنامج Dreamweaver

161sp11q0wnx929iqag.jpg





نعود مرة أخرى الى برنامج Dreamweaver و نقوم بالضغط على الملف الأول رقم 1 File ثم Save As و نغير اسمه الى index و نحفظه داخل المجلد my_templates الذى قمنا بإنشائه
ثم نضغط على الملف رقم 2 و هو ملف CSS ثم Save As و نضعه داخل مجلد ال CSS داخل مجلد my_templates و نسميه template
ثم نعود الى الملف رقم 3 Save As و نحفظه داخل مجلد my_templates و نسميه templateDetails


ملحوظة – تذكر ان يكون امتداد الحفظ هو نفس الامتداد الذى انشأت به الملفات. بمعنى ان الأندكس يجب ان يكون index.php و template.css و templateDetails.xml ليصبح فى النهاية لدينا القالب بهذا الشكل كما بالصورة التالية


3xrfrn6eem2rdvgrzoot.jpg



بقى شئ هام – قم بفتح مجلد CSS و قم بأخذ نسخة من ملف template.css و أنسخه مرة أخرى بهذا الأسم template_rtl


kugca3bk2wbh9d3jswj.gif

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

kugca3bk2wbh9d3jswj.gif


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

http://www.traidnt.net/vb/showthread.php?t=765329


kugca3bk2wbh9d3jswj.gif


والى الدرس القادم والذي كما قلت لكم سابقا انه لن يستغرق الامر اكثر من عشرة دقائق لتصمم قالب بالطبع افتراضي بالتصميم الذي ترغبه اما الضبط النهائي للأوضاع الرائعة التي نرها على شبكة الانترنت فسوف نصل إليها سويا ان شاء الله لنخرج معا في النهاية بقالب نفتخر بأنه فكر عربي وإبداع عربي
kugca3bk2wbh9d3jswj.gif

فى انتظر ردودكم وتقيمكم للشرح وأسئلتكم حول هذا الجزء حتى يكون حافزلاكمال الدورة على أحسن وجه
kugca3bk2wbh9d3jswj.gif

ولكن انتظر الحصريات لدينا لاتنتهي فمع الدرس القادم سنستخدم إضافة أخرى رائعة
Template Kit الرهيبة
kugca3bk2wbh9d3jswj.gif

مقدمة الدورة
https://support-ar.net/forums/showthread.php?t=16567