Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

كيفية إنشاء أول قالب جوملا لديك

by
Difficulty:BeginnerLength:LongLanguages:

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

في هذا البرنامج التعليمي، ستتعرف على أساسيات قالب جوملا، وستنشئ واحداً من الصفر. سنقوم بسرعة بتثبيت خادم محلي و جوملا نفسه، ثم إنشاء قالب أساسي فعال.


1. التحضير

قبل البدء في القالب، هناك بعض الأشياء التي تحتاج إلى إعدادها.
تماما مثل معظم CMSs، يتطلب  جوملا خادم مع كون PHP و MySQL مثبتة. يمكن أن يكون تثبيت ما سبق يدويًا مزعجًا إلى حد كبير، ولكي نكون صادقين، إنه مضيعة للوقت (ما لم ترغب في معرفة كيفية القيام بذلك بالضبط).
ما سنفعله هو تنزيل برنامج تثبيت واحد لكل ما سبق سيضمن خادم محلي على نظامك ويعطيك لوحة تحكم رائعة.

لذلك توجه إلى WAMP وقم بتنزيل أحدث إصدار. (MAMP for Mac)

بمجرد تنزيل برنامج التثبيت، قم بتثبيته وتثبيت WAMP في مكان يسهل تذكره. إذا سار كل شيء بحسب الخطة، يجب أن تبحث في مجلد اسمه: wamp

يجب أن يكون لديك الآن أيقونة في شريط التنبيهات (حيث تكون الساعة) والتي تمنحك الوصول إلى لوحة التحكم الخاصة بـ WAMP. يمكنك استخدام هذه الايقونة من أجل العديد من الأشياء، بما في ذلك إعادة تشغيل الخادم.


تحميل وتثبيت جوملا

الآن لدينا خادم مثبت، يمكننا الحصول على جوملا وإعداده. انتقل إلى Joomla وقم بتنزيل أحدث إصدار.

قبل أن نستمر، دعونا نلقي نظرة على مجلد wamp لدينا مرة أخرى. ستجد في الداخل مجموعة من المجلدات، لكن المجلد الذي يهمنا هو مجلد www.
هذا هو أصل إعداد الخادم الخاص بك وهذا هو المكان الذي سنقوم بتثبيت Joomla. (ملاحظة: يمكنك تثبيت العديد من نسخ Joomla هنا كما تريد، أو أي شيء آخر لهذا الأمر)

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

Joomla الآن على خادمنا. ومع ذلك هناك شيء آخر يجب أن نفعله قبل التثبيت، وهو إنشاء قاعدة بيانات. افتح المتصفح وانتقل إلى http: // localhost.
هنا سوف تجد منطقة مشرف الخادم الخاص بك، وهذا هو المكان الذي نقوم بإنشاء قاعدة البيانات الخاصة بنا فيه.

لإنشاء قاعدة البيانات، انقر فوق phpmyadmin تحت قسم الاسماء المستعارة الخاص بك.

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

الآن بعد أن أصبح لدينا قاعدة بيانات، يمكننا بدء تثبيت Joomla. أطفئ متصفحك وانتقل إلى http: // localhost / joomla (أو أيًا شيء سميت به موقعك عندما قمت بتنزيله.)

الشاشة الأولى تتحدث عن نفسها. اختر لغة واضغط التالي.

الشاشة التالية التي تراها هي قائمة التحقق قبل التثبيت. هذه قائمة من العناصر والإعدادات المطلوبة تحتاج Joomla إلى تثبيتها بنجاح. تأكد من أن لديك التكوين الضروري وانقر فوق التالي.

في الصفحة التالية، اقرأ الترخيص بعناية، وعندما تكون جاهزًا، انقر فوق التالي وأدخل التفاصيل المطلوبة (اسم المضيف: localhost، اسم المستخدم: root، لا كلمة المرور، joomla كاسم قاعدة البيانات)، ثم اضغط على التالي.

تخطي شاشة تكوين FTP بالنقر فوق التالي وفي الصفحة التالية، أدخل اسم الموقع وعنوان البريد الإلكتروني واختر كلمة مرور. ستكون هذه هي كلمة المرور التي ستستخدمها لتسجيل الدخول إلى منطقة مشرف جوملا مع اسم المستخدم: admin.
لن نقوم بتثبيت أي بيانات نموذجية في الوقت الحالي، لأننا نريد إضافة الوحدات واحدة تلو الأخرى لنرى كيف يأتي القالب في وقت لاحق في البرنامج التعليمي. انقر فوق التالي.

مبروك! إن Joomla جاهز للعمل، ولكن قبل أن نتمكن من الدخول والتجول يجب علينا حذف مجلد التثبيت. انتقل إلى مجلد www داخل wamp، ثم إلى مجلد joomla واحذف مجلد التثبيت


3. نظرة فاحصة على جوملا

من الصعب جدًا في هذه الأيام الدخول في أي مناقشة لنظام إدارة المحتوى مفتوحة المصدر بدون المرور على اسم جوملا.
بفضل تركيبه إلى جانب لوحة الإدارة البديهية، فإنه يحظى بشعبية كبيرة لدى المستخدمين الذين يتعاملون مع نظام إدارة المحتوى (CMS) بسهولة، في الوقت نفسه، مع وجود ميزات تحافظ على
الآلاف من المطورين مشغولين بالتطبيقات المتداولة والوحدات. إذا لزم الأمر، تعرّف على الطرف الخلفي (أوصي بمقالة Joomla 101 السريعة هذه على مدونة Themeforest للحصول على شعور سريع).

لزيارة موقعك، انقر فوق معاينة في الزاوية اليمنى العليا لمنطقة المسؤول. ما ستحصل عليه هو القالب الافتراضي بدون محتوى وأبسط الوحدات النمطية التي تم تحميلها.


4. القالب

للبدء في فهم بنية القالب، دعنا نلقي نظرة على النموذج الافتراضي. انتقل إلى مجلد www، ثم داخل مجلد joomla سترى مجلد قوالب.
(wamp /www/جوملا/قوالب ). هذا هو المكان الذي تذهب إليه كل القوالب المختلفة. يمكنك التبديل بين القوالب في لوحة الادارة.

داخل مجلد القوالب، سترى مجلدًا لكل قالب مثبت. يأتي Joomla مع ثلاثة قوالب: beez و rhuk_milkyway و ja_purity. تذكر هذا الموقع حيث ستقوم بتثبيت القوالب الجديدة في المستقبل فيه.

على الرغم من أن معظم القوالب تتكون من عدد غير قليل من الملفات، إلا أن هناك حاجة إلى اثنين منها فقط لإنشاء قالب عمل. هذان هما:

  • index.php
  • templateDetails.xml

أول ملف - index.php - هو المكان الذي تذهب إليه كل العلامات والتي تلصق فيها مايشمله  Joomla. يمكن النظر إلى هذه الأشياء على أنها خطافات صغيرة حيث تقوم جوملا بتعليق المعلومات عليها، مثل الوحدات النمطية على سبيل المثال

الملف الثاني هو templateDetails.xml. يمكنك أن ترى هذا كقائمة من التعليمات لجوملا. يجب أن تتضمن هذه القائمة اسم القالب وأسماء الملفات المستخدمة في القالب (الصور وما إلى ذلك) والمواضع التي تريد استخدامها (بما في ذلك المذكور أعلاه).

ما سبق هو مثال على ملف templateDetails.xml. كما ترون، هذه قائمة محددة تخبر جوملا عن القالب، مثل الاسم والمؤلف وتاريخ الإنشاء ... إلخ.
لاحظ قسم المواضع في الكود أعلاه. هذه هي المواضع التي تحدثنا عنها في وقت سابق، وتشتمل على
بعض التفسيرات الذاتية، مثل التذييل.
إذا قمت بوضع تذييل joomla في منطقة تذييل التصميم الخاص بك، ستتمكن من التحكم في بعض جوانب التذييل باستخدام النهاية الخلفية لـ Joomla. دعونا نحاول وننشئ قالب بسيط.


5. البدء بالقالب

دعونا نقوم ببعض التحضير لذلك لدينا شيء للعمل به. انتقل إلى مجلد النماذج الخاص بك، وقم بإنشاء مجلد جديد. دعنا نسميه template_tut.

داخل مجلدك الجديد، قم بإنشاء ملف يسمى index.php، وآخر يسمى templateDetails.xml (قم بنسخ / لصق الكود في المثال أعلاه داخله).

افتح ملف index.php الخاص بك في المفكرة أو أي شيء آخر تستخدمه لتحرير الكود وانسخ / الصق التالي فيه:

لدينا DOCTYPE، وهو تشفير PHP للغة، وفي قسم الرأس يشمل Joomla الأول. هذا ليس في قائمة xml لأنه ليس موضعا.

ما يفعله هذا هو تضمين ترميز رأس joomla (والذي يتضمن عنوان الصفحة) ، ومجموعة من الأشياء الأخرى التي من المحتمل أن تملأ نصف البرنامج التعليمي من تلقاء نفسها.

قم بإنهاء الترميز على الصفحة بإضافة علامات النص وإغلاق علامة html.


6. استخدام القالب

الآن وبعد أن أصبح لدينا الملفات الأساسية في مكانها، دعنا نضيف ميزة أخرى، هذه المرة لعرض المحتوى الرئيسي لأي صفحة يتم عرضها.

يجب ان تضمن هذه في index.php الخاص بك

قبل اختبار قالبنا، دعنا نضيف مقالًا حتى يكون لدينا بعض المحتوى. تأكد من تشغيل WAMP وانتقل إلى منطقة المسؤول في Joomla مع http: // localhost / joomla / administrator

الآن أدخل تفاصيل تسجيل الدخول الخاصة بك

انتقل إلى المحتوى في القائمة ثم إلى "إدارة المقالة" في القائمة المنسدلة

انقر على جديد لإضافة مقالة

امنح مقالتك عنوانًا، واملأ اسمًا مستعارًا، وتأكد من نشره في الصفحة الأمامية، ثم اضغط على "حفظ"

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

الآن بعد أن نشرنا المحتوى، دعونا نرى ما إذا كان القالب الذي قمنا به يعمل بالفعل. ارجع إلى منطقة المشرف الخاصة بك وانقر فوق "ملحقات" ثم "مدير القوالب"

من المفترض أن ترى template_tut في القائمة، لذلك تفضل واختره، واضبطه افتراضيًا.

انقر على  معاينة وتحقق من القالب الجديد المجيد. حسنا ربما ليس مجيدا جدا ولكنه قالب joomla الأولى. ياي!


7. إضافة بعض الكسوة إلى قالبنا

لقد عملنا على قالبنا، فهو يسترجع معلومات العنوان بما في ذلك العنوان وعرض المحتوى الذي أنشأناه في النهاية الخلفية. قبل أن نضيف المزيد من الميزات، دعنا نلقي نظرة فاحصة على وضع الوحدة؛ تلك التي ذكرناها في ملف xml الخاص بنا.

انها مدرجة على النحو التالي:

لذا لكي نضيف، على سبيل المثال، الموضع الأيسر، سيبدو index.php الخاص بنا بالشكل التالي:

بينما نحن فيه، دعنا نضيف موضع التذييل

إذا عدت إلى منطقة المسؤول الخاص بك، وانتقلت إلى "إدارة الوحدات النمطية" ستلاحظ وحدة موجودة بالفعل، وحدة القائمة الرئيسية. يتم تثبيت هذه الوحدة حتى إذا اخترنا تثبيت الإصدار البسيط من Joomla.

القائمة مدمجة بالفعل على الموضع الأيسر (الذي قمنا بإدراجه في القالب الخاص بنا)، لذا دعنا نرى كيف يبدو. انقر على معاينة

كما ترون، لدينا الآن قائمة تحتوي على رابط إلى الصفحة الرئيسية. يمكنك إضافة المزيد من عناصر القائمة والارتباط بمحتوى مختلف من خلال مدير القائمة.

دعونا نحصل على تذييل العمل. انتقل إلى "إدارة الوحدات النمطية"، انقر فوق جديد وحدد "تذييل الصفحة". ثم اضغط التالي.

في الصفحة التالية، أعط الوحدة النمطية الجديدة العنوان: تذييل، وفي القائمة المنسدلة الموضع، حدد تذييل الصفحة.

انقر فوق حفظ ثم قم بمعاينة الصفحة.
يجب عليك الآن أيضًا رؤية معلومات التذييل في النموذج الخاص بك.


8. إضافة المزيد من المواضع والوحدات

دعونا نرتب صفحتنا قليلا حتى نتمكن من رؤية ما نقوم به. في مجلد template_tut الخاص بك، أنشئ مجلدًا جديدًا واسمه "CSS"، وأنشئ ملفًا داخله يسمى "template.css"

قم بلصق التضمين في index.php في بعض divs وقم بتغليفه كله في حاوية div ثم اربط ورقة الأنماط الخاصة بك مثل المثال. لا تتردد في نسخ التخطيط الفوضوي الخاص بي إذا لم تكن تستخدم بالفعل تصميم خاص بك. لقد نفذت مخططي بشكل سريع في الواقع من أجل هذا البرنامج التعليمي.

و CSS

دعونا نعلق الشريط الجانبي الأيمن والرأس لدينا مع المواضع. أضف الموضع العلوي إلى الرأس والموضع الأيمن إلى الشريط الجانبي الأيمن.

الآن دعونا نقوم بإنشاء وحدات لهذين الموضعين. انتقل إلى منطقة المسؤول في جوملا، قم بتسجيل الدخول إذا لزم الأمر، وانتقل إلى مدير الوحدة النمطية ضمن القائمة المنسدلة ملحقات. سترى القائمة الرئيسية والتذييل الذي أنشأناه سابقًا. اتبع نفس الخطوات لإنشاء وحدتين إضافيتين. وحدة البحث التي ستضعها في الموضع الأعلى ووحدة تسجيل الدخول التي ستضعها في الموضع المناسب.

قم بمعاينة صفحتك، يجب أن يكون لديك الآن شريط بحث في ترويستك ونموذج تسجيل الدخول في الشريط الجانبي الأيمن. هذه هي إلى حد كبير أساسيات قالب جوملا. يمكنك إنشاء مواضع في التصميم الخاص بك، مثل الخطافات الصغيرة لـ Joomla لإرسال المعلومات إليها، والتي في معظم الحالات تنشئها في النهاية الخلفية. يمكنك تطبيق هذا على أي تصميم باستخدام المواضع المتعددة التي تقدمها Joomla. آمل أن يكون هذا مفيدًا لكم يا رفاق، ضع في اعتبارك أن هذه هي الأساسيات تمامًا، يمكن تصميم نماذج Joomla بحيث تكون معقدة وقوية كما تريد.

  • اشترك في NETTUTS RSS Feed لمزيد من المقتنيات اليومية لتطوير الويب والمقالات.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.