موقع أبانوب حنا للبرمجيات: شرح تصميم قالب بلوجر

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

هل هذا الشرح لك؟

لابد أن تعرف أساسيات لغة HTML ولغة CSS ولغة Javascript ولغة XML لكي تفهم شرح تصميم قوالب بلوجر بسهولة. أنت لا تحتاج أن تكون متمكن من هذه اللغات لكي تفهم كيف تعمل قوالب بلوجر. ولكنك تحتاج أن تكون متمكن منهم لكي تستطيع أن تصمم وتكتب كود ثيم مدونة بلوجر احترافية.

كيف يعمل بلوجر ؟

يرسل المتصفح طلب للمدونة (http request) فيقوم بلوجر بترجمة كود XHTML الخاص بـ ثيم بلوجر والتواصل مع قاعدة البيانات عند الحاجة، ثم يرسل للمتصفح كود HTML لعرضه للمستخدم الذي طلب الصفحة.

الهيكل الأساسي لثيم بلوجر (The Basic Layout)

<?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>

ثيم بلوجر (Blogger Theme) يُسمي أيضاً قالب بلوجر (Blogger Template). ثيم بلوجر يتكون من XHTML وعناصر بلوجر (Blogger Elements).

في الكود بالأعلى هناك بعض التعريفات الخاصة بـ xmlns وهى اختصار لـ XML NameSpace. هذه التعريفات خاصة بمنصة بلوجر المقدمة من جوجل.

ما معنى كل تعريف من تعريفات xmlns ؟

xmlns:b تتيح لنا استخدام عناصر بلوجر (Blogger Elements)
xmlns:data تتيح لنا التواصل مع قاعدة البيانات الخاصة بمدونة بلوجر
xmlns:expr يتم عن طريقها حساب الـ attributes (سأشرحها بشكل أكثر تفصيلاً)

لاحظ: يمكنك استبدال xmlns:b بـ xmlns:blog واستبدال xmlns:data بـ xmlns:d إن أردت. ولكن أنصحك باستخدام الإعدادات الافتراضية أفضل.

قبل أن نبدأ في كتابة كود ثيم بلوجر

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

الـ Section في بلوجر

تصميم ثيم بلوجر يتكون من سكشن (sections). كل جزء من أو قسم من صفحة الموقع عبارة عن سكشن. استخدام السكشن (section) في قوالب بلوجر يشبه استخدامه في لغة HTML5.

تصميم ومعنى سكشن في تصميم قوالب وثيمز بلوجر

في الصورة السابقة تجد تصميمات للهيكل العام لصفحات الويب. كل جزء من هذه الأجزاء الملونة في كل صفحة يمثل سكشن من تصميم الصفحة.

كتابة كود السكشن في بلوجر

هذا هو كود كتابة سكشن في بلوجر

<b:section id='' class='' maxwidgets='' showaddelement=''> 
  </b:section>

يمكن كتابة كود HTML حول السكشن ولكن داخل السكشن لا يمكن كتابة كود HTML نهائياً. لكي تحدد محتوى السكشن نستخدم عنصر ويدجت (widget) من عناصر بلوجر. سنتكلم عن ويدجت بعد قليل.

هذه الـ attributes الموجودة في عنصر سكشن من عناصر بلوجر يتم ترجمتها عن طريق بلوجر. وهذه الـ attributes تعنى:

id (ضروري) : اسم مميز ولا يمكن تكرار استخدامه داخل نفس القالب. يمكنك استخدام حروف اللغة الإنجليزية وأرقام اللغة الإنجليزية فقط لكتابته.
class (اختياري) : الأسماء الشائعة للكلاسات هي navbar و header و main و sidebar و footer. استخدام هذه التسميات يسهل على بلوجر تبديل القوالب. ولكن يمكنك استخدام أسماء كلاسات كما تحب.
maxwidgets (اختياري) : يحدد الحد الأقصي لعدد الـ widgets التي يمكن اضافتها داخل هذا السكشن. إن لم تحدد رقم معين، عدد الـ widgets داخل السكشن لن يكون محدود.
showaddelement (اختياري) : يحتوى على yes أو no والقيمة الإفتراضية هي yes. هذا الخيار يحدد إن كان سيظهر زر اضافة المزيد من الـ widgets داخل صفحة التصميم على بلوجر أم لا.

growth (اختياري) : يمكن أن يكون horizontal أو vertical مع العلم أن القيمة الافتراضية هي vertical. هذا يحدد إن كنت الـ widgets داخل السكشن مرتبة جنب بعضها (side-by-side) أم مرتبة تحت بعضها (stacked).

السكشن في بلوجر يمكن أن يحتوي على widgets فقط. لا يمكنه أن يحتوى سكشن آخر أو كود HTML آخر.

مثال عملي على كود سكشن

<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 في بلوجر

تحتوى الـ sections على widgets فقط. الأقسام (السكشن) هي مجرد عناصر لتخطيط شكل المدونة. أما الويدجت يحتوى على المعلومات التي يتم عرضها.

أبسط شكل للويدجت هو عبارة عن سطر واحد يمثل مكان المعلومات التي ستظهر في مدونة بلوجر. هناك بعض الويدجتس الإفتراضية (default widgets) المتاحة في بلوجر. ويمكنك أيضاً إنشاء ويدجت مخصص (custom widget).

المعلومات الخاصة بالويدجت يتم تخزينها في قاعدة بيانات بلوجر. ويتم التعامل مع هذه المعلومات عند عرض الويدجت فقط.

كود كتابة الويدجت widget في منصة بلوجر

<b:widget id='' locked='' mobile='' title='' pageType='' type='' />

id (ضروري) : يحتوي على حروف إنجليزية وأرقام إنجليزية فقط. لابد أن يكون مميز وغير مكرر داخل نفس الثيم. لا يمكن تغيير id الويدجت إلا إن حذفت الويدجت وأنشأت ويدجت جديد.
type (ضروري) : يحدد نوع الـ widget وهو واحد من هذه الأنواع التالية:

BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
NavBar
VideoBar
NewsBar

locked (اختياري) : يمكن أن تكون yes أو no والقيمة الإفتراضية هي no. الويدجت المغلق (locked widget) لا يمكن حذفه من تبويب تخطيط المدونة (Layout). كما ترى في الصورة التالية.

title (اختياري) : عنوان الويدجت. إن لم تحدد عنوان للويدجت سيتم استخدام عنوان افتراضي مثل List1.
pageType (اختياري) : يمكن أن يكون all أو archive أو main أو item مع العلم أن القيمة الإفتراضية هي all. يتم عرض الويدجت في الصفحات التي تحددها في ثيم مدونتك. كل الويدجتس تظهر في تخطيط القالب (Layout) بغض النظر عن الـ pageType المحدد لها.
mobile (اختياري) : يحتوي على yes أو no أو only مع العلم أن القيمة الإفتراضية هي default. هذه القيمة تحدد إن كان هذا الويدجت سيتم عرضة على شاشة الموبايل أم لا. بشكل إفتراضي سيتم عرض Header و Blog و Profile و PageList و AdSense فقط إن كنت اخترت default كقيمة للـ mobile.

مثال على كتابة كود الويدجت (widget) في بلوجر

<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>

طريقة كتابة الكود (syntax) والشرح (documentation) تم أخذه من توثيق بلوجر الرسمي (Official Blogger Documentation).

أكمل شرح تصميم قالب بلوجر – الجزء الثاني من هنا.

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

موقع أبانوب حنا للبرمجيات

الأقسام والموضوعات

شرح تصميم قالب بلوجر