بسم الله الرحمــ آ ـــن الرحيم
إن تصميم قوالب بلوجر من الصفر ليس بالمسألة الصعبة أو المستحيلة كما يظهر للوهلة الأولى ، شاهدت العديد من الفيديوهات والسورسات الخاصة بالقوالب ومنها دورات عربية وأجنبية أغلبها تطرقت لقواعد بلوجر لكنها لم تشرح هذه الأخيرة دور تلك الأوسمة التي تتميز بها لغة xhtml وهي اللغة المعتمدة لبلوجر ....
لكن قبل البدأ في الشرح عليك أخي الكريم أن تكون لك خبرة في تصميم المواقع وليس معرفة بسمات لكلك من لغة html وcss و js .... يمكنك ان تبدا السلسلة معنا اخي الكريم لكني انصحك بخلفية قوية عن اللغات المذكورة سلفا
سلسلة تعلم الجافا سكربت قريبا
المبدأ الذي تعمل به بلوجر
عندما تقوم برفع قالب يبلوجر على مدونتك فانك تقوم بتخزينه تلقائيا في قواعد بينات بلوجر حتى عندما تقوم باستبدال القالب بواحد اخر فان السيشن او القطعات تبقى مسجلة وتحتاج اما ازالتها يدويا او بالارجاع للقالب الافتراضي ، عرفنا سابقا ان بلوجر تعمل بلغة xhtml والقالب ينتهي بامتداد xml و 90% من تكويد المدونة عبارة عن html +css +js لا يمكنك اظهار ملف xml على المتصفح من خلال تواجده على حاسوبك فانك تحتاج الى رفعه على بلوجر لكي يتجاوب مع خدمات api لسرفرالبلوجر
الكود الاساسي او الهيكل الاساسي تبع بلوجر يكون بهذا الشكل
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>
ستلاحظ في الكود ان بلوجر اعتمدت على اوسمت html واوسمت xhtml بحيث تتعرف عليها google من خلال روابط api التالية :
xmlns:b, xmlns:data, xmlns:expr
من دون هذه الاوسم الخاصة ب api لا يمكن ل google ان يتعرف على سكرت الخاص بك ككود لبلوجر
xmlns:b هذا الوسم يسمح بالدخول الى عناصر بلوجر
xmlns:data هذا خاص بالبينات القادمة للمدونة
xmlns:expr يستخدم للتعبير عن العناصر سنرى امثلة قريبة عنه
ملحوظة صغيلة بإمكانك اخي الكريم تغيير كل من الاوسمة التالية b =blog , data=d وستبقى النتيجة كما هي
قبل الانتقال الى المرحلة التالية :!!!
اليك اخي النصائح قد تسهل عليك العمل قبل تكويد اي بلوجر عليك ان تضع مخطط علىى نوت باد او ورقة او رسمه ببرنامج الفوتوشوب تاكد من ان تصميمك ملائم تاكد ان موقعك المصمم يلبي الرغبات التي صمم لها كمواقع الافلام او مواقع الاخبارية ومواقع التعليم فكلها تخضع لتصميم افتراضية انصحك في البداية اخي الكريم باستخدام هذه النماذج السهلة في تكويد قوالب بلوجر
القطعات section
تعتمد بلوجر في ترتيب محتواها على القطعات او السيشن فكل قطعات تمثل اما (header,footer ,sidebar.....) الى اخره ولا يمكن ان يتواجد كود مدونة بدون قطعات section واحدة على الأقل والا فلن يقبل منك رفع السورس تبع مدونتك ، السيشن لها اوسمها الخاصة ف attributes لديها مختلف عن لغة html فهو يتبع للبلوجر ...
<b:section id='' class='' maxwidgets='' showaddelement=''>
</b:section>
لكل عنصر يعني شيء مختلف وهدف مختلف للقطعات لكن عنصر id هو اساسي ولا يمكن الاستغناء عنه في القطعات
العنصر id ضروري : يتكون من كلمة عشوائية مكونة من حروف او ارقام
العنصر class اختياري: يمكن ان يكون نافبار، الفوتر ،الهيدر الى اخره هذه الاسماء الخاصة تساعد بلوجر على التكويد بشكل سريع وافضل ويكون متناصق في المظهر يمكنك استخدام اسامي مختلفة لكن يفضل استخدام اسامي معروفة لكي يسهل تكويد مدونتك
العنصر maxwidgets اختياري : هذا الوسم يتيح لك تحديد عدد الويد غيت widgets التي يمكنك اضافتها في القطعات section هو اختياري فقط
العنصر showaddelement اختياري هو الاخر : له خيارين ”yes“او ”no“ هو تلقائيا يكون ”yes“ وعند تغيير الخيار الى ”no“ ستمنع القطعات من اظاقة اي gadget عنصري سيتم شرحها في المثال التالي :
وهناك ايضا عنصر growth هو اختياري ايضا : ويختص في وضع القطعات بشكل افقى او عمودي 'horizontal' or 'vertical ويستخدم عندما تكون هناك الكثير من القطعات بشكل متزاحم ويفضل استخدامه لتوجيع العناصر
تذكير : ذكرنا سابقا انه على الأقل يستوجب ان تكن قطعة واحدة على الأقل لكي يقبل منك كود البلوجر ويتم رفعه 
:)
التكويد الصحيح للقطعات يكون بهذا الشكل :
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Section contents -->
</b:section>
الwidget او العناصري
العنصري هو المسؤول عن حمل المعلومات على عكس القطعات فهي مسؤولة عن الترتيب وليس لها اي دخل في اي تكويد فالعنصري يكون مسؤول عن العديد من الامور في المدونة ونذكر منها :
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
التكويد الخاص به يكون على هذا الشكل
<b:widget id='' locked='' mobile='' title='' pageType='' type='' />
العنصر id هو عنصر اساسي : يحمل قيمة حرفية او عددية تكون مختلفة ، لا يمكن تغيير عنصر id بدون حذف widget وكتابة واحد جديد
عنصر type هو عنصر اساسي : يبين لنا ما هي العنصري مثلا يكون navbar او videobar >>> الى اخره
عنصر locked هوعنصر اختباري : يتحكم هذا العنصر في تثبيت الgadget او عدم تثبيتها الكادجيت المثبتة لا يمكن حدفها اما الكادجيت الغير المثبتة فبامكانك حدفها لبد وانك اخي الكريم قد شهدت بعض العنصري لا يمكن حدفها كالنافبار مثلا
العنصر title اختياري: يعنون العنصري لتسهيل اجاده وفي حالة عدم تواجده فان العنصري يتخد عنوان افتراضي على هذا الشكل List1 ويبدا في زيادة الاسماء تدريحيا اما فرديا او مثنى
العنصر pageType اختياري : يمكنه ان يكون على شكل all اوmain او archie افتراضيا ، باستطاعته اظهار صفحة من تصميمك الخاصة ..
العنصر mobile هو اختياري : لكن يستحن تفعيله لان اغلب مستخدمي النت هو اصحاب الهواتف النقالة ، يحمل تلقائيا default ويمكنك الاختيار بين yes or no هذا الوسم سيجع جميع العناصري منها الادسنس والبروفايل وغيرها تخظع لقياسات الهواتف الكفية (باستطاعتك استخدام البوتستراب بدلا منه او مكتبة البيورpure.css )
مثال بالكود :
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section>
إنتهى الجزء الاول بحمد الله وشكره
هذه مدونتي على بلوجرhttp://www.guercif.cf/
حسابي على github https://github.com/sadik-fattah
0 تعليقات