بسم الله الرحمن الرحيم
================================================== ===
في البداية أحب أوضح المتطلبات الأساسية للتعامل مع القوالب وهي:
يجب أن تكون لديك خلفية عن لغة
CSS
وهذا أهم ما في الموضوع
يجب أن تكون لديك خلفية عن برنامج تحرير الصور الفوتوشوب أو أي محرر صور مشابه للفوتوشوب
يجب أن تكون لديك خلفية عن لغات برمجة المواقع
php - html
بالنسبة للغة
html
هي الأهم لأن جميع ملفات القوالب عبارة عن ملفات بامتداد
.tpl
يعني تم عمل الملف باستخدام لغة
html
ومن ثم تم حفظ الملف بصيغة
.tpl
وهذا الامتداد هو اختصار لكلمة
template
ومعني هذه الكلمة باللغة العربية هو قالب
================================================== ===
الان ننتقل لصلب الموضوع وسوف يكون الموضوع مقسم لثلاثة أجزاء كالتالي:
الجزء الأول طريقة تركيب القالب على المتجر
الجزء الثاني طريقة تعديل وتوافق اتجاه القالب مع المتجر
الجزء الثالث طريقة تصميم قالب
================================================== ===
الجزء الأول
طريقة تركيب القالب على المتجر
يجب أولا معرفة مسار مجلد القوالب وهو على المسار التالي
catalog\view\theme
وبعد فتح هذا المسار سوف تجد مجلد واحد بإسم
default
https://www.rise.company/forum/image...ab779541-1.jpgtpl_1.png (46.69 KiB) Viewed 14357 times
وهذا المجلد هو القالب الافتراضي للمتجر والذي يظهر دائما باللون الأزرق كما هو موضح في الصورة التالية
https://www.rise.company/forum/image...ab779541-1.jpgtpl_2.png (183.37 KiB) Viewed 14357 times
وبعد أن عرفنا مسار مجلد القالب سوف نقوم بتركيب قالب مجاني من القوالب المجانية الموجودة في موقع اوبن كارت في قسم القوالب
والقالب المجاني الذي سنقوم بالعمل عليه موجود على الرابط التالي
http://www.opencart.com/index.php?route ... order=DESC
وبعد أن نقوم يتنزيل القالب على الجهاز سوف يكون على شكل ملف مضغوط ثم نقوم بفتح الضغط ونجد أنه يحتوي على مجلد واحد فقط بإسم
greenshop
نقوم بوضع هذا المجلد في مسار مجلد القوالب بجوار القالب الافتراضي
https://www.rise.company/forum/image...ab779541-1.jpgtpl_3.png (24.85 KiB) Viewed 14357 times
وبعدها ننتقل إلى لوحة التحكم ثم نذهب الى الضبط ثم الاعدادات ثم المتجر ثم من خانة القالب او الاستايل سوف نجد القالب الجديد
https://www.rise.company/forum/image...ab779541-1.jpgtpl_4.png (26.07 KiB) Viewed 14357 times
وبعد الحفظ نذهب إلى واجهة الموقع ونعمل تحديث للصفحة لكي يظهر القالب الجديد
https://www.rise.company/forum/image...ab779541-1.jpgtpl_5.png (488.27 KiB) Viewed 14357 times
وهكذا نكون قد انتهينا من شرح طريقة التركيب
================================================== ===
الجزء الثاني
طريقة تعديل وتوافق اتجاه القالب مع المتجر
لو نلاحظ أن القالب الذي قمنا بتركيبه يعمل فقط في اتجاه اليسار فقط وعند اختيار اللغة العربية أيضاً يعمل في اتجاه اليسار ويحتاج إلى تعديل الاتجاه لليمين
ولكي نقوم بذلك نقوم بفتح مجلد الهيدر الموجود على المسار
https://www.rise.company/forum/image...ab779541-1.jpgtpl_6.png (35.74 KiB) Viewed 14357 times
ثم نبحث عن السطر
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 } ?>
ثم نحفظ
الان لو تلاحظ الموقع يعمل بشكل طبيعي للغة الانجليزية ولكن للغة العربية سوف تكون النتيجة كالصورة التالية
https://www.rise.company/forum/image...ab779541-1.jpgtpl_7.png (227.33 KiB) Viewed 14357 times
وهذه نتيجة أننا قمنا بالتعديل على ملف الهيدر حيث أن ملف الهيدر الآن يبحث عن ملف الاستايل الذي يعمل على الاتجاه اليمين وهو غير موجود لذلك تظهر لنا هذه الصورة الأخيرة
ولكي نقوم بعمل ملف استايل يعمل باتجاه اليمين نذهب الى المجلد على المسار التالي
https://www.rise.company/forum/image...ab779541-1.jpgtpl_8.png (24.06 KiB) Viewed 14357 times
نلاحظ الآن أنه يوجد ملفين فقط والملف الأول
ie6.css
خاص لكي يتوافق السكربت مع متصفح انترنت اكسبلور 6 فقط وليس له علاقة باتجاه الموقع
والملف الثاني هو الذي يهمنا وهو خاص بواجهة الموقع لكي تعمل باتجاه اليسار
ويجب علينا الآن أن نقوم بنسخ نفس هذا المجلد الثاني ومن ثم نقوم بتسميته إلى
stylesheet-a.css
ضروري جداً اختيار هذا الإسم ولن يعمل في حالة اختيار اسم من عندك
كما في الصورة التالية
https://www.rise.company/forum/image...ab779541-1.jpgtpl_9.png (29.13 KiB) Viewed 14357 times
والان لو ذهبنا إلى الموقع واخترنا اللغة العربية سوف نلاحظ أن الموقع يعمل مع القالب ولكن مازال في اتجاه اليسار
وهنا يأتي دور العمل على لغة
CSS
وتعديل الاتجاه للملف
stylesheet-a.css
وهكذا نكون قد انتهينا من شرح طريقة تعديل وتوافق اتجاه القالب مع المتجر
ملاحظة هامة: بعض القوالب المجانية وأيضاً المدفوعة عند مشاهدة الملفات في الملف المضغوط تلاحظ وجود تعديلات على نفس ملفات سكربت المتجر
مثل هذا القالب
http://www.opencart.com/index.php?route ... order=DESC
وهذا بسبب أن الشخص الذي قام بعمل هذا القالب قد أخطأ ولم يستخدم الطريقة الصحيحة لعمل القوالب
لذلك أنصح وبشدة قبل تركيب أي قالب مشاهدة الملفات الموجودة في الملف المضغوط والتأكد فقط
أن الملف المضغوط يحتوي فقط على قالب وليس قالب مع تعديلات على نفس السكربت
وفي كل الأحوال القالب سوف يعمل باتباع خطوات التركيب المرفقة مع كل قالب ولكن سيسبب لك إزعاج عند الترقية
================================================== ===
الجزء الثالث
طريقة تصميم قالب
الخطوات الذهبية لعمل قالب خاص هي كالتالي
أولاً : لا تحذف مجلد القالب الافتراضي
default
لأنه سيكون كمرجع أساسي في حالة نقص أي ملف في القالب الخاص الذي ستقوم بعمله
وأيضاً لكي لايتم استبدال الملفات عند الترقية
والأفضل دائماً عمل قالب منفصل في مجلد منفصل على مسار مجلد القوالب الذي ذكرناه سابقاً
catalog/view/theme
ثانياً : لا تقم بنسخ جميع محتويات القالب الافتراضي
default
إلى مجلد القالب الخاص بك لأن ذلك يستوجب عليك ترقية جميع الملفات عند صدور نسخة جديدة.
ثالثاً : قم بإنشاء مجلد جديد على مسار مجلد القوالب
catalog/view/theme
مثلا سوف نقوم بتسمية هذا المجلد إلى
arab
https://www.rise.company/forum/image...ab779541-1.jpgtpl_10.png (21.12 KiB) Viewed 14357 times
الان المجلد فارغ
نرجع إلى المجلد الافتراضي ونجد فيه ثلاثة مجلدات
https://www.rise.company/forum/image...ab779541-1.jpgtpl_11.png (20.71 KiB) Viewed 14357 times
وننسخ المجلدين بجميع محتوياتهم إلى مجلد القالب الخاص بنا
image
وهذا المجلد خاص بصور القالب
و
stylesheet
وهذا المجلد خاص بملفات الاستايل
ثم ننسخ فقط ملف الهيدر على المسار التالي
catalog/view/theme/default/template/common/header.tpl
إلى مسار القالب الخاص بنا
catalog/view/theme/arab/template/common/header.tpl
ثم نقوم بفتح ملف الهيدر الخاص بنا ونستبدل جميع الكلمات
default
إلى
arab
https://www.rise.company/forum/image...ab779541-1.jpgtpl_12.png (108.54 KiB) Viewed 14357 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
مع ملف الهيدر لقالب النسخة الجديدة
وهكذا نكون قد انتهينا من شرح طريقة تصميم قالب
================================================== ===
انتهى الموضوع وبالتوفيق للجميع
ويسعدني الرد على أي استفسار
ولا تنسونا من صالح دعائكم
http://forum.opencart.com/viewtopic.php?t=20132
