تشريح التيم

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

الملف .infoاسم التيم
القوالب .tpl.php
ملفات الستايل style.css
ملف template.php
ملفات صور لشعار الموقع

بشكل عام الملف يحتوي على المعلومات التالية:

name اجباري
description يفضل
screenshot
version لا ينصح به
core اجباري
engine اجباري في أغلب الأحيان
base theme
regions
features
stylesheets
scripts
php

الملف .infoاسم التيم مثال التيم ZEN له ملف zen.info في هذا الملف نحفظ كل إعدادات التيم
القوالب .tpl.php للتحكم في عرض المعلومات
ملفات الستايل style.css للتحكم في المظهر من ناحية الألوان و الحجم و المكان كل المعلومات المعروضة
ملف template.php الذي يحتوي السكر يبت الخاص بكل تيم في حالة الضرورة
ملفات صور لشعار الموقع إلى آخره

سننظر بتمعن في هذه الملفات

الملف info اسم التيم: ملف إجباري

يحتوي على

core = 6.x  

engine = phptemplate 

stylesheets[all][] = style.css 

regions[header] = header 

regions[sidebar_first] = sidebar first 

regions[sidebar_last] = sidebar last 

regions[footer] = footer

اسم التيم
مكان ملفات الستايل
مكان الملفات جافا سكر يبت لفي حال استعمالها
أسماء المناطق regions وكلمة ريجيون هي كلمة مفتاحيه تفهم من خلالها دروبال بأنك تريد الإعلان عن منطقة
و بعض الإعلانات الأخرى لكن تبقى اختيارية
القوالب tpl.php :
نتحكم في كل عنصر من المحتوى ( عقدة, صندوق, صفحة ....) بقالبه الخاص القوالب تحدد أي حقل سيعرض
تتكون هذه القوالب من ملفات نص للمحتوى الجامد و من متغيرات PHP للمحتوى الديناميكي ومن أوسمة HTML لتحديد هيكل الوثيقة كما تستطيع عرض آرأ س اس
ملفات الستايل:
بواسطة هذه الملفات تتحكم بشكل عرض الصفحة في حال عدم وجود هذا الملف دروبال تستعمل الإعدادات الموجودة في كل وحدة من الوحدات
و في حال وجودها دروبال تعطي الأولوية لهذه للملفات الشخصية

لو فتحنا دليل التيم المتواجد themes\bluemarine

سنجد ما يلي:

ولو فتحت الملف info ستجد ما يلي:

; $Id: bluemarine.info,v 1.42007/06/08 05:50:57 dries Exp $

name = Bluemarine
description = Table-based multi-column theme with a marine and ash color scheme.

version = VERSION

core = 6.x

engine = phptemplate
; Information added by drupal.org packaging script on 2009-05-13

version = "6.12"

project = "drupal"

datestamp = "1242243950"

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

Eclipse

Eclipse هو مشروع مفتوح المصدر يتكون من عدد كبير من البرامج المكتوبة بالغة جافا تشكل منصة تطوير للغة جافا و بي اتش بي و Python, perl, Ruby, Ada, css, xml, Xhtml و كثير من اللغات الأخرى
الذي يهمنا في هذا المقال هو تنزيل منصة تطوير PHP عملية التنزيل صعبة في البداية لكن بإذن الله سأحاول شرحها بطريقة بسيطة و بعد ذلك سيكون عندك كل الأدوات الحرفية لكي تبرمج مواقع الويب
لتنزيل Eclipse مع PHP أنت بحاجة إلى
أولاً
آلة جافا الافتراضية بإمكانك زيارة الرابط التالي للتحميل بشكل عام هذة الآلة موجودة على جهازك لكن تستطيع تحميل أخر نسخة على الرابط التالي
http://java.sun.com/javase/downloads/index.jsp
ثانياً
عليك الحصول على أخر إصدار Eclipse على الرابط التالي
http://www.eclipse.org/downloads

تـم تـحديث هذا الموضـوع يـوم الأحـد 8 تشـرين الثاني عام 2009

مضت فترة منذ كتابة هذا الموضوع وظهر هناك اصدار جديد Eclipse All-In-One يحتوي على كل أدوات تطوير الويب فيه محرر php css html js و كل المعدات لتطوير مواقع الويب بواسطة ajax جربته و اعتمدته هذه مسارات التحميل
نسخة ويندوز

All-
In-One Windows 32-bit

نسخة ماك

All-In-One Mac OS X Carbon

نسخة لينيكس

All-In-One Linux x86/GTK 2

ستصل لصفحة تختار منها بلد التحميل اختار حسب مزاجك

كما تستطيع تحميل النسخة السابعة من Zend Studio

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

بعد التحميل فك ضغط هذا الملف بواسطة WinZip أو WinRAR على القرص المحلي بحيث يكون مساره كالتالي في دليل C:\Eclipse
ما عليك إلا الذهاب إلى الملف C:\Eclipse و الضغط على Eclipse.exe
ستظهر لك رسالة تطلب منك مسار ملف العمل ما يسمى workspace ما عليك إلا أن تنشأ دليل test أو أي اسم آخر حسب مزاجك أنصحك في البداية أن تنشئ هذا الدليل داخل دليل www وهو الملف الجذري لخادم الويب المسار ضروري لكي تستطيع تجربة برامجك في المستقبل هذا المسار C:\camel\www\test إذا كنت قد اتبعت كل الخطواط لتنزيل camel server
أو C:\wamp\www\test إذا كنت قد اتبعت كل الخطواط لتنزيل wamp server

بعد ذلك ستظهر لك الصفحة الترحيبة للمنصة ما عليك إلا إغلاقها
لقد انهينا المرحلة الأولى من التنزيل تبقى عليك تنزيل أدوات PHP
بعد ذلك
من شريط القوائم اضغط على Help > SoftwreUpdates

ستظهر لك نافذة و فيها عناوين مواقع التحميل عليك أن تضغط على الزر Add Site

على اليمين ستظهر لك نافذة تطلب منك المسار ما عليك إلا إدخال المسار التالي
http://update.phpeclipse.net/update/stable/1.2x
ثم اضغط على ok

لاحظ أن الموقع الجديد قد ظهر على قائمة المواقع حدد مربع الاختيار و اضغط على زر Install
ما عليك إلا إتباع عمليات التنزيل كأي برنامج أخر
بعد انتهاء عملية التنزيل أغلق Eclipse و افتحه من جديد
ستظهر لك رسالة تطلب منك مسار العمل ما يسمى workspace تلقائياً سيطرح عليك الملف المحدد سابقاً اضغط على ok

من شريط القوائم اضغط على Window > Preferences
افتح General > Editor>Spelling

على Encoding عليك اختيارUTF-8 لكتابة العربي

لنستغل فرصة و جودنا هنا لوضع اسم المبرمج
اذهب PHPeclipse>PHP>Code Templates
حدد New PHP files ثم اضعط على Edit

اكتب اسمك و ضع المتغير حسب طلبك
Ok
أغلق النافذة
أصبح عندك الآن كل الأدوات اللازمة لتطوير برامج ألبي اتش بي

عليك أن تنشئ مشروجديد اتبع التعليمات التالية

طبعاً عليك تحديد نوع الشروع و هو بي اتش بي

و أن تعطيه اسم

ثم أن تنشئ ملف جديد

و تحفظها في دليل العمل

الآن أصبح عندك كل ما يلزم لتحرير ملفات البي اتش بي ما عليك إلا أن تبدأ جرب البرنامج البسيط التالي و افتح الملف بمتصفح الويب

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

المرفق	الحجم
learn_php_easily.zip	1.49 ميجابايت
php_doc.zip	358.27 كيلوبايت

Configuring Eclipse

Configuring Eclipse
لضبط اكليبس بطريقة تتناسب مع متطلبات دروبال تستطيع الاطلاع على هذه الصفحة و اتباع التعليمات
Checkout Drupal CVS into the Eclipse Workspace
لتحميل دروبال من خادم cvs اتبع التعليمات التالية

القوالب

القوالب tpl.php :
نتحكم في عرض كل عنصر من المحتوى ( عقدة, صندوق, صفحة ....) و كل عنصر له قالبه الخاص القوالب تحدد أي حقل سيعرض و في أي مكان
تتكون هذه القوالب من ملفات نص للمحتوى الجامد و من متغيرات PHP للمحتوى الديناميكي ومن أوسمة HTML لتحديد هيكل الوثيقة كما تستطيع عرض آرأ س اس
ملف tpl يجب أن يبقى بسيط من الناحية المنطقية و هو خليط من أوسمة HTML و من متغيرات php
في حال عدم وجود ملفات tpl في التيم دروبال تستعمل تلقائيً الملفات الموجودة في دليل كل وحدة
و أفضل طريقة لتفهم جيداً كيف تعمل ملفات القوالب في دروبال سأخذ المثال التالي حضرت ملف html تستطيع تحضيره بأي محرر هتمل و نريد أن نستعمل هذة الصفحة كقاعدة لتسم دروبال
سأطلب منك المشالركة في هذا التمرين لكي تستفيد من هذة التجربة الصفحة موجودة في الملف المرفق في اسفل هذة الصفحة تستطيع تحميله و فتحه بواسطة أي متصفح ويب
ستشاهد صفحة html لتحويلها إلى تيم عليك أن تحاول إنشاء ملف info و ملف tpl تستطيع طرح سؤال في المنتدى للتتكلم عن الصعوبات في إنشاء التيم

إنشاء تيم لدروبال ليس بالصعوبة المتصورة

حسب حاجات موقعك يمكن أن يكون التيم سهل أو صعب أو أكثر صعوبة
كل ما تحتاجه لإنشاء تيم دروبال صفحة هتمل html مع قليلاً من الكود بي إتش بي الذي تستطيع نسخه من تيم موجود ولصقه في تيمك الجديد كل ما عليك معرفته هو اسم المتغير و ماذا يمثل على الصفحة
عندما تحمل تيم من موقع دروبال
و تفتحه تجد أن فيه الكثير من الكود و تعتقد أن إنشاء تيم يحتاج لمعرفة عميقة في البي إتش بي
الحقيقة أن التيمات المحملة من موقع دروبال تحاول أن تغطي كافة احتياجات مستخدمي دروبال في كافة أنحاء العالم و كل احتمالات الاستعمال شخصية أو مهنية
و الكمية الأكبر من كود البي إتش بي هدفها معرفة إذا كان هذا الإعداد مفعل أم غير مفعل بذلك يكون تطويع التيم سهل جداً لكن الكود يصبح صعب
على كافة الأحوال تيمك الشخصي لا يحتاج لكل هذة الصعوبات و لا تريد أن تشغله مع كل مواقع دروبال كل ما تحتاجه هو أن تعرض على موقعك ما تحتاج عرضه على طريقتك الخاصة
تستطيع أن تلقي نظرة على القوالب الأساسية لدروبال في دليل /modules/système و تمعن على الأخص في قوالب page.tpl.php و قالب node.tpl.php

تيم دروبال يتكون من بعض العناصر الرئيسية

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

المرفق	الحجم
Drupalarabi.zip	2.09 كيلوبايت

نظرة عامة على صفحات الأنماط التعاقبية

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

<link rel="stylesheet" type="text/css" href="/mytheme.css" />

هذا الكود يقول لمتصفح الويب مكان تواجد صفحة الأنماط mytheme.css المتحكمة في عرض هذه الصفحة
صفحة دروبال بالنسبة لمتصفح الويب تشبه تماماً هذه الصفحة نفس مسارات صفحات الأنماط موجودة في رأس الصفحة HTML header
الاختلاف الجذري يكمن في كيفية إضافة هذه المسارات دروبال تضيف هذه المسارات داخل الكود HTML بشكل آلي عند بناء الصفحة
التيم يوفر بعض صفحات الأنماط التعاقبية بينما البعض الآخر توفره الوحدات (بعض الوحدات توفر صفحات الأنماط التعاقبية للعرض المبدئي)
تستطيع أن تضيف ملفات جديدة من صفحات الأنماط التعاقبية إلى تيم معين
كما تستطيع تجاوز النمط المهيمن you can override a default style sheet الموفر من قبل وحدة أساسية أو من وحدة إضافية
و في حال استعمالك تيم فرعي تستطيع تجاوز صفحات الأنماط التعاقبية للتيم الأب.

إضافة صفحة أنماط تعاقبية عن طريق الملف info

هذا الجزء سيشرح كيفية إضافة صفحة أنماط تعاقبية عن طريق الملف .info للتيم. لإضافة صفحة أنماط تعاقبية عن طريق البرمجة اطلع على دوال أ ب ي API functions
هذه الصفحة توفر لك شرح كيفية تعديل الستايل في تيم معين عن طريق الملف .info للتيم
ملاحظات:

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

إضافة صفحة الأنماط

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

; إضافة صفحة أنماط لكل وسائط الاعلام الرقمية

stylesheets[all][] = theStyle.css

; إضافة صفحة أنماط للعرض على الشاشة

stylesheets[screen, projector][] = theScreenProjectorStyle.css

; إضافة صفحة أنماط للطباعة

stylesheets[print][] = thePrintStyle.css

ملاحظات:

لاحظ جوز الأقواس الفارغة بين media و بين stylename.css
صفحات الأنماط تضاف إلى الصفحة حسب ترتيبها في هذا الملف
تستطيع وضع هذه الملفات داخل دليل مخصص في تيمك مما يساعدك في تنظيم عملك كالتالي stylesheets[all][] = stylesheets/styleName.css

إضافة صفحة أنماط تعاقبية عن طريق Drupal API

في أغلب الأحيان إضافة صفحة أنماط تعاقبية عن طريق الملف .info يكون كافياً لكن هذا الملف جامد في بعض الأحيان و حسب الطريقة المستعملة من خلال التيم صفحات الأنماط التعاقبية لايمكن إضافتها بشكل ديناميكي
في حال ترددك استعمل الملف .info
API functions يوفر دالتين الأولى drupal_add_css و الثانية drupal_get_css لإضافة صفحات الأنماط التعاقبية :
في ما يلي مثال لكيفية إضافة صفحات الأنماط التعاقبية بشكل ديناميكي بواسطة هذة الدوال
عليك تبديل كلمة drop باسم تيمك المفعل

<?php
function drop_preprocess_page(&$variables){
$front_style = path_to_theme() .'/front-page.css';
$path_style = path_to_theme() .'/path-'. arg(0) .'.css';
  if (file_exists($front_style) && $variables['is_front']) {

    $include_style = $front_style;

  }

  elseif (file_exists($path_style)) {

    $include_style = $path_style;

  }
  if (isset($include_style)) {

    drupal_add_css($include_style, 'theme', 'all', FALSE);

    $variables['styles'] = drupal_get_css();

  }

}

?>

في هذا المثال صفحة الأنماط التعاقبية المتحكمة في عرض الصفحة الرئيسية front-page.css ستستعمل لعرض الصفحة الرئيسية و الصفحات أخرى انطلاقاً من المسار الداخلي مثال http://example.com/admin ستستعمل صفحة الأنماط التعاقبية التي تحمل اسم على شكل path-admin.css

ملاحظات:

حسب توقيت و مكان إضافة صفحة الأنماط التعاقبية يتوجب نداء الدالة drupal_get_css لضم هذه الصفحات
تستطيع الاطلاع على template_preprocess_page لمزيد من المعلومات حول كيفية ضم صفحة الأنماط التعاقبية
drupal_add_cs يتضمن إعداد يتوجب تعطيله عند إضافة صفحة الأنماط التعاقبية بشكل ديناميكي لتفادي تحمل الموقع عبئ إضافي و بطئه

دعم اللغة العربية

لدعم اللغة العربية و عرض اللغات التي تكتب من اليمين إلى اليسار يتوجب عليك تجاوز أساليب العرض الجانبية و إعطاء الملف الجديد اسم style-rtl.css و دعم اللغة العربية يتم بشكل آلي حسب إعدادات اللغات و كيفية ضبطها
اطلع على صفحة ضبط اللغات لمزيد من المعلومات
على سبيل المثال التيم Garland بشكل مبدئي يعتمد الملف style.css و متوفر له ملف style-rtl.css لكل اللغات التي تكتب من اليمين إلى اليسار مثل العربي و العبري و الفارسي ... إلى أخره
ضم هذه الملفات يتم بشكل تعاقبي أولاً الملف الرئيسي style.css و بعده يأتي ملف style-rtl.css مما يتيح بتطبيق قواعد العرض بشكل تعاقبي بدون أن تهتم في اختيار المحدد
دروبال لها قواعدها في كتابة الكود إحدى هذه القواعد تتعلق في صفحات الأنماط التعاقبية
هذه القاعدة تقول كل قاعدة عرض مخصصة لطريقة كتابة من اليسار إلى اليمين يجب أن ترفق بتعليق كالتالي /* LTR * /
و هذا يدل على أن هذه القاعدة تحص فقط اللغات التي تكتب من اليسار إلى اليمين و بشكل عام تخص العناصر float و margins و padding إلى أخره
النص المتدفق سيوضع بشكل ألي من اليمين إلى اليسار طالما أنه قد سبق و أعلن عنه بهذه الطريقة في ملف page.tpl.php
مثال على نمط تعاقبي
في الملف الرئيسي style.css

ul.primary-links {

margin-top: 1em;

padding: 0 1em 0 0; /* LTR */

float: left; /* LTR */

position: relative;

}

ما يقابله في ملف style-rtl.css

ul.primary-links {

padding: 0 0 0 1em;

float: right;

}

هذه الإضافة /* LTR * / تسهل عليك مهمة التعريب ما عليك إلا البحث عنها في الملف الرئيسي و تعديلها في ملف style-rtl.css

ملاحظة:
لو أن تيمك تجاوز صفحات الأنماط التعاقبية لوحدة من الوحدات دروبال ستتجاهل الملف RTL المتواجد في هذه الوحدة إلا إذا أنشأت هذا الملف في تيمك اطلع على صفحة كيفية تجاوز أنماط الوحدات

شرح فيديو لطريقة استعمال Firebug

هناك الكثير من الأدوات التي تساعك في تعريب ستايل عن طريق ملفات الستايل لأي برنامج إدارة محتوى من هذه الأدوات Firebug أداة هامة لابد منها لمطور الويب و هي إضافة من إضافات Firefox
في هذا الشرح سأستعمل الأدوات التالية:

Firebug

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

كما تجد شرح سريع عن

TopStyle محرر ملفات الأنماط التعاقبية

محرر css مجاني سهل الاستعمال سأستعمله لإنشاء ملف الستايل المعرب
على هذه الصفحة تجد شرح مفصل عن كيفية استعمال هذا البرنامج Using TopStyle Lite (CSS Editor)
تستطيع تحميله من الرابط التالي: هالرابط و في أسفل الصفحة عندك رابط تحميل النسخة المجانية من توب ستايل Download Top Style Light

La Boite à couleurs

علبة الألوان برنامج يساعدك في كتابة الألوان حسب الأرقام hexadécimal
و هي أهم طرق كتابة الألوان في لغة ل css
علبة الألوان تساعدك في معرفة رمز كل لون حسب الأرقام hexadécimal حمل علبة الألوان من هنا عبارة عن برنامج صغير و عملي جداً جداَ يساعدك في كتابة الألوان حسب الأرقام hexadécimal و استعماله سهل كنير

تحويل أي قالب html إلى تيم دروبال

تيم دروبال يتكون من بعض العناصر الرئيسية
لكي تنشئ تيم إنطلاقاً من صفحة html و هو المثال المستعمل في هذا الشرح افتح الملف page.html و احفظه باسم page.tpl.php استعمل محرر نص و شخصياً أنصحك بأن تبدأ استعمال eclipse
هذا رأس الصفحة فيه تدخل معلومات عن الموقع و معلومات عن الملفات css و js و عن لغة الصفحة إلى أخره
عندما تحول صفحة html إلى قالب tpl.php عليك أن تضيف منعيرات البي.إتش.بي التي تعبر عن نفس الأشياء

العناصر الأساسية لإنشاء تيم دروبال

كما تعرف صفحة دروبال تتألف من بعض العناصر الأساسية وهي

الهيدر

في قسم الهيدر ادخل الكود التالي

<head>

  <title><?php print $head_title; ?></title>

        <?php print $head; ?>

        <?php print $styles; ?>

        <?php print $scripts; ?>

</head>

الهامش

في الهامش اليساري أو/ و اليميني عليك أن تدخل الكود التالي

<?php print $left; ?>

<!-- انسخ الكود التالي للهامش اليميني-->

<?php print $right; ?>

</code></div>

القوائم

هناك القائمة الأولية و القائمة الثانوية في حال استعمالك القائمة الأولية
عليك أن تدخل الكود التالي في أي منطقة من المناطق حسب حاجتك

<div id="primary">

<?php print theme('links', $primary_links); ?>

</div> <!-- /#primary -->

تتردد بين استعمال القائمة الأولية أو استعمال القائمة الثانوية تستطيع أن تدخل الكود التالي و بعد ذلك تحدد أي من قائمتين ستستعمل

<?php if ($primary_links): ?>

<div id="primary">

    <?php print theme('links', $primary_links); ?>

</div> 

<?php endif; ?>

<?php if ($secondary_links): ?>

<div id="secondary">

    <?php print theme('links', $secondary_links); ?>

</div>

<?php endif; ?>

المحتوى الرئيسي للصفحة

لحد الآن أنت أضفة إطار الصفحة حان الوقت لإضافة محتوى الصفحة في منطقة المحتوى أضف الكود التالي

<?php if ($breadcrumb): ?><div id="breadcrumb"><?php print $breadcrumb; ?></div><?php endif; ?>

<?php if ($mission): ?><div id="mission"><?php print $mission; ?></div><?php endif; ?>

<div id="content">

<?php if ($title): ?><h1 class="title"><?php print $title; ?></h1><?php endif; ?>

<?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>

<?php if ($messages): print $messages; endif; ?>

<?php if ($help): print $help; endif; ?>

<?php print $content; ?>

</div>

قدم الصفحة

<?php if ($footer_message || $footer) : ?>

<div id="footer-message">

    <?php print $footer_message . $footer;?>

</div>

<?php endif; ?>

وسم النهاية

وسم النهاية لكي تشير لدر وبال بأن صفحتك قد انتهت في أخر الصفحة أضف الكود التالي

<?php print $closure; ?>

</body>

</html>

الملف info

الآن عليك إنشاء الملف info على الشكل التالي

name = YourThemeName

!REG3XP1!>description = Description of YourTheme

core = 6.x

engine = phptemplate

stylesheets[all][] = style.css

regions[left] = Left sidebar

regions[right] = Right sidebar

regions[content] = Content

regions[header] = Header

regions[footer] = Footer

عليك أن تستبدل YourThemeName باسم تيمك
أحفظ عملك و تيمك أصبح جاهز للعمل تستطيع تفعيله من صفحة ادر/بناء الموقع/ التيمات
تستطيع تطبيق هذه الطريقة على أي قالب html و تحويله إلى تيم لدر وبال

على هذة الصفحة هناك فيديو شرح كامل لعملية التحول html إلى tpl.php

كيف تختار تيم موقعك و ما هو starter themes

عندما تبدأ مشروع موقع جديد و تريد اختيار تيم يتلائم مع هذا المشروع عليك أن تختار بين ثلاثة خيارات :

أن تختار تيم جاهز و تقوم بتكيفه و تعديله حسب متطلبات موقعك
أن تحول قالب XHTML/CSS إلى تيم دروبال
أن تبدأ تيم جديد من الصفر

في الوهلة الأولى نعتقد أن الخطة الأولى تشكل أسهل طريق لإنشاء التيم مع الوقت نكتشف بأننا سجنا نفسنا في قوقعة صلبة لا تتيح لنا تعديل التيم بشكل يلائم تطورات الموقع.
لذلك ظهر في الفترة الأخيرة نوع جديد من التيمات و هو starter themes لا تعلق أهمية لمنظره القبيح عند التفعيل في الوهلة الأولى لأن الذي صمم هذا التيم لم يصممه ليكون جاهز للعمل عند تفعيله بل صممه ليعطيك كل متطلبات التيم لكي تنشئ مشروعك حسب مزاجك.
starter themes هو عبارة عن هيكل عظمي لتيمك الجديد عليك تعديله و اختيار الألوان إلى أخره, في الحقيقة هو تيم مجرد من كل الإضافات المظهرية لكنه يقدم لك مـخـطط صفحة عملي جداً و متلائم مع كل متصفحات الويب, عندما تستعمل "starter" themes فإنك تريح نفسك من كل مشاكل التوافق مع متصفحات الويب كما أنه يتوافق مع معايير و توجيهات W3C.
starter themes يعطيك الأساسات الصلبة لكي تبني عليها تيمك الجديد عندما تتقن استعماله و تستوعبه بشكل جيد, يصبح لديك أداة إنتاجية محترمة و هائلة القدرات.
كل ما عليك عمله هو إضافة الصور و الستايل بدون أن تتعب نفسك بمشكلة التوافق مع متصفحات الويب
هناك عدد كبير من starter themes على موقع دروبال أشهرها Zen , Foundation , Advanced Theme Construction Kit ATCK .

تركيب سكربت منتدى عربي

وحدة Advanced Forum
في هذا الشرح ستشاهد كيفية تعريب وحدة Advanced Forum
استعملت في شرحي الأدوات التالية:

متصفح الويب متصفح فَـيَرْفُكْـس و إضافته Add-Ons الشهيرة فيربوج Firebug
النسخة الأخيرة من برنامج إدارة المحتوى دروبال 6.14
النسخة الأخيرة من وحدة منتدى متقدم Advanced Forum
منصة إكليبس Eclipse لتحرير ملف CSS
وحدة استخراج ملفات الترجمة Translation template extractor
و أخيراً استعملت برنامج Poedit لترجمة الملف po

فيديو الشرح:

اتبعت الطريقة التالية:
1 حملت وحدة Advanced Forum و فعلتها
2 ضبطت إعدادات الوحدة و اخترت القالب الملائم لي
3 استعملت فيربوغ للبحث عن ملف ضبط عرض المنتدى
4 قمت بإنشاء مجلد جديد اسمه advanced_forum في مجلد التيم المفعل على موقعي ( هذة العملية غير اجبارية لكن إنشاء الملف يساعدك على ترتيب عملك و عندما تريد تعديل القالب بعد ستة ستعرف أن كل ما يتعلق في المنتدى موجود في هذا الملف مما بسهل عليك عمليات الصيانة) لكي أضع بداخلة ملفات الستايل و صور المنتدى
5 تسخة بداخله ملف الستايل advanced_forum.css
6 أضفة في أسف الملف info اسم الملف الجديد و مساره على شكل :

stylesheets[all][] = advvence_frorum/advanced_forum-structure.css

7 إضفت الصور المعربة في هذا المجلد
8 من صفحة ضبط وحدة Advanced Forum أعطيت دروبال مسار الصور لتستعملها بدلاً عن صور الوحدة
9 استخرجت ملف الترجمة عن طريق وحدة ررر لتعريبه و من ثم استيرادها من جديد
انتهى العمل و صار عندك منتدى عربي جاهز للعمل.
تستطيع تطبيق هذه الطريقة لتعريب أي وحدة من وحدات دروبال

تنسيق الصفحة الرئيسية عن طريق block theme

سأحاول قدر الإمكان استعمال starter themes في كل دروس دروبال عربي لكي تتعود عليهم و تستعملهم في مشاريعك القادمة اليوم سأستعمل Basic و هو تيم سهل التعديل كالعادة استعملت في شرحي ألوان فاقعة فقط لكي تستطيع مشاهدة تقسيمات التيم الرجاء عدم التدقيق على جمال الألوان الهدف هو أن يكون عندك فكرة عن التيم لا أكثر
في نهاية الدرس الصفحة الرئيسية ستكون على الشكل التالي:

العملية الأولى علينا إنشاء صفحة جديدة في الشرح كعنوان استعملت Home لكن بإمكانك أن تختار أي اسم أخر

في متن الصفحة اتركها فارغة تماماً سجل عملك و انظر إلى شريط العناوين في متصفحك المسار عندي هو
http://localhost/node/7

تنسيق الصفحة الرئيسية عن طريق Views

هناك أكثر من طريقة لتنسيق الصفحة الرئيسية في هذا الشرح سنستعرض طريقة سهلة و عملية تستطيع من خلالها إضافة بعض الصناديق لمحتوى الصفحى
طبعاُ عليك أن تختار المعلومات التي ستعرض في الصفحة الرئيسية في هذا الشرح سأستعمل تيم من ما يسمى starter themes و هو beginningW2 معمول ليساعدك على إنشاء موقع ويب 2 فيه مناطق كثيرة و
سهل التعديل استعملت في شرحي ألوان فاقعة فقط لكي تستطيع مشاهدة تقسيمات التيم الرجاء عدم التدقيق على جمال الألوان الهدف هو أن يكون عندك فكرة عن التيم لا أكثر مع العلم بأني لم أعربه بشكل كامل قلت وقت
العملية الأولى علينا إنشاء صفخة جديدة في الشرح كعنوان استعملت الصفحة الرئيسية لكن بإمكانك أن تختار ما تشاء
في متن الصفحة اتركها فارغة تماماً سجل عملك و انظر إلى شريط العناوين في متصفحك المسار عندي هو
http://localhost/node/5
العملية الثانية عليك أن تفتح صفحة معلومات الموقع من ادر/ ضبط الموقع/ معلومات الموقع

في اسفل الصفحة عندك حقل الصفحة الأولى المبدئية عليك ان تدخل مسار الصفحة التي أنشاتها لهذه الغاية
كما سبق و قلت لك بأن صفحتي كان مسارها http://localhost/node/5
إذاً سأدخل في حقل المسار node/5
على الشكل التالي :

سجل عملك لو اذهب الآن للصفحة الرئيسية ستجد صفحة فارغة
الآن عليك أن تحدد ما تريد عرضه في هذه الصفحة سأعطيك فكرة و هي استعمال وحدة Views
أنشأت ثلاث صنديق بسرعة لكي استعملهم في الشرح
كالتالي :

التحكم في شكل صندوق البحث

ضبط صندوق البحث
كل واحد منا يحاول إنشاء موقع جميل و متناسق
أعتقد أنك سبق و لاحظت أن عنوان صندوق البحث Search this site: لا محل له من لإعراب

يمكن أن تكون قد سبق و حاولت أن حذف هذه الجملة, لأن صندوق البحث ليس بحاجة لهذا العنوان القبيح نوعاً ما
تعديل ملف css يشكل أسهل طريقة لحذف هذه العبارة ما عليك إلا إضافة التالي في ملف الستايل

#search-block-form label {display: none;}

بهذا الكود تستطيع أن تحذف جملة Search this site من صندوق البحث
لكن الأفضل من ذلك هو استعمال وحدة جديدة ظهر أول إصدار لها منذ بضعة أيام و أحببت أن أشارككم الخبر و هي وحدة Custom Search Box
تتيح لك هذه الوحدة التحطم بشكل تام بصندوق البحث
تركيب الوحدة يتم كتركيب أي وحدة أخرى :
1 حمل الوحدة و فك ضغطها في مجلد sites/all/modules
2 تفعيل الوحدة من ادر /بناء الموقع/ الوحدات
وبعد ذلك من إعدادات الموقع ستجد أن وحدة Custom Search Box قد إضافة لإعدادات البحث ما يلي: