romaissa
11-01-2013, بتوقيت غرينيتش 07:05 AM
قَالُوا سُبْحَانَكَ لَا عِلْمَ لَنَا إِلَّا مَا عَلَّمْتَنَا إِنَّكَ أَنْتَ الْعَلِيمُ الْحَكِيمُ
(البقرة 32)
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
عن أبي هريرة (http://www.islamweb.net/newlibrary/showalam.php?ids=3)قال قال رسول الله : صلى الله عليه وسلم
من سئل عن علم فكتمه ألجمه الله بلجام من نار يوم القيامة (http://www.islamweb.net/newlibrary/display_book.php?idfrom=235&idto=235&bk_no=43&ID=180#docu)
ورواه ابن ماجه (http://www.islamweb.net/newlibrary/showalam.php?ids=13478)والترمذي وحسنه من حديث علي بن الحكم له طرق عن علي بن الحكم ، وعلي (http://www.islamweb.net/newlibrary/showalam.php?ids=8)من رجال البخاري ، (http://www.islamweb.net/newlibrary/showalam.php?ids=12070)ووثقه ابن سعد وأبو داود وغيرهما .
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
وروى ابن ماجه (http://www.islamweb.net/newlibrary/showalam.php?ids=13478)عن أبي هريرة (http://www.islamweb.net/newlibrary/showalam.php?ids=3)قال قال : رسول الله صلى الله عليه وسلم
أفضل الصدقة أن يتعلم المسلم علما ثم يعلمه أخاه المسلم
(http://www.islamweb.net/newlibrary/display_book.php?idfrom=235&idto=235&bk_no=43&ID=180#docu)
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
بسم الله
اننى أحاول ان أضيف لكم ماتعلمته عن طريق الاحتكاك الحقيقى وربما لا يكون ذو أهميه عند البعض ولكن ربما يفيد آخرين وهى في النهاية سوف تكون مرجع متواضع لمن يرغب .
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
تنفرد joomla بأسلوب فريد وغير مسبوق في إداراتها للمواقع حيث إنها لا تقوم بإنشاء أي صفحات تنشا عليها محتواها بل تقوم بإنشاء محتواها في قاعدة بيانات وتقوم باستدعائها لتضعها لك في أماكنها التي تقوم بتخصصيها عن طريق الموديولات التي تقوم بتصميمها في القالب template الخاص بك ونحن هنا لن نخوض في طريقة برمجة joomla الرهيبة بل الغرض هو التعريف وطريقة تركيب install وتصميم القالب template والتي تتميز بمرونة غير عادية جعلتها تحوز هذه المكانة بين تطبيقات إدارة محتوي المواقع .
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
في البداية يجب أن نعرف أن هناك ارتباطا وثيقا بين تصميم قالب template لجملة joomla و بين الخيارات الأساسية للقوائم التى تحتويها إدارة الموديلات فى لوحة تحكم جملة joomla –
بمعنى أن البوسيشن - Position - الخاص مثلا بقائمة المنيو- mod-mainmenu - الموجودة فى إدارة المديولات كما بالصورة التالية
http://joomlaeyes.com/upload/images/7iawhu166s9vds5yn8y.jpg
نلاحظ المربع الأحمر و الذي يحتوى على لائحة طبقة الموديل - Module Class Suffix - و هي التي تحتوى على الامتداد الذي يخبر ملف Index الخاص بالقالب template بطريقة ما سوف نشرح طريقةها بطريقة العرض –
بمعنى أننا عندما نقوم بتصميم مكان للموديل فإننا نحدد له الوضع الذى سوف يظهر فيه فى واجهة interface الموقع
نوضح أكثر !!
الموديلات فى قوالب جملة joomla توضع فى ستة أوضاع فقط لا يمكن أن تخرج عنها و هى التى يفهمها التصميم او كود code جملة joomla المبرمج بلغة PHP التى تم تصميم القالب template بها
فهى إما
·None
·Table
·Xhtml
·Rounded
·Horizons
·Outline
هذه الوضعيات لطرق العرض بمعنى لو فرضنا إننا نضع Position للأستايل style فى القالب template الذي نصممه فإن القالب template لا يفهم سوى الستة وضعيات السابق شرح طريقةهم و يجب أن نحدد له وضعية المد يول
"modules" name="user1" style="none"
فى هذا الكود code فإننا نخبر ملف index بصيغة عرض الموديل أن يكون Position الخاص به هو None كما بالكود code كلمة None هنا يفهمها ملف index على أنها أمر ان لا يطبق اى Position و يعتمد على Positioncss الأساسي للقالب template
ولو وضعناه بهذه الصيغة
"modules" name="user1" style=" Rounded"
فإن هذا يعنى أن ملف index سيعرض القوائم بصورة منفصلة عن بعضها كما هو موجود في القالب template الأفتراضى لجملة joomla تعال نرى تطبيق لهذه المعلومات لنرى معنى ما قلناه
أفتح القالب template الأفتراضى و أنظر الى القوائم سنجد أن القائمة الرئيسية و القائمة التى تليها و هى مصادر جملة joomla هذه القوائم تم وضعها فى شكل منفصل و لو نظرنا الى القائمة اليمنى فهى ليس لها إطار هذا هو الفرق !!!
http://joomlaeyes.com/upload/images/8ug2mw52yc65ittak51.jpg
فالقائمة اليسرى تم اختيار الكود code
"modules" name="user1" style=" Rounded "
و فى القائمة اليمنى
"modules" name="user1" style=" Xhtm
السؤال – ؟
هل يجب كتابة style الخاص بكل موديل فى ملف index ؟
الإجابة : لا
يمكنك أن تخبر جملة joomla نفسها أن تعرض بالصيغة التى تريدها عن طريق الصورة الأولى و التى فيها لاحقة الموديل وخيارات أخرى خاصة بنطاق Position و التي نخبر فيها جملة joomla ان تعرض القائمة اليسرى بقوائم منفصلة و هذا الذى تجده داخل المربع الأحمر .
هنا قد يبدر الى ذهنك سؤال –
أنت تقول ان عندما أضع Rounded فإنه يعرض قوائم منفصلة و في الصورة مكتوب menu_ الموجودة داخل المربع الأحمر بالصورة
الإجابة هنا
أن الستة امتدادات التي يفهمها index الخاص بكود code جملة joomla بلغة PHP و السابق ذكرهم يقابلهم 6 امتدادات أخرى تفهمها جملة joomla فلو وضعنا Rounded فى ملف index فيجب ان نضع لائحة الطبقة الخاصة بالموديل بهذه الصورة و هكذا في كل المديولات السابق ذكرهم لهم لغة خاصة تفهمها جملة joomla
و هذا هو السر في الأوضاع الرائعة التى تظهر بها القوالب العالمية ولا نستطيع ان نركب القالب template بنفس الصورة التى نرها ونظن ان التعريب هو الحل ... انا نفسي كنت أظن ذلك ولكن خاب ظني
السؤال هنا
لماذا ذكرت هذا الموضوع الأن بالرغم من أنى سوف اقوم بشرح طريقةه فى النهاية
الإجابة
أن تغيير و شكل و طريقة عرض الموديل فى موقعك لا يعتمد بشكل أساسي على تصميم ملف index الخاص بالقالب template
وهذا هو السر فإننا عندما نقوم بتركيب install اى قالب template اجنبى فإنه لا يظهر بنفس الصورة التى نراها لأننا لا نضع توافق بين الأمر الصادر من ملف index و بين طريقة العرض و ل ئحة طبقة المد يول التى نضعها فى خصائص الموديل فى لوحة التحكم فلو نظرنا فى الصورة التالية لأحد قوالب شركة Joomlart سنجد تأكيد لما نقول فهذه اللائحة المشار إليها باللون الأخضر هي المسئولة عن تجعل الموديل يظهر بهذه الصورة التي تراها فى الصورة التوضيحية
فيمكنك اختراع طريقة عرض خاصة بك و تضعها فى هذه الخانة بأي أسم ترغبه كما يحدث الآن مع قوالب Joomlart حيث تم برمجة لائحة تسمى FS1,FS2,FS3 لتعرض الموديل بصورة معينة كما بالصورة التوضيحية
http://joomlaeyes.com/upload/images/d1rglmfutt6vfh9z4lrp.jpg
http://joomlaeyes.com/upload/images/qbns4hahk566cb9qpaby.jpg
http://joomlaeyes.com/upload/images/gyyiwr3t09i83vml1ps.jpg
و هذا ليس معناه ان نتجاهل ملف index عندما نقوم بتصميمه و لكن هذا يتم بطرق متعددة فيمكن الا نذكر فى ملف اindex اىPosition على الإطلاق و يكفى ان نضع برمجته فقط فى index لتتكرر مع المديولات في نفس المكان و نشير إليها فى لوحة تحكم جملة joomla
قد يبدو الأمر مبهم لبعض المبتدئين بعض الشئ و لكن صدقني هو فى غاية غاية السهولة عندما اقوم بشرح طريقةه باستفاضة ستجد الأمر فى منتهى السهولة
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
ألان لنطلق لبدا العمل وتجهيز ورشة العمل الخاصة بالقالب template
الأن سنقوم بتصميم القالب template بصورته الأفتراضية و سنجعله مثل القوالب العالمبة ببعض التعديلات من خلال لوحة التحكم و بعض أوامر الكلاسات الجاهزة و التى ستجعل القالب template فى النهاية إحدى روائع قوالب جملة joomla
أول المهام الآن و هو تجهيز قالب template من الصفر لجملة joomla أعتمادا على احد الملفات الجاهزة للقالب template Html و سوف اقوم فى نهاية الدورة بشرح طريقة كيف تقوم بعمل تصميم و تقطيعه و ربطه بملفات ال CSS لأستخدامه فى تصميم قالب template لجملة joomla
الخطوة الأولى:- وهى تجهيز برنامج الدريم ويفر وربطه بالسيرفر SERVER المحلى ليكون السيرفر SERVER الذي سوف نقوم بالتعديل عليه لعمل ذلك اتبع الصور التالية
http://joomlaeyes.com/upload/images/j3f4k1py4t4gne2jn4ct.jpg
http://joomlaeyes.com/upload/images/gqtqrk58tfto1rpmghr.jpg
فى الخانة رقم 1 قم باختيار أسم لموقع و ليس للقالب template فى حالتنا هذه قمنا بتسميته Joomlaeyes
فى الخانة رقم 2 ضع مسار مجلد القوالب على السيرفر SERVER الخاص بك localhost
فى الخانة 3 أتركها كما هى
فى الخنة رقم 4 ضع عنوان السيرفر SERVER المحلى
فى الخانة 5 قم بإزالة العلامة حيث ان قوالب جملة joomla لا تستسيغ هذا الخيار و هو الكاش ثم أضغط Ok
ستجد أن الموقع قد ظهر فى قائمة اللوكال فايل كما فى الصورة التالية و يحتوى على القوالب الأفتراضية السابق إضافتها فى الكود code الأساسي لجملة joomla
http://joomlaeyes.com/upload/images/39aiw8hhnurq7rz8j89e.jpg
الى هنا قد تم تجهيز على السيرفر SERVER المحلى للعمل عليه علما بأنه جارى رفع سيرفير خاص بجملة joomla عيون العربية مجهز بكافة الأدوات اللازمة لتجربة و صناعة جملة joomla
الخطوة الثانية:-
من المفترض أنك قمت بتثبيت setup الإضافة Dr fourm1.5 الخاصة بصناعة موديلات القالب template و هذه الإضافة تعمل على جميع إصدارات برنامج Dreamweaver و هنا استخدمت الأصدار CS3 بناءا على رغبة الكثير من الأعضاء لعدم توفر النسخة CS4 و الأختلاف الوحيد فى القوائم و ليست فى الإضافة نفسها فهى تظهر كما بالصورة التالية
http://joomlaeyes.com/upload/images/f5yu3ar8mn6egxo1p70.jpg
و تظهر فى قائمة انسرت كما فى الصورة التالية
http://joomlaeyes.com/upload/images/vtfb74aosivv99fpx5up.jpg
و سنتعرض لها فى الشرح طريقة التالى عندما نقوم بوضع المديولات
لكن أنتبه لما هو داخل الأطار الأحمر لأننا سوف نستخدمه بطريقة خاصة
الأن نقوم بفتح السيرفير المحلى و الدخول الى ملف القوالب و نضيف ملف القالب template المصمم بلغة Html و الذى قمت بتحميله و ضعه داخل ملف التمبليت
بالرجوع مرة أخرى الى برنامج Dreamweaver و أنظر ستجد القالب template يظهر فى قائمة السيرفر SERVER المحلى و يظهر فيه ملف الأندكس بصيغة Html و الذى سوف نقوم بسحبه لتصميم قالب templateنا الجديد كذلك يظهر ملف CSS و كذلك يظهر ملف الأيميج و الذى سوف نقوم باستخدام الصور الموجودة بداخله .
http://joomlaeyes.com/upload/images/wr89z02pdedkoj6de6kk.jpg
http://joomlaeyes.com/upload/images/i5ysh8kgeydg4h76q0a.jpg
الأن الخطوة الأولى فى إنشاء القالب template
وانتباه جيدا
من قائمة ملف جديد اختار ملف بى اتش بى فارغ سيظهر الملف بالصورة التالية
http://joomlaeyes.com/upload/images/4yrr7psemqzzc8ynj1n7.jpg
ثم أضغط على New مرة أخرى و أختار ملف جديد CSS
ثم ملف جديد و أختار ملف جديد xml
الآن أصبح لدينا 3ملفات مفتوحة كما بالصورة التالية
http://joomlaeyes.com/upload/images/twc1e4q1vxsxaavzv9i2.jpg
الأول سيكون ملفindex الخاص بالقالب template
الثاني سيكون ملف CSS الخاص بالقالب template
الثالث سيكون ملف xml
نعود مرة أخرى الى السيرفر SERVER المحلى و نقوم بفتح مجلد template و نقوم بفتح القالب template الأفتراضى لجملة joomla كما فى الصورة التالية
http://joomlaeyes.com/upload/images/n4svjx6viinpqbop57hg.jpg
قبل كل شئ يجب ان نتعرف على محتويات هذا القالب template و تذكر اننا أنشانا ثلاثة ملفات بالدريم ويفر
و بنظرة على الصورة سنجد أن الملفات التى تم تعليمها باللون الأحمر هى ملفات اساسية فى جميع القوالب التى سوف نقوم بالشرح طريقة عليها أى انها تستخدم هى هى كل مرة فهى لا تتغير ما عدا ملف Html فهو يضاف عليه بعض الأشياء مثل دفتر الزوار او فورم الدخول إذا رغبت ان يكون له وضعية خاصة و هذا ما سنقوم بشرح طريقةة فى مرحلة متقدمة
اما بقية الملفات فسيتم التعديل عليها بما يتفق مع تصميمنا الجديد
السؤال – هل يمكن أخد نسخة من هذه الملفات و استخدامها بديل للملفات التى انشاناها ببرنامج Dreamweaver أتتذكرها الثلاث ملفات
الإجابة– بالطبع نعم يمكن اخذ نسخة كاملة من هذا القالب template الأفتراضى و مسح محتوياته بالكامل و بالطبع الغير معلم عليها باللون الأحمر و لكننا هنا نريد ان نتعلم من الصفر و تستطيع بعد ذلك ان تأخذ نسخة من اى قالب template تريده بشرط ان يكون مطابق للقالب template الأفتراضى .
ملحوظة – هذا بالنسبة للمبتدئين علما هناك محترفون يستطيعون تغيير الكلاسات (DIv) لأى قالب template و سحبه لإنشاء قالب template جديد
بمعنى انك لو حاولت الأن سحب اى قالب template و العمل عليه بدون معرفة سابقة لكيفية وضع المديولات و الديفات و الكلاسات الخاصة به فسيخرب تصميمك
لأن اساس التعامل بين ملفات القالب template هو نظام النداءات التكاملية أى ان كل ملف من ملفات القالب template يؤدى غرض معين و فى وقت معين و بطريقة معينة حينما يطلب منه ذلك
و الأهم اننا سوف نتعلم اين نضع الكلاسات و Div الأساسية و من بعدها ستجد الأمور أكثر متعة و سهولة
بقى شئ واحد و هو ان نتعرف على دور باقى الملفات الغير محددة باللون الأحمر فملف index معرف انه الملف الأساسى للقالب template و هو يساوى الملف رقم 1 الذي انشأ ناه ببرنامج Dreamweaver
و فولدر ال CSS سوف يحتوى على الملف رقم 2 الذى انشاناه فى برنامج Dreamweaver
أما ملف templateDetails فهو الذى يحتوى على مسارات القالب template و محتوياته من صور و ملفات و هو المسئول الأول و الأخير عن تركيب install القالب template و أى خطا به لن يعمل القالب template و سنتعلم كيفية إنشاء ملف أفتراضى خاص بنا يحمل حقوق تصميمنا لنستخدمه فى كل مرة نقوم بتصميم قالب template
ملف images معروف انه يحتوى على صور التصميم أما الصورة template_thumbnail فهى صورة مصغرة للقالب template و تظهر فى لوحة التحكم عن الوقوف على اسم القالب template
نعود مرة أخرى الى ملف template في السرفر المحلى و ننشئ فولدر جديد و نسميه my_template
و هو الذى سنضع فيه ملفات القالب template الجديد الذي سوف نقوم بتصميمه
و نعود مرة أخرى الى القالب template الأفتراضى و نقوم بنسخ الملفات المعلم عليها باللون الأحمر و إضافتها الى القالب template الذى قمنا بإنشائه و نقوم بإضافتها الى مجلد القالب template الجديد و يمكنك اخذ نسخة من مجلد images او إنشاء ملف جديد و لا تنسى ايضا إنشاء فولدر و نسميه بأسم CSS و الذى سوف نضع فيه ملف CSS للاتجاهات سواء اليسرى أو اليمنى و احدهم هو الملف الذي سبق و أنشانا فى برنامج Dreamweaver علما بأنه سوف يتم تغيير اتجاه القالب template اتوماتيكيا بدون طرق التعريب المتعارف عليها
أنظر الى الصورة التالية – أصبح المجلد بهذا الشكل و لم يتبقى لإنشاء القالب template سوى الثلاث ملفات التى انشأناهم ببرنامج Dreamweaver
http://joomlaeyes.com/upload/images/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 ليصبح فى النهاية لدينا القالب template بهذا الشكل كما بالصورة التالية
http://joomlaeyes.com/upload/images/3xrfrn6eem2rdvgrzoot.jpg
بقى شئ هام – قم بفتح مجلد CSS و قم بأخذ نسخة من ملف template.css و أنسخه مرة أخرى بهذا الأسم template_rtl
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
و الى هنا نكون قد قمنا بتجهيز كل ادوات تصميم القالب template فى هذا الجزء من الشرح طريقة و الدرس مفصل القادم سيكون شرح طريقة فيديو للجزء الثاني للطريقة الصحيحة لتصميم القالب template و هى الدروس التى كنت قد اشرت إليها فى بداية المشاركة و لكننى وجدت ان هذه المقدمة لابد منها حتى تفهم ما يتم عمله و انت تشاهد الدرس مفصل فتستطيع ان تفهم ما قمت بعمله خطوة بخطوة.
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
وخلال ساعات سيتم إعادة رفع أول كتاب لشرح طريقة تركيب install جملة joomla الصادر من جملة joomla عيون فى بداية عام 2014 لتزيد الفكرة لديك كتاب حصري عن طبيعة عمل الإضافات باللغة العربية حصريا لتتعرف على أوضاع الموديلات و طرق التعامل معها و دور كلا منها ولعل المتابعين لموقعي القديم قد حملوه سابقا من هنا
كتاب Joomla! 1.5 - Core-Features الاحترافى الرائع الان النسخة العربية (http://www.dzbatna.com/t765329/)
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
والى الدرس مفصل القادم والذي كما قلت لكم سابقا انه لن يستغرق الامر اكثر من عشرة دقائق لتصمم قالب template بالطبع افتراضي بالتصميم الذي ترغبه اما الضبط النهائي للأوضاع الرائعة التي نرها على شبكة الانترنت فسوف نصل إليها سويا ان شاء الله لنخرج معا في النهاية بقالب template نفتخر بأنه فكر عربي وإبداع عربي
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
فى انتظر ردودكم وتقيمكم للشرح طريقة وأسئلتكم حول هذا الجزء حتى يكون حافزلاكمال الدورة على أحسن وجه
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
ولكن انتظر الحصريات لدينا لاتنتهي فمع الدرس مفصل القادم سنستخدم إضافة أخرى رائعة
Template Kit الرهيبة
والتى كان قد أشار إليها الأخ الفاضل / محمد سالم احد الذين يفهمون حقا كيفية التعامل مع جملة joomla جزه الله كل الخير ولكنها غير مجاني freeة وقد قمت بشرائها من اجل التعلم و ان أوضح لكم طريقة عملها
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
ولكن هل هذا هو كل شي لا لا لا لا لا لا هناك مفاجأة أخرى وثورة حقيقة فتابعوني
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
::::: لمشاهدة مقدمة الدورة وتحميل الاضافة وشرح طريقةها من هذا الرابط هنا بالمنتدى forum
حصريا الطريقة الصحيحة لصنع قالب template جملة joomla الاحترافى مع كافة الأدوات من جملة joomla عيون (http://www.dzbatna.com/t1161524/)
او من موقع جملة joomla عيون العربية
http://www.joomlaeyes.com/
:::::
شكرا خاص للاخ الفاضل عمرو علام على مساعدته ومساهمته فى انجاح هذة الدورة ان شاء الله
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
(البقرة 32)
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
عن أبي هريرة (http://www.islamweb.net/newlibrary/showalam.php?ids=3)قال قال رسول الله : صلى الله عليه وسلم
من سئل عن علم فكتمه ألجمه الله بلجام من نار يوم القيامة (http://www.islamweb.net/newlibrary/display_book.php?idfrom=235&idto=235&bk_no=43&ID=180#docu)
ورواه ابن ماجه (http://www.islamweb.net/newlibrary/showalam.php?ids=13478)والترمذي وحسنه من حديث علي بن الحكم له طرق عن علي بن الحكم ، وعلي (http://www.islamweb.net/newlibrary/showalam.php?ids=8)من رجال البخاري ، (http://www.islamweb.net/newlibrary/showalam.php?ids=12070)ووثقه ابن سعد وأبو داود وغيرهما .
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
وروى ابن ماجه (http://www.islamweb.net/newlibrary/showalam.php?ids=13478)عن أبي هريرة (http://www.islamweb.net/newlibrary/showalam.php?ids=3)قال قال : رسول الله صلى الله عليه وسلم
أفضل الصدقة أن يتعلم المسلم علما ثم يعلمه أخاه المسلم
(http://www.islamweb.net/newlibrary/display_book.php?idfrom=235&idto=235&bk_no=43&ID=180#docu)
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
بسم الله
اننى أحاول ان أضيف لكم ماتعلمته عن طريق الاحتكاك الحقيقى وربما لا يكون ذو أهميه عند البعض ولكن ربما يفيد آخرين وهى في النهاية سوف تكون مرجع متواضع لمن يرغب .
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
تنفرد joomla بأسلوب فريد وغير مسبوق في إداراتها للمواقع حيث إنها لا تقوم بإنشاء أي صفحات تنشا عليها محتواها بل تقوم بإنشاء محتواها في قاعدة بيانات وتقوم باستدعائها لتضعها لك في أماكنها التي تقوم بتخصصيها عن طريق الموديولات التي تقوم بتصميمها في القالب template الخاص بك ونحن هنا لن نخوض في طريقة برمجة joomla الرهيبة بل الغرض هو التعريف وطريقة تركيب install وتصميم القالب template والتي تتميز بمرونة غير عادية جعلتها تحوز هذه المكانة بين تطبيقات إدارة محتوي المواقع .
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
في البداية يجب أن نعرف أن هناك ارتباطا وثيقا بين تصميم قالب template لجملة joomla و بين الخيارات الأساسية للقوائم التى تحتويها إدارة الموديلات فى لوحة تحكم جملة joomla –
بمعنى أن البوسيشن - Position - الخاص مثلا بقائمة المنيو- mod-mainmenu - الموجودة فى إدارة المديولات كما بالصورة التالية
http://joomlaeyes.com/upload/images/7iawhu166s9vds5yn8y.jpg
نلاحظ المربع الأحمر و الذي يحتوى على لائحة طبقة الموديل - Module Class Suffix - و هي التي تحتوى على الامتداد الذي يخبر ملف Index الخاص بالقالب template بطريقة ما سوف نشرح طريقةها بطريقة العرض –
بمعنى أننا عندما نقوم بتصميم مكان للموديل فإننا نحدد له الوضع الذى سوف يظهر فيه فى واجهة interface الموقع
نوضح أكثر !!
الموديلات فى قوالب جملة joomla توضع فى ستة أوضاع فقط لا يمكن أن تخرج عنها و هى التى يفهمها التصميم او كود code جملة joomla المبرمج بلغة PHP التى تم تصميم القالب template بها
فهى إما
·None
·Table
·Xhtml
·Rounded
·Horizons
·Outline
هذه الوضعيات لطرق العرض بمعنى لو فرضنا إننا نضع Position للأستايل style فى القالب template الذي نصممه فإن القالب template لا يفهم سوى الستة وضعيات السابق شرح طريقةهم و يجب أن نحدد له وضعية المد يول
"modules" name="user1" style="none"
فى هذا الكود code فإننا نخبر ملف index بصيغة عرض الموديل أن يكون Position الخاص به هو None كما بالكود code كلمة None هنا يفهمها ملف index على أنها أمر ان لا يطبق اى Position و يعتمد على Positioncss الأساسي للقالب template
ولو وضعناه بهذه الصيغة
"modules" name="user1" style=" Rounded"
فإن هذا يعنى أن ملف index سيعرض القوائم بصورة منفصلة عن بعضها كما هو موجود في القالب template الأفتراضى لجملة joomla تعال نرى تطبيق لهذه المعلومات لنرى معنى ما قلناه
أفتح القالب template الأفتراضى و أنظر الى القوائم سنجد أن القائمة الرئيسية و القائمة التى تليها و هى مصادر جملة joomla هذه القوائم تم وضعها فى شكل منفصل و لو نظرنا الى القائمة اليمنى فهى ليس لها إطار هذا هو الفرق !!!
http://joomlaeyes.com/upload/images/8ug2mw52yc65ittak51.jpg
فالقائمة اليسرى تم اختيار الكود code
"modules" name="user1" style=" Rounded "
و فى القائمة اليمنى
"modules" name="user1" style=" Xhtm
السؤال – ؟
هل يجب كتابة style الخاص بكل موديل فى ملف index ؟
الإجابة : لا
يمكنك أن تخبر جملة joomla نفسها أن تعرض بالصيغة التى تريدها عن طريق الصورة الأولى و التى فيها لاحقة الموديل وخيارات أخرى خاصة بنطاق Position و التي نخبر فيها جملة joomla ان تعرض القائمة اليسرى بقوائم منفصلة و هذا الذى تجده داخل المربع الأحمر .
هنا قد يبدر الى ذهنك سؤال –
أنت تقول ان عندما أضع Rounded فإنه يعرض قوائم منفصلة و في الصورة مكتوب menu_ الموجودة داخل المربع الأحمر بالصورة
الإجابة هنا
أن الستة امتدادات التي يفهمها index الخاص بكود code جملة joomla بلغة PHP و السابق ذكرهم يقابلهم 6 امتدادات أخرى تفهمها جملة joomla فلو وضعنا Rounded فى ملف index فيجب ان نضع لائحة الطبقة الخاصة بالموديل بهذه الصورة و هكذا في كل المديولات السابق ذكرهم لهم لغة خاصة تفهمها جملة joomla
و هذا هو السر في الأوضاع الرائعة التى تظهر بها القوالب العالمية ولا نستطيع ان نركب القالب template بنفس الصورة التى نرها ونظن ان التعريب هو الحل ... انا نفسي كنت أظن ذلك ولكن خاب ظني
السؤال هنا
لماذا ذكرت هذا الموضوع الأن بالرغم من أنى سوف اقوم بشرح طريقةه فى النهاية
الإجابة
أن تغيير و شكل و طريقة عرض الموديل فى موقعك لا يعتمد بشكل أساسي على تصميم ملف index الخاص بالقالب template
وهذا هو السر فإننا عندما نقوم بتركيب install اى قالب template اجنبى فإنه لا يظهر بنفس الصورة التى نراها لأننا لا نضع توافق بين الأمر الصادر من ملف index و بين طريقة العرض و ل ئحة طبقة المد يول التى نضعها فى خصائص الموديل فى لوحة التحكم فلو نظرنا فى الصورة التالية لأحد قوالب شركة Joomlart سنجد تأكيد لما نقول فهذه اللائحة المشار إليها باللون الأخضر هي المسئولة عن تجعل الموديل يظهر بهذه الصورة التي تراها فى الصورة التوضيحية
فيمكنك اختراع طريقة عرض خاصة بك و تضعها فى هذه الخانة بأي أسم ترغبه كما يحدث الآن مع قوالب Joomlart حيث تم برمجة لائحة تسمى FS1,FS2,FS3 لتعرض الموديل بصورة معينة كما بالصورة التوضيحية
http://joomlaeyes.com/upload/images/d1rglmfutt6vfh9z4lrp.jpg
http://joomlaeyes.com/upload/images/qbns4hahk566cb9qpaby.jpg
http://joomlaeyes.com/upload/images/gyyiwr3t09i83vml1ps.jpg
و هذا ليس معناه ان نتجاهل ملف index عندما نقوم بتصميمه و لكن هذا يتم بطرق متعددة فيمكن الا نذكر فى ملف اindex اىPosition على الإطلاق و يكفى ان نضع برمجته فقط فى index لتتكرر مع المديولات في نفس المكان و نشير إليها فى لوحة تحكم جملة joomla
قد يبدو الأمر مبهم لبعض المبتدئين بعض الشئ و لكن صدقني هو فى غاية غاية السهولة عندما اقوم بشرح طريقةه باستفاضة ستجد الأمر فى منتهى السهولة
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
ألان لنطلق لبدا العمل وتجهيز ورشة العمل الخاصة بالقالب template
الأن سنقوم بتصميم القالب template بصورته الأفتراضية و سنجعله مثل القوالب العالمبة ببعض التعديلات من خلال لوحة التحكم و بعض أوامر الكلاسات الجاهزة و التى ستجعل القالب template فى النهاية إحدى روائع قوالب جملة joomla
أول المهام الآن و هو تجهيز قالب template من الصفر لجملة joomla أعتمادا على احد الملفات الجاهزة للقالب template Html و سوف اقوم فى نهاية الدورة بشرح طريقة كيف تقوم بعمل تصميم و تقطيعه و ربطه بملفات ال CSS لأستخدامه فى تصميم قالب template لجملة joomla
الخطوة الأولى:- وهى تجهيز برنامج الدريم ويفر وربطه بالسيرفر SERVER المحلى ليكون السيرفر SERVER الذي سوف نقوم بالتعديل عليه لعمل ذلك اتبع الصور التالية
http://joomlaeyes.com/upload/images/j3f4k1py4t4gne2jn4ct.jpg
http://joomlaeyes.com/upload/images/gqtqrk58tfto1rpmghr.jpg
فى الخانة رقم 1 قم باختيار أسم لموقع و ليس للقالب template فى حالتنا هذه قمنا بتسميته Joomlaeyes
فى الخانة رقم 2 ضع مسار مجلد القوالب على السيرفر SERVER الخاص بك localhost
فى الخانة 3 أتركها كما هى
فى الخنة رقم 4 ضع عنوان السيرفر SERVER المحلى
فى الخانة 5 قم بإزالة العلامة حيث ان قوالب جملة joomla لا تستسيغ هذا الخيار و هو الكاش ثم أضغط Ok
ستجد أن الموقع قد ظهر فى قائمة اللوكال فايل كما فى الصورة التالية و يحتوى على القوالب الأفتراضية السابق إضافتها فى الكود code الأساسي لجملة joomla
http://joomlaeyes.com/upload/images/39aiw8hhnurq7rz8j89e.jpg
الى هنا قد تم تجهيز على السيرفر SERVER المحلى للعمل عليه علما بأنه جارى رفع سيرفير خاص بجملة joomla عيون العربية مجهز بكافة الأدوات اللازمة لتجربة و صناعة جملة joomla
الخطوة الثانية:-
من المفترض أنك قمت بتثبيت setup الإضافة Dr fourm1.5 الخاصة بصناعة موديلات القالب template و هذه الإضافة تعمل على جميع إصدارات برنامج Dreamweaver و هنا استخدمت الأصدار CS3 بناءا على رغبة الكثير من الأعضاء لعدم توفر النسخة CS4 و الأختلاف الوحيد فى القوائم و ليست فى الإضافة نفسها فهى تظهر كما بالصورة التالية
http://joomlaeyes.com/upload/images/f5yu3ar8mn6egxo1p70.jpg
و تظهر فى قائمة انسرت كما فى الصورة التالية
http://joomlaeyes.com/upload/images/vtfb74aosivv99fpx5up.jpg
و سنتعرض لها فى الشرح طريقة التالى عندما نقوم بوضع المديولات
لكن أنتبه لما هو داخل الأطار الأحمر لأننا سوف نستخدمه بطريقة خاصة
الأن نقوم بفتح السيرفير المحلى و الدخول الى ملف القوالب و نضيف ملف القالب template المصمم بلغة Html و الذى قمت بتحميله و ضعه داخل ملف التمبليت
بالرجوع مرة أخرى الى برنامج Dreamweaver و أنظر ستجد القالب template يظهر فى قائمة السيرفر SERVER المحلى و يظهر فيه ملف الأندكس بصيغة Html و الذى سوف نقوم بسحبه لتصميم قالب templateنا الجديد كذلك يظهر ملف CSS و كذلك يظهر ملف الأيميج و الذى سوف نقوم باستخدام الصور الموجودة بداخله .
http://joomlaeyes.com/upload/images/wr89z02pdedkoj6de6kk.jpg
http://joomlaeyes.com/upload/images/i5ysh8kgeydg4h76q0a.jpg
الأن الخطوة الأولى فى إنشاء القالب template
وانتباه جيدا
من قائمة ملف جديد اختار ملف بى اتش بى فارغ سيظهر الملف بالصورة التالية
http://joomlaeyes.com/upload/images/4yrr7psemqzzc8ynj1n7.jpg
ثم أضغط على New مرة أخرى و أختار ملف جديد CSS
ثم ملف جديد و أختار ملف جديد xml
الآن أصبح لدينا 3ملفات مفتوحة كما بالصورة التالية
http://joomlaeyes.com/upload/images/twc1e4q1vxsxaavzv9i2.jpg
الأول سيكون ملفindex الخاص بالقالب template
الثاني سيكون ملف CSS الخاص بالقالب template
الثالث سيكون ملف xml
نعود مرة أخرى الى السيرفر SERVER المحلى و نقوم بفتح مجلد template و نقوم بفتح القالب template الأفتراضى لجملة joomla كما فى الصورة التالية
http://joomlaeyes.com/upload/images/n4svjx6viinpqbop57hg.jpg
قبل كل شئ يجب ان نتعرف على محتويات هذا القالب template و تذكر اننا أنشانا ثلاثة ملفات بالدريم ويفر
و بنظرة على الصورة سنجد أن الملفات التى تم تعليمها باللون الأحمر هى ملفات اساسية فى جميع القوالب التى سوف نقوم بالشرح طريقة عليها أى انها تستخدم هى هى كل مرة فهى لا تتغير ما عدا ملف Html فهو يضاف عليه بعض الأشياء مثل دفتر الزوار او فورم الدخول إذا رغبت ان يكون له وضعية خاصة و هذا ما سنقوم بشرح طريقةة فى مرحلة متقدمة
اما بقية الملفات فسيتم التعديل عليها بما يتفق مع تصميمنا الجديد
السؤال – هل يمكن أخد نسخة من هذه الملفات و استخدامها بديل للملفات التى انشاناها ببرنامج Dreamweaver أتتذكرها الثلاث ملفات
الإجابة– بالطبع نعم يمكن اخذ نسخة كاملة من هذا القالب template الأفتراضى و مسح محتوياته بالكامل و بالطبع الغير معلم عليها باللون الأحمر و لكننا هنا نريد ان نتعلم من الصفر و تستطيع بعد ذلك ان تأخذ نسخة من اى قالب template تريده بشرط ان يكون مطابق للقالب template الأفتراضى .
ملحوظة – هذا بالنسبة للمبتدئين علما هناك محترفون يستطيعون تغيير الكلاسات (DIv) لأى قالب template و سحبه لإنشاء قالب template جديد
بمعنى انك لو حاولت الأن سحب اى قالب template و العمل عليه بدون معرفة سابقة لكيفية وضع المديولات و الديفات و الكلاسات الخاصة به فسيخرب تصميمك
لأن اساس التعامل بين ملفات القالب template هو نظام النداءات التكاملية أى ان كل ملف من ملفات القالب template يؤدى غرض معين و فى وقت معين و بطريقة معينة حينما يطلب منه ذلك
و الأهم اننا سوف نتعلم اين نضع الكلاسات و Div الأساسية و من بعدها ستجد الأمور أكثر متعة و سهولة
بقى شئ واحد و هو ان نتعرف على دور باقى الملفات الغير محددة باللون الأحمر فملف index معرف انه الملف الأساسى للقالب template و هو يساوى الملف رقم 1 الذي انشأ ناه ببرنامج Dreamweaver
و فولدر ال CSS سوف يحتوى على الملف رقم 2 الذى انشاناه فى برنامج Dreamweaver
أما ملف templateDetails فهو الذى يحتوى على مسارات القالب template و محتوياته من صور و ملفات و هو المسئول الأول و الأخير عن تركيب install القالب template و أى خطا به لن يعمل القالب template و سنتعلم كيفية إنشاء ملف أفتراضى خاص بنا يحمل حقوق تصميمنا لنستخدمه فى كل مرة نقوم بتصميم قالب template
ملف images معروف انه يحتوى على صور التصميم أما الصورة template_thumbnail فهى صورة مصغرة للقالب template و تظهر فى لوحة التحكم عن الوقوف على اسم القالب template
نعود مرة أخرى الى ملف template في السرفر المحلى و ننشئ فولدر جديد و نسميه my_template
و هو الذى سنضع فيه ملفات القالب template الجديد الذي سوف نقوم بتصميمه
و نعود مرة أخرى الى القالب template الأفتراضى و نقوم بنسخ الملفات المعلم عليها باللون الأحمر و إضافتها الى القالب template الذى قمنا بإنشائه و نقوم بإضافتها الى مجلد القالب template الجديد و يمكنك اخذ نسخة من مجلد images او إنشاء ملف جديد و لا تنسى ايضا إنشاء فولدر و نسميه بأسم CSS و الذى سوف نضع فيه ملف CSS للاتجاهات سواء اليسرى أو اليمنى و احدهم هو الملف الذي سبق و أنشانا فى برنامج Dreamweaver علما بأنه سوف يتم تغيير اتجاه القالب template اتوماتيكيا بدون طرق التعريب المتعارف عليها
أنظر الى الصورة التالية – أصبح المجلد بهذا الشكل و لم يتبقى لإنشاء القالب template سوى الثلاث ملفات التى انشأناهم ببرنامج Dreamweaver
http://joomlaeyes.com/upload/images/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 ليصبح فى النهاية لدينا القالب template بهذا الشكل كما بالصورة التالية
http://joomlaeyes.com/upload/images/3xrfrn6eem2rdvgrzoot.jpg
بقى شئ هام – قم بفتح مجلد CSS و قم بأخذ نسخة من ملف template.css و أنسخه مرة أخرى بهذا الأسم template_rtl
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
و الى هنا نكون قد قمنا بتجهيز كل ادوات تصميم القالب template فى هذا الجزء من الشرح طريقة و الدرس مفصل القادم سيكون شرح طريقة فيديو للجزء الثاني للطريقة الصحيحة لتصميم القالب template و هى الدروس التى كنت قد اشرت إليها فى بداية المشاركة و لكننى وجدت ان هذه المقدمة لابد منها حتى تفهم ما يتم عمله و انت تشاهد الدرس مفصل فتستطيع ان تفهم ما قمت بعمله خطوة بخطوة.
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
وخلال ساعات سيتم إعادة رفع أول كتاب لشرح طريقة تركيب install جملة joomla الصادر من جملة joomla عيون فى بداية عام 2014 لتزيد الفكرة لديك كتاب حصري عن طبيعة عمل الإضافات باللغة العربية حصريا لتتعرف على أوضاع الموديلات و طرق التعامل معها و دور كلا منها ولعل المتابعين لموقعي القديم قد حملوه سابقا من هنا
كتاب Joomla! 1.5 - Core-Features الاحترافى الرائع الان النسخة العربية (http://www.dzbatna.com/t765329/)
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
والى الدرس مفصل القادم والذي كما قلت لكم سابقا انه لن يستغرق الامر اكثر من عشرة دقائق لتصمم قالب template بالطبع افتراضي بالتصميم الذي ترغبه اما الضبط النهائي للأوضاع الرائعة التي نرها على شبكة الانترنت فسوف نصل إليها سويا ان شاء الله لنخرج معا في النهاية بقالب template نفتخر بأنه فكر عربي وإبداع عربي
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
فى انتظر ردودكم وتقيمكم للشرح طريقة وأسئلتكم حول هذا الجزء حتى يكون حافزلاكمال الدورة على أحسن وجه
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
ولكن انتظر الحصريات لدينا لاتنتهي فمع الدرس مفصل القادم سنستخدم إضافة أخرى رائعة
Template Kit الرهيبة
والتى كان قد أشار إليها الأخ الفاضل / محمد سالم احد الذين يفهمون حقا كيفية التعامل مع جملة joomla جزه الله كل الخير ولكنها غير مجاني freeة وقد قمت بشرائها من اجل التعلم و ان أوضح لكم طريقة عملها
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
ولكن هل هذا هو كل شي لا لا لا لا لا لا هناك مفاجأة أخرى وثورة حقيقة فتابعوني
http://joomlaeyes.com/upload/images/kugca3bk2wbh9d3jswj.gif
::::: لمشاهدة مقدمة الدورة وتحميل الاضافة وشرح طريقةها من هذا الرابط هنا بالمنتدى forum
حصريا الطريقة الصحيحة لصنع قالب template جملة joomla الاحترافى مع كافة الأدوات من جملة joomla عيون (http://www.dzbatna.com/t1161524/)
او من موقع جملة joomla عيون العربية
http://www.joomlaeyes.com/
:::::
شكرا خاص للاخ الفاضل عمرو علام على مساعدته ومساهمته فى انجاح هذة الدورة ان شاء الله
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
