شرح قوالب بلوجر ... العناصر الأساسية

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

في هذا الفصل سنتعرف على بعض الوسوم الأساسية التي تعتمد عليها بلوجر . و سنفهم أيضا كيف يتعامل بلوجر مع هذه الوسوم .

الفهرس

عناصر تصميم المدونة .
المقاطع .
الأدوات .

عناصر تصميم الصفحة

هل أنت جاهز ؟ لنبدأ إذن

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

أثناء تصميمنا لقالب المدونة فإننا سنقوم بتصميم ثلاث واجهات في نفس الوقت ، الصفحة الرئيسية للمدونة ، صفحة التدوينة و واجهة عناصر الصفحة ( الواجهة التي تظهر في .. لوحة التحكم ← تصميم ← عناصر الصفحة ) .
حيث يتم تصميم الواجهات في مرة واحدة .
كيف ؟
في الصفحة الرئيسية يتعامل بلوجر مع وسوم الـxml بشكل ، و في واجهة عناصر الصفحة يتعامل معها بشكل مختلف تماما ، أما صفحة التدوينة فهي نفس الصفحة الرئيسية مع تغيير الأداة الأساسية ' رسائل المدونة ' فقط .

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

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML>
<html>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[

]]></b:skin>
<style type="text/css">

</style>
</head>
<body>

</body>
</html>

شاهد المدونة ، ستجدها صفحة بيضاء فارغة

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

.

لقد نبهت في الفصل السابق على ضرورة معرفة لغة HTML و CSS قبل الشروع في التصميم في بلوجر . و لازلت متمسكا بما أقول . فأنا الان أفترض أنك تعرف ماهي الوسوم ( tag ) و السمات ( attributs ) و العناصر و غيرها ... لكنني لم أفرض معرفة لغة xml ، فإن كنت لا تعرف الـxml فلا شك أنك وجدت في الكود السابق بعض الوسوم التي لم ترها قط .

<?xml version="1.0" encoding="UTF-8" ?>

هذا السطر يخبر المتصفح ( أو بلوجر ) أن الملف ملف xml و أننا نستخدم الإصدار 1.0 من هذه اللغة و نستعمل الترميز UTF-8 .

<b:include data='blog' name='all-head-content'/>

هذا وسم خاص ببلوجر . إن لم تضفه فلن تعمل أدوات التحرير السريع . لذلك لا تنساه .

<data:blog.pageTitle/>

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

.
هذا ليس كل شيء . فالوسم </ data:blog.pageTitle> لا يُظهر عنوان المدونة فقط . بل كما قلت سابقا يُظهر عنوان الصفحة . فعندما تدخل إلى تدوينة ما . ستجد في شريط المتصفح عنوان المدونة و عنوان التدوينة أيضا بهذه الطريقة :
عنوان المدونة : عنوان التدوينة .

لا يمكننا مشاهدة التدوينات الان في المدونة التجريبية لأننا لم نضع بعد أداة " رسائل المدونة الإلكترونية " . و إن ذهبت إلى واجهة عناصر الصفحة في لوحة التحكم فستجد أنها فارغة .

<b:skin><![CDATA[ ]]></b:skin>

لقد وضعت وسم الإغلاق <b:skin/> بعد سطرين من وسم الفتح <b:skin> مع وجود العنصر CDATA ، بين هذين الوسمين نكتب خصائص الـCSS الخاصة بقالب المدونة .
هذا ما يفترض أن يكون . لكن للأسف الشديد الخصائص التي نكتبها بين هذين الوسمين لا تنطبق على واجهة العناصر .
تخيل أننا وضعنا أداة ' رأس الصفحة ' بعرض 500px ، سيظهر في الصفحة الرئيسية للمدونة بـ 500px لكن في واجهة عناصر الصفحة ستظهر بشكل اخر ، ستظهر ممتدة على طول الصفحة كما لو أننا لم نضع خاصية العرض 500px . للأسف .
الحل
الحل بسيط للغاية ، و هو التخلي عن عنصر b:skin و كتابة الخصائص بين الوسمين <style> و <style/> . هذا يجعل الخصائص تنطبق على واجهة عناصر الصفحة أيضا ، لكن هناك بعض الخصائص التي تأثر على جمالية واجهة عناصر الصفحة .
ما العمل ؟
أولا سنقوم بتصميم كامل المدونة مع كتابة خصائص الـCSS داخل العنصر <style> .

إذا وجدنا أن بعض الخصائص تأثر على واجهة عناصر الصفحة ، سنقوم بحذف الخاصية المؤثرة من داخل العنصر <style> و سنكتبها داخل العنصر <b:skin> .

لتوضيح الأمر قليلا شاهد الصور التالية :

هكذا تبدوا واجهة عناصر الصفحة عند كتابة جميع خصائص CSS داخل العنصر <style> فقط

هذه واجهة أخرى تم تعديل خصائصها .

على ما أعتقد ، الواجهة الثانية أفضل من الأولى .

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

المقاطع

يتكون قالب بلوجر بالإضافة إلى عناصر HTML و الخصائص CSS من ما أسميه مقاطع ( sections ) .
أتذكر المربع الذي يوجد في واجهة تصميم الصفحة :

يمكننا هذا المربع الصغير من إضافة الأدوات و ترتيبها و التحكم بها بسولة و سلاسة ( خاصة بعد إدخال إمكانية السحب التلاقائي ) .
بعد إضافة بعض الأدوات نجد أنها تترتب عموديا بهذا الشكل :

هذه الترتيبة التي تراها تسمى مقطعا ( section ) و هي كما تظهر في واجهة تصميم الصفحة صناديق فوق بعضها البعض ، فإنها تظهر في صفحات المدونة على شكل أدوات مرتبة فوق بعضها البعض .
و على مستوى صفحة تحرير HTML القالب في لوحة بلوجر فإن إدخال مقطع يتم بإدخال العنصر <b:section> كالتالي :

<b:section id="section1"></section> أو <b:section id="section1"/>

سواء أدخلت المقطع بعنصر عادي أو بعنصر مغلق يبقى صحيحا ، لكن الأهم هو تعريف كل مقطع بـID مميز .
إن أدخلت المقطع دون سمة id فإن نموذجك لن يقبله بلوجر و سيرسل الرسالة التالية :
يفتقد أحد الأقسام إلى سمة المعرف المطلوبة. يجب أن يكون لكل قسم معرف فريد.
يمكن تقسيم المدونة إلى عدة مقاطع بحيث يشكل المقطع 1 رأس الصفحة ( المقطع الذي يحتوي على أداة رأس الصفحة ) و المقطع 2 القائمة الجانبية sidebar و 3 مقاطع في الأسفل و لا تنس المقطع الرئيسي الذي يحتوي على أداة ' رسائل المدونة الإلكترونية ' .
يمكنك إضافة ما لا نهاية من المقاطع في القالب ، كل ما يلزم هو التنسيق الجيد بينها و هذا يعتمد على مهاراتك في الـHTML و CSS .

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

سمات المقاطع الإضافية
بالإضافة إلى سمة التعريف id هناك سمتان إضافيتان يمكن إستعمالهما
سمة maxwidgets
هذه السمة تأخذ قيمة عددية صحيحة و موجبة مثل 1 أو 2 أو 3 .... و هذا يحدد العدد القصوي من الأدوات الممكنة إضافتها في هذا المقطع . مثال

<b:section id="section1" maxwidgets="2"/>

بهذه السمة لن تستطيع إدخال أكثر من أداتين في هذا المقطع .

هناك سمتين أرى أنهما غير مهمتين . ليس لأنني لا أريد أن أكثر عليكم بل لإنني لا أستعملهما حقا و أرى أنهما تافهتين و يمكن الإستغناء عنهما . على كل حال .
هناك سمة showaddwidget و هي تقبل قيمتين true أو false تتحكم في ظهور مربع ' إضافة أداة ' . و عذرا لم أستطع تذكر السمة الثانية و هذا لأنني لا أستخدمها كما قلت سابقا

.

التصميم الإفتراضي للمقطع
في صفحة تحرير HTML القالب نحن نكتب بلغة xml حيث نكتفي بوضع الوسم <b:section> السابق للدلالة على وجود مقطع ، لكن ما يظهر في المتصفح أثناء عرض المدونة شيء اخر ينتمي للغة HTML .
حيث بدل من أن نجد في المتصفح الوسم </"b:section id="section1> فإننا نجد ببساطة .

يظهر المقطع في المتصفح على شكل صندوق div بسيط معرف بـclass ذا قيمة section و id يأخذ القيمة التي تدخلها في التصميم .
لهذا إن أردت تخصيص المقطع بتحديد عرض مناسب له أو خلفية ما فيكفي كتابة الـCSS داخل عنصر <style>

}

</style>

الأدوات

تأتي قوالب بلوجر عادة فارغة من الأدوات ، إلا بعض الأدوات التي يرى مصمم القالب تثبيتها في القالب ، و من أروع الأدوات التتي تتوفر عليها بلوجر هو أداة javascript/html و هي الأداة الأكثر إستعمالا من بين جميع الأدوات .

لا أريد أن أبتعد كثيرا .

الأدوات هي ما يسمى بالإنجليزية widget و يتم إدخالها في القالب بإدخال عنصر <b:widget> ، هناك طريقة أخرى أبسط تمكننا من إدخال الأدوات في القالب ، فبعد تصميم المقاطع في القالب نذهب إلى واجهة تصميم الصفحة و نضيف أدواتنا بطريقة عادية .

هناك بعض الأدوات تكون ثابثة ، لا تستطيع سحبها من مكانها كأداة ' رسائل المدونة الإلكترونية ' عادة .

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

نفترض أنك أضفت أداة javascript/html

<b:section id="section1">
<b:widget id="HTML1" locked="false" title="Javascript/HTML" type="HTML" />
</b:section>

هناك سمتين جديدين هنا : locked و type .

السمة locked
تأخذ السمة locked قيمتين فقط true و false :

إذا كانت قيمة true فإن الأداة ستصبح ثابثة في القالب و لا يمكن أن تزاح كالأدوات التي نضيفها .

إذا كانت القيمة false فإن الأداة تعود إلى طبيعتها و تصبح قابلة للإزاحة كما كانت .

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

السمة type
تأخذ قيم كثيرة من الغباء حفضها كاملة .
و هذه القيمة التي تأخذها سمة type تحدد نوع الأداة .
فمثلا القيمة HTML تعني أن الأداة هي Javascript/HTML
القيمة Header تخص أداة ' رأس الصفحة '
القيمة LinkList تخص أداة ' قائمة الروابط '
....
....
.... القائمة طويلة سأدعك تكتشفها بنفسك

....
أما القيمة التي تخص أداة ' رسائل المدونة الإلكترونية ' فهي Blog و لا تنساها

.

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

<b:section id="section1">
<b:widget id="Blog0" locked="true" type="Blog" />
</b:section>

ملاحظة صغيرة حول السمة ID في عنصر <b:widget> : إنها تأخذ دائما قيمة السمة type متبوعة برقم ، بهذه الطريقة يرتب بلوجر أدواته . لذلك لا تحاول تغييرها ، في حال قتلك الفظول و غيرتها فإن نموذجك لن يتم قبوله

شيء اخر : يجب الإحتفاظ بقيم السمة Type كما هي تماما ، فالأحرف الكبيرة و الأحرف الصغيرة ليستا نفس الشيء ، لاحظ أن القيمة Blog تكتب بحرف B كبير و الحروف الأخرى log صغيرة ، و نفس الشيء بالنسبة للقيم الأخرى .

التصاميم الإفتراضية للأدوات
فكما يظهر المقطع في المتصفح على شكل صندوق <div> تظهر الأدوات بتصماميم إفتراضية خاصة بها و هي أكثر تعقيدا و تختلف من أداة إلى أخرى . و هي تحتاج إلى شرح كثير .
لن أقوم بشرح التصاميم الإفتراضية لجميع الأدوات ، بل سأكتفي بثلاث أدوات أرى أنها الأكثر أهمية للمدونة ، و ليس فقط تصميمها الإفتراضي الذي يظهر في المتصفح بل حتى تصميمها الداخلي في بلوجر، و أقصد الضغط على الزر الصغير

و الغوص في عناصر جديدة سنتعرف عليها في الفصول القادمة .
و الأدوات الأربع التي سأطرق إليها هي :

أداة ' رسائل المدونة الإلكترونية ' بكامل تفاصيلها بتخصيص فصل كامل لها إن شاء الله .
أداة ' قائمة الروابط ' التي سنجعل منها قائمة أفقية بإعتماد خصائص CSS .
أداة ' ترقيم الصفحات ' رغم أنها لا توجد في بلوجر و يتم إخالها بكود Javascript إلا أنني أرى أنها أهم أداة تصفح .

إلى الفصل القادم

تحت تصنيف :