كل مايتعلق بالقوالب من تركيب وتصميم وتعديل اتجاه
Posted: Fri Sep 17, 2010 1:05 am
بسم الله الرحمن الرحيم
=====================================================
في البداية أحب أوضح المتطلبات الأساسية للتعامل مع القوالب وهي:
يجب أن تكون لديك خلفية عن لغة
CSS
وهذا أهم ما في الموضوع
يجب أن تكون لديك خلفية عن برنامج تحرير الصور الفوتوشوب أو أي محرر صور مشابه للفوتوشوب
يجب أن تكون لديك خلفية عن لغات برمجة المواقع
php - html
بالنسبة للغة
html
هي الأهم لأن جميع ملفات القوالب عبارة عن ملفات بامتداد
.tpl
يعني تم عمل الملف باستخدام لغة
html
ومن ثم تم حفظ الملف بصيغة
.tpl
وهذا الامتداد هو اختصار لكلمة
template
ومعني هذه الكلمة باللغة العربية هو قالب
=====================================================
الان ننتقل لصلب الموضوع وسوف يكون الموضوع مقسم لثلاثة أجزاء كالتالي:
الجزء الأول طريقة تركيب القالب على المتجر
الجزء الثاني طريقة تعديل وتوافق اتجاه القالب مع المتجر
الجزء الثالث طريقة تصميم قالب
=====================================================
الجزء الأول
طريقة تركيب القالب على المتجر
يجب أولا معرفة مسار مجلد القوالب وهو على المسار التالي
catalog\view\theme
وبعد فتح هذا المسار سوف تجد مجلد واحد بإسم
default
[attachment=11]tpl_1.png[/attachment]
وهذا المجلد هو القالب الافتراضي للمتجر والذي يظهر دائما باللون الأزرق كما هو موضح في الصورة التالية
[attachment=10]tpl_2.png[/attachment]
وبعد أن عرفنا مسار مجلد القالب سوف نقوم بتركيب قالب مجاني من القوالب المجانية الموجودة في موقع اوبن كارت في قسم القوالب
والقالب المجاني الذي سنقوم بالعمل عليه موجود على الرابط التالي
http://www.opencart.com/index.php?route ... order=DESC
وبعد أن نقوم يتنزيل القالب على الجهاز سوف يكون على شكل ملف مضغوط ثم نقوم بفتح الضغط ونجد أنه يحتوي على مجلد واحد فقط بإسم
greenshop
نقوم بوضع هذا المجلد في مسار مجلد القوالب بجوار القالب الافتراضي
[attachment=9]tpl_3.png[/attachment]
وبعدها ننتقل إلى لوحة التحكم ثم نذهب الى الضبط ثم الاعدادات ثم المتجر ثم من خانة القالب او الاستايل سوف نجد القالب الجديد
[attachment=8]tpl_4.png[/attachment]
وبعد الحفظ نذهب إلى واجهة الموقع ونعمل تحديث للصفحة لكي يظهر القالب الجديد
[attachment=7]tpl_5.png[/attachment]
وهكذا نكون قد انتهينا من شرح طريقة التركيب
=====================================================
الجزء الثاني
طريقة تعديل وتوافق اتجاه القالب مع المتجر
لو نلاحظ أن القالب الذي قمنا بتركيبه يعمل فقط في اتجاه اليسار فقط وعند اختيار اللغة العربية أيضاً يعمل في اتجاه اليسار ويحتاج إلى تعديل الاتجاه لليمين
ولكي نقوم بذلك نقوم بفتح مجلد الهيدر الموجود على المسار
[attachment=6]tpl_6.png[/attachment]
ثم نبحث عن السطر
Code: Select all
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css" />Code: Select all
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/<?php echo $mainstyle; ?>.css" />وللإصدار
1.5
ابحث عن السطر
Code: Select all
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />Code: Select all
<?php if ($direction == 'rtl') { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet-a.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
<?php } ?>الان لو تلاحظ الموقع يعمل بشكل طبيعي للغة الانجليزية ولكن للغة العربية سوف تكون النتيجة كالصورة التالية
tpl_7.png (227.33 KiB) Viewed 74989 times
ولكي نقوم بعمل ملف استايل يعمل باتجاه اليمين نذهب الى المجلد على المسار التالي
tpl_8.png (24.06 KiB) Viewed 74989 times
ie6.css
خاص لكي يتوافق السكربت مع متصفح انترنت اكسبلور 6 فقط وليس له علاقة باتجاه الموقع
والملف الثاني هو الذي يهمنا وهو خاص بواجهة الموقع لكي تعمل باتجاه اليسار
ويجب علينا الآن أن نقوم بنسخ نفس هذا المجلد الثاني ومن ثم نقوم بتسميته إلى
stylesheet-a.css
ضروري جداً اختيار هذا الإسم ولن يعمل في حالة اختيار اسم من عندك
كما في الصورة التالية
tpl_9.png (29.13 KiB) Viewed 74989 times
وهنا يأتي دور العمل على لغة
CSS
وتعديل الاتجاه للملف
stylesheet-a.css
وهكذا نكون قد انتهينا من شرح طريقة تعديل وتوافق اتجاه القالب مع المتجر
ملاحظة هامة: بعض القوالب المجانية وأيضاً المدفوعة عند مشاهدة الملفات في الملف المضغوط تلاحظ وجود تعديلات على نفس ملفات سكربت المتجر
مثل هذا القالب
http://www.opencart.com/index.php?route ... order=DESC
وهذا بسبب أن الشخص الذي قام بعمل هذا القالب قد أخطأ ولم يستخدم الطريقة الصحيحة لعمل القوالب
لذلك أنصح وبشدة قبل تركيب أي قالب مشاهدة الملفات الموجودة في الملف المضغوط والتأكد فقط
أن الملف المضغوط يحتوي فقط على قالب وليس قالب مع تعديلات على نفس السكربت
وفي كل الأحوال القالب سوف يعمل باتباع خطوات التركيب المرفقة مع كل قالب ولكن سيسبب لك إزعاج عند الترقية
=====================================================
الجزء الثالث
طريقة تصميم قالب
الخطوات الذهبية لعمل قالب خاص هي كالتالي
أولاً : لا تحذف مجلد القالب الافتراضي
default
لأنه سيكون كمرجع أساسي في حالة نقص أي ملف في القالب الخاص الذي ستقوم بعمله
وأيضاً لكي لايتم استبدال الملفات عند الترقية
والأفضل دائماً عمل قالب منفصل في مجلد منفصل على مسار مجلد القوالب الذي ذكرناه سابقاً
catalog/view/theme
ثانياً : لا تقم بنسخ جميع محتويات القالب الافتراضي
default
إلى مجلد القالب الخاص بك لأن ذلك يستوجب عليك ترقية جميع الملفات عند صدور نسخة جديدة.
ثالثاً : قم بإنشاء مجلد جديد على مسار مجلد القوالب
catalog/view/theme
مثلا سوف نقوم بتسمية هذا المجلد إلى
arab
tpl_10.png (21.12 KiB) Viewed 74989 times
نرجع إلى المجلد الافتراضي ونجد فيه ثلاثة مجلدات
tpl_11.png (20.71 KiB) Viewed 74989 times
image
وهذا المجلد خاص بصور القالب
و
stylesheet
وهذا المجلد خاص بملفات الاستايل
ثم ننسخ فقط ملف الهيدر على المسار التالي
catalog/view/theme/default/template/common/header.tpl
إلى مسار القالب الخاص بنا
catalog/view/theme/arab/template/common/header.tpl
ثم نقوم بفتح ملف الهيدر الخاص بنا ونستبدل جميع الكلمات
default
إلى
arab
tpl_12.png (108.54 KiB) Viewed 74989 times
رابعا : نذهب إلى لوحة التحكم ونختار القالب الخاص بنا
خامساً : نقوم بالتعديل على ملفين الاستايل
catalog/view/theme/arab/stylesheet/stylesheet-a.css
وهذا الملف خاص باللغة العربية
catalog/view/theme/arab/stylesheet/stylesheet.css
وهذا الملف خاص باللغة الانجليزية
ومن هذين الملفين يمكنك تعديل الخلفية والألوان والخطوط .. إلخ على حسب احتياجك
ويجب أن تكون لديك معرفة عن لغة
CSS
سادساً : فقط انسخ الملفات التي تريد التعديل عليها من مجلد
template
ولاحظ بأننا فقط نسخنا منه ملف الهيدر
catalog/view/theme/default/template/common/header.tpl
ولا تحتاج لنسخ غيره إلا في حالة عمل تعديلات خاصّة
سابعاً : اذا كنت قد قمت بتطبيق الخطوات السابقة وفي حالة اصدار نسخة جديدة وتريد ترقية القالب إلى النسخة الجديدة
قم بنسخ القالب الخاص بك كاملاً إلى النسخة الجديدة
ثم فقط قم بالمقارنة بين ملف الهيدر الخاص بك
catalog/view/theme/arab/template/common/header.tpl
مع ملف الهيدر لقالب النسخة الجديدة
وهكذا نكون قد انتهينا من شرح طريقة تصميم قالب
=====================================================
انتهى الموضوع وبالتوفيق للجميع
ويسعدني الرد على أي استفسار
ولا تنسونا من صالح دعائكم
[/size]
يعني مافيه كتير توضيحات عن بناء تصميم من الألف للياء !