شرح قوالب بلوجر ... العناصر الأساسية
يتوفر بلوجر على مجموعة كبيرة من الأدوات التي تساعد صاحب المدونة من تحسين مدونته . لكن هناك أدوات أخرى غير مدرجة في التصميم الإفتراضي لمدونات بلوجر لكنها مع ذلك تشتغل ، كأداة " ترقيم الصفحات " ، فكل ما يلزم لإنشاء مثل هذه الأدوات هو إحترافية كاملة للغات البرمجة كالـJavascript و الـjQuery . و هذا هو الشيء الرائع في بلوجر و الذي يميزه عن باقي نظرائه . سماحيته بالأدوات الأجنبية عنه .
في هذا الفصل سنتعرف على بعض الوسوم الأساسية التي تعتمد عليها بلوجر . و سنفهم أيضا كيف يتعامل بلوجر مع هذه الوسوم .
الفهرس
في هذا الفصل سنتعرف على بعض الوسوم الأساسية التي تعتمد عليها بلوجر . و سنفهم أيضا كيف يتعامل بلوجر مع هذه الوسوم .
الفهرس
- عناصر تصميم المدونة .
- المقاطع .
- الأدوات .
عناصر تصميم الصفحة
هل أنت جاهز ؟ لنبدأ إذن 
تتكون مدونة بلوجر من عدة عناصر أساسية و غير أساسية ، متوافقة مع إعدادات بلوجر و أخرى فرعية .
العناصر الأساسية هي الأدوات التي لا يجوز إنشاء مدونة بدونها كرأس الصفحة أو مربع الرسائل ... و هي غالبا ما تكون متبثة في القالب .
أما الأدوات غير الأساسية فهي الأدوات فهي التي يتم إضافتها إختيارا من صاحب المدونة و التي يملك صاحب المدونة خيار حذفها .
هناك بعض الأدوات التي يمكن أن تعمل بدونها المدونة و مع ذلك تكون مثبثة في القالب ، خصوصا أداة " حقوق الطبع و النشر " .
أثناء تصميمنا لقالب المدونة فإننا سنقوم بتصميم ثلاث واجهات في نفس الوقت ، الصفحة الرئيسية للمدونة ، صفحة التدوينة و واجهة عناصر الصفحة ( الواجهة التي تظهر في .. لوحة التحكم ← تصميم ← عناصر الصفحة ) .
حيث يتم تصميم الواجهات في مرة واحدة .
كيف ؟
في الصفحة الرئيسية يتعامل بلوجر مع وسوم الـxml بشكل ، و في واجهة عناصر الصفحة يتعامل معها بشكل مختلف تماما ، أما صفحة التدوينة فهي نفس الصفحة الرئيسية مع تغيير الأداة الأساسية ' رسائل المدونة ' فقط .
أولا سأطلب منك إنشاء مدونة تجريبية فقط لنتعلم فيها و نجرب . بالطبع ستختار لها قالبا من قوالب بلوجر الجاهزة . لا يهم أي قالب تختار ، المهم هو أن يسمح لك بتحرير الـHTML في التصميم .
توجه الان إلى لوحة التحكم ← تصميم ← تحرير HTML و احذف كود القالب بأكمله و ضع مكانه الكود أسفله و إحفظ القالب الجديد مع حذف كل الأدوات .
الكود :
تتكون مدونة بلوجر من عدة عناصر أساسية و غير أساسية ، متوافقة مع إعدادات بلوجر و أخرى فرعية .
العناصر الأساسية هي الأدوات التي لا يجوز إنشاء مدونة بدونها كرأس الصفحة أو مربع الرسائل ... و هي غالبا ما تكون متبثة في القالب .
أما الأدوات غير الأساسية فهي الأدوات فهي التي يتم إضافتها إختيارا من صاحب المدونة و التي يملك صاحب المدونة خيار حذفها .
هناك بعض الأدوات التي يمكن أن تعمل بدونها المدونة و مع ذلك تكون مثبثة في القالب ، خصوصا أداة " حقوق الطبع و النشر " .
أثناء تصميمنا لقالب المدونة فإننا سنقوم بتصميم ثلاث واجهات في نفس الوقت ، الصفحة الرئيسية للمدونة ، صفحة التدوينة و واجهة عناصر الصفحة ( الواجهة التي تظهر في .. لوحة التحكم ← تصميم ← عناصر الصفحة ) .
حيث يتم تصميم الواجهات في مرة واحدة .
كيف ؟
في الصفحة الرئيسية يتعامل بلوجر مع وسوم الـ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>
<!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> لا يُظهر عنوان المدونة فقط . بل كما قلت سابقا يُظهر عنوان الصفحة . فعندما تدخل إلى تدوينة ما . ستجد في شريط المتصفح عنوان المدونة و عنوان التدوينة أيضا بهذه الطريقة :
عنوان المدونة : عنوان التدوينة .
أجل هذا عنوان الصفحة ، كما قلت في الفصل السابق ، الوسوم الخاصة ببلوجر تتحول في المتصفح إلى محتوى إعدادات المدونة . هذا الوسم يتحول إلى عنوان صفحة المدونة في المتصفح .
جرب أن تشاهد المدونة التجريبية التي أنشأتها ، ستجد أن العنوان الذي أسميت به مدونتك هو الذي يظهر في شريط المتصفح ، لتتأكد أكثر غير عنوان مدونتك و شاهد مرة أخرى الشريط و ستجد أن العنوان الجديد هو الذي يظهر .
بهذه الطريقة تنحفض معلومات المدونة رغم تغيير القالب
.هذا ليس كل شيء . فالوسم </ data:blog.pageTitle> لا يُظهر عنوان المدونة فقط . بل كما قلت سابقا يُظهر عنوان الصفحة . فعندما تدخل إلى تدوينة ما . ستجد في شريط المتصفح عنوان المدونة و عنوان التدوينة أيضا بهذه الطريقة :
عنوان المدونة : عنوان التدوينة .
لا يمكننا مشاهدة التدوينات الان في المدونة التجريبية لأننا لم نضع بعد أداة " رسائل المدونة الإلكترونية " . و إن ذهبت إلى واجهة عناصر الصفحة في لوحة التحكم فستجد أنها فارغة .
<b:skin><![CDATA[ ]]></b:skin>
لقد وضعت وسم الإغلاق <b:skin/> بعد سطرين من وسم الفتح <b:skin> مع وجود العنصر CDATA ، بين هذين الوسمين نكتب خصائص الـCSS الخاصة بقالب المدونة .
هذا ما يفترض أن يكون . لكن للأسف الشديد الخصائص التي نكتبها بين هذين الوسمين لا تنطبق على واجهة العناصر .
تخيل أننا وضعنا أداة ' رأس الصفحة ' بعرض 500px ، سيظهر في الصفحة الرئيسية للمدونة بـ 500px لكن في واجهة عناصر الصفحة ستظهر بشكل اخر ، ستظهر ممتدة على طول الصفحة كما لو أننا لم نضع خاصية العرض 500px . للأسف .
الحل
الحل بسيط للغاية ، و هو التخلي عن عنصر b:skin و كتابة الخصائص بين الوسمين <style> و <style/> . هذا يجعل الخصائص تنطبق على واجهة عناصر الصفحة أيضا ، لكن هناك بعض الخصائص التي تأثر على جمالية واجهة عناصر الصفحة .
ما العمل ؟
أولا سنقوم بتصميم كامل المدونة مع كتابة خصائص الـCSS داخل العنصر <style> .
هذا ما يفترض أن يكون . لكن للأسف الشديد الخصائص التي نكتبها بين هذين الوسمين لا تنطبق على واجهة العناصر .
تخيل أننا وضعنا أداة ' رأس الصفحة ' بعرض 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="section1">
...
</div>
...
</div>
يظهر المقطع في المتصفح على شكل صندوق div بسيط معرف بـclass ذا قيمة section و id يأخذ القيمة التي تدخلها في التصميم .
لهذا إن أردت تخصيص المقطع بتحديد عرض مناسب له أو خلفية ما فيكفي كتابة الـCSS داخل عنصر <style>
<style type="text/css">
div.section#section1 {
الخصائص هنــا
div.section#section1 {
الخصائص هنــا
}
</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>
<b:widget id="HTML1" locked="false" title="Javascript/HTML" type="HTML" />
</b:section>
هناك سمتين جديدين هنا : locked و type .
السمة locked
تأخذ السمة locked قيمتين فقط true و false :
السمة locked
تأخذ السمة locked قيمتين فقط true و false :
- إذا كانت قيمة true فإن الأداة ستصبح ثابثة في القالب و لا يمكن أن تزاح كالأدوات التي نضيفها .
- إذا كانت القيمة false فإن الأداة تعود إلى طبيعتها و تصبح قابلة للإزاحة كما كانت .
بالطبع هناك بعض الأدوات يجب أن تكون مثبثة في القالب كأداتي ' رأس الصفحة ' و ' رسائل المدونة الإلكترونية ' لذلك لا نتس تغيير قيمة locked إلى true بعد إضافتهما .
السمة type
تأخذ قيم كثيرة من الغباء حفضها كاملة .
و هذه القيمة التي تأخذها سمة type تحدد نوع الأداة .
فمثلا القيمة HTML تعني أن الأداة هي Javascript/HTML
القيمة Header تخص أداة ' رأس الصفحة '
القيمة LinkList تخص أداة ' قائمة الروابط '
....
....
.... القائمة طويلة سأدعك تكتشفها بنفسك
....
أما القيمة التي تخص أداة ' رسائل المدونة الإلكترونية ' فهي Blog و لا تنساها.
ستلاحظ أنه ليس هناك أداة ' رسائل المدونة الإلكترونية ' في القائمة التي تقدمها بلوجر لذلك يجب أن تدخلها يدويا .
فداخل عنصر المقطع الذي ترى أنه مناسب للأداة في تصميمك أضف العنصر التالي .
السمة type
تأخذ قيم كثيرة من الغباء حفضها كاملة .
و هذه القيمة التي تأخذها سمة type تحدد نوع الأداة .
فمثلا القيمة HTML تعني أن الأداة هي Javascript/HTML
القيمة Header تخص أداة ' رأس الصفحة '
القيمة LinkList تخص أداة ' قائمة الروابط '
....
....
.... القائمة طويلة سأدعك تكتشفها بنفسك
....
أما القيمة التي تخص أداة ' رسائل المدونة الإلكترونية ' فهي Blog و لا تنساها
.ستلاحظ أنه ليس هناك أداة ' رسائل المدونة الإلكترونية ' في القائمة التي تقدمها بلوجر لذلك يجب أن تدخلها يدويا .
فداخل عنصر المقطع الذي ترى أنه مناسب للأداة في تصميمك أضف العنصر التالي .
<b:section id="section1">
<b:widget id="Blog0" locked="true" type="Blog" />
</b:section>
<b:widget id="Blog0" locked="true" type="Blog" />
</b:section>
ملاحظة صغيرة حول السمة ID في عنصر <b:widget> : إنها تأخذ دائما قيمة السمة type متبوعة برقم ، بهذه الطريقة يرتب بلوجر أدواته . لذلك لا تحاول تغييرها ، في حال قتلك الفظول و غيرتها فإن نموذجك لن يتم قبوله
شيء اخر : يجب الإحتفاظ بقيم السمة Type كما هي تماما ، فالأحرف الكبيرة و الأحرف الصغيرة ليستا نفس الشيء ، لاحظ أن القيمة Blog تكتب بحرف B كبير و الحروف الأخرى log صغيرة ، و نفس الشيء بالنسبة للقيم الأخرى .
التصاميم الإفتراضية للأدوات
فكما يظهر المقطع في المتصفح على شكل صندوق <div> تظهر الأدوات بتصماميم إفتراضية خاصة بها و هي أكثر تعقيدا و تختلف من أداة إلى أخرى . و هي تحتاج إلى شرح كثير .
لن أقوم بشرح التصاميم الإفتراضية لجميع الأدوات ، بل سأكتفي بثلاث أدوات أرى أنها الأكثر أهمية للمدونة ، و ليس فقط تصميمها الإفتراضي الذي يظهر في المتصفح بل حتى تصميمها الداخلي في بلوجر، و أقصد الضغط على الزر الصغير
شيء اخر : يجب الإحتفاظ بقيم السمة Type كما هي تماما ، فالأحرف الكبيرة و الأحرف الصغيرة ليستا نفس الشيء ، لاحظ أن القيمة Blog تكتب بحرف B كبير و الحروف الأخرى log صغيرة ، و نفس الشيء بالنسبة للقيم الأخرى .
التصاميم الإفتراضية للأدوات
فكما يظهر المقطع في المتصفح على شكل صندوق <div> تظهر الأدوات بتصماميم إفتراضية خاصة بها و هي أكثر تعقيدا و تختلف من أداة إلى أخرى . و هي تحتاج إلى شرح كثير .
لن أقوم بشرح التصاميم الإفتراضية لجميع الأدوات ، بل سأكتفي بثلاث أدوات أرى أنها الأكثر أهمية للمدونة ، و ليس فقط تصميمها الإفتراضي الذي يظهر في المتصفح بل حتى تصميمها الداخلي في بلوجر، و أقصد الضغط على الزر الصغير
و الغوص في عناصر جديدة سنتعرف عليها في الفصول القادمة .
و الأدوات الأربع التي سأطرق إليها هي :
و الأدوات الأربع التي سأطرق إليها هي :
- أداة ' رسائل المدونة الإلكترونية ' بكامل تفاصيلها بتخصيص فصل كامل لها إن شاء الله .
- أداة ' قائمة الروابط ' التي سنجعل منها قائمة أفقية بإعتماد خصائص CSS .
- أداة ' ترقيم الصفحات ' رغم أنها لا توجد في بلوجر و يتم إخالها بكود Javascript إلا أنني أرى أنها أهم أداة تصفح .
إلى الفصل القادم
0 التعليقات:
إرسال تعليق