إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

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

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

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

الفهرس
  1. عناصر تصميم المدونة .
  2. المقاطع .
  3. الأدوات .

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

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

أثناء تصميمنا لقالب المدونة فإننا سنقوم بتصميم ثلاث واجهات في نفس الوقت ، الصفحة الرئيسية للمدونة ، صفحة التدوينة و واجهة عناصر الصفحة ( الواجهة التي تظهر في .. لوحة التحكم ← تصميم ← عناصر الصفحة ) .
حيث يتم تصميم الواجهات في مرة واحدة .
كيف ؟
في الصفحة الرئيسية يتعامل بلوجر مع وسوم الـ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>
</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 بل سنكتفي بكتابة الخاصيتان float و width داخل السمة و سنكتب باقي الخصائص داخل العنصر <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 بسيط معرف بـclass ذا قيمة section و id يأخذ القيمة التي تدخلها في التصميم .
لهذا إن أردت تخصيص المقطع بتحديد عرض مناسب له أو خلفية ما فيكفي كتابة الـCSS داخل عنصر <b:skin>

<b:skin><![CDATA[
div.section#section1 {
الخصائص  هنــا
}
]]></b:skin>

الأدوات

تأتي قوالب بلوجر عادة فارغة من الأدوات ، إلا بعض الأدوات التي يرى مصمم القالب تثبيتها في القالب ، و من أروع الأدوات التتي تتوفر عليها بلوجر هو أداة 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="Blog1" locked="true" type="Blog" />
</b:section>

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


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

تعليقات بلوجر

  1. مدونة في غاية الروعة!

    موفق :)

    ردحذف
  2. دااائماً، مبدع أخى محمد باركك الله وجزاك الله خيراً ، فى انتظار الدرس التالى :)

    ردحذف
  3. ما شاء الله شرح مفصل ورائع

    .. أتمنى لك المزيد من التفوق

    ردحذف
  4. شكرا لك أخي محمد على شرحك الرائع
    مدونتي www.2lkasir.com

    ردحذف
    الردود
    1. شكرا لك أخ ali alsayd ... مدونتك جميلة

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

    ردحذف
    الردود
    1. شكرا لك أخ رواد السيد على تعليقك الجميل - جزاك الله خيرا -

      حذف
  6. مشكور أخي ..
    طرح مفيد
    الله يجزيك الخير ويرضى عنك

    تحيتي

    ردحذف
  7. شكرا جزيلا معلومات في قمة الروعة

    ردحذف
  8. أريد تعلم تصميم قالب بلوجر من الصفر

    ردحذف
  9. احاول تصميم قالب لمدونة بلوجر ولكن ليس عندي خبرة بلغة HTML
    فأرجو مساعدتي في ضبط مكان الصورة التي تظهر مكان العنوان فهي موجودة على اليمين وأنا أريدها في الوسط .كيف ذلك؟؟؟
    هذا رابط المدونة
    http://mathgroub2012.blogspot.com/

    ردحذف
  10. السلام عليكم مشكور اخي عاشق لكن وين الفصل القادم !

    ردحذف
  11. مشكور اخي ف انتظار المزيد

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

    ردحذف
  13. ااخى دروسك جميله جدا والاجمل الطرح الجميل والسهل
    مشكور اخي ف انتظار المزيد

    ردحذف
  14. والله مبدع أشكرك جزيل الشكر

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

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة