دورة تصميم قالب بلوجر من الصفر 2019 - الجزء الأول

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

هل هذا جيد بالنسبة لك؟

يعتمد السؤال أعلاه بشكل أساسي على مهارات تطوير الويب لديك. يجب أن يكون لديك بعض مهارات تصميم الويب الأساسية. لست بحاجة إلى أن تكون محترفًا في تصميم مواقع الويب ، ولكن بعض المعرفة الأساسية بـ CSS و HTML و JavaScript والوعي بلغة XML ستفي بالغرض. يمكنك معرفة أساسيات هذه التقنيات في w3schools.com.

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

عندما نقوم بأرسل قالب XHTML إلى المدونه ، يتم تخزينه في قاعدة بيانات المدونه. عندما يتم طلب المدونة عبر المتصفح ، يوزع محول بلوجر (Blogger Parser) الرمز ويعيد إخراج HTML من كود XML الذي تم تحليله والذي سيتم عرضه في المتصفح.
دورة تصميم قالب بلوجر من الصفر 2019 - الجزء الأول

النسق الأساسي




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

يتم تكويد قالب بلوجر بالكامل بـ XHTML و عناصر بلوجر (Blogger Elements). في الكود أعلاه ، حددنا مجموعة من xmlns Namespace) XML) التي تم تعريفها بواسطة Google للاستخدام مع بلوجر. Namespace مثل xmlns:b, xmlns:data, xmlns:expr تتيح لنا تصميم قالب بلوجر وكذلك للحصول على البيانات من قاعدة بيانات Blogger.


  • xmlns:b - يتيح لنا الوصول إلى عناصر بلوجر
  • xmlns:data - هو مصدر بيانات بلوجر
  • xmlns:expr - يستخدم لحساب التعبير عن السمات (سوف نرى هذا قريباً).


ملاحظة: يمكنك تغيير مجالات الأسماء أعلاه من b إلى blog أو data إلى d في أي وقت. لكن من الأفضل التمسك بما هو افتراضي..

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

قبل أن نتحرك ، قم بتخطيط موجز لشكل القالب الذي تريد تصميمه. ارسم تخطيطًا لمدونتك . خذ قطعة من الورق ، وابدأ في رسم التخطيط أو يمكنك استخدام تطبيقات مثل lucidchart و wire-frame للتصميم الذي تريد أن تكون عليه مدونتك. وتحديد عناصر مثل،
  • أين يجب أن تأتي القائمة وكيف ينبغي أن تبدو.
  • كيف ستظهر المشاركات ، هل القالب به عمودين أو 3 أعمدة.
  • أين يجب أن تظهر الأضافات وما إلى ذلك.

الأقسام - Sections

تم تصميم تخطيط قالب بلوجر بالأقسام Sections. الأقسام هي تخطيط صفحة الويب (مثل الهيدر والفوتر والسايد بار إلخ). هي تقريباً نفس فكرة الأقسام في HTML5 .

دورة تصميم قالب بلوجر من الصفر 2019 - الجزء الأول

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

بنية الأقسام (Section Syntax)

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

 كل وسم  للأقسام يتم كتابته بالشكل أدناه  ، والذي يشبه عناصر HTML مع السمات.




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

كل سمات لها معناها الخاص ، يتم تحليلها بواسطة بلوجر لعرض العناصر النهائية.

سمات الأقسام (Section Attributes)


  • id(مهم) – اسم فريد ، به حروف وأرقام فقط.
  • class (اختياري) - أسماء الفئات الشائعة مثل "شريط التنقل" و "العنوان" و "الرئيسية" و "الشريط الجانبي" و "تذييل الصفحة". إذا قمت بتبديل القوالب لاحقًا ، فإن هذه الأسماء تساعد بلوجر على تحديد أفضل السبل لنقل المحتوى الخاص بك. ومع ذلك ، يمكنك استخدام أسماء مختلفة ، إذا أردت.
  • maxwidgets (اختياري) - الحد الأقصى لعدد الأدوات التي يمكن إضافتها في هذا القسم. إذا لم تحدد الحد ، فلن يكون هناك حد.
  • showaddelement (اختياري) - يمكن أن يكون "Yes" أو "No" ، مع "Yes" كإعداد افتراضي. هذه يجعل القسم قابل لأضافة أداة أخري وتظهر"إضافة أداة" . ألقِ نظرة على الصورة ادناه لتوضيح أكثر.
دورة تصميم قالب بلوجر من الصفر 2019 - الجزء الأول

 قسم الأدوات. لا يمكن أن يحتوي على أقسام أخرى أو أي كود آخر. إذا كانت هناك حاجة لإضافة رمز حول أو داخل قسم ، يجب تقسيم القسم إلى قسمين مختلفين.

دورة تصميم قالب بلوجر من الصفر 2019 - الجزء الأول

مثال علي الأكواد




<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>
ملاحظة: بشكل افتراضي ، يجب أن يكون هناك على الأقل أثنين من سمة b:section ، وإلا فإن ستعتبره بلوجر خطأً.

وسوم الأدوات - Widget Tags

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

بنية الأدوات في بلوجر 




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


  •  id (مطلوب) -  يحتوي على أحرف وأرقام فقط ، ويجب أن يكون كل معرفة لعنصر الأداة في القالب فريدًا. لا يمكن تغيير معرف عنصر الأداة بدون حذف عنصر الأداة وإنشاء واحدة جديدة.
  • type (مطلوب) - يشير إلى نوع عنصر الأداة ، ويجب أن يكون أحد أنواع عناصر الدوات الصحيحة المدرجة أدناه.


  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar
  • looked (اختياري) - تكون  "yes" أو "no" ، مع "no"بشكل  إفتراضي. الأدوات المقفله بأستخدام (looked) لا يمكن تحريكها او حذفها من علامة تبويب عناصر الصفحة.
دورة تصميم قالب بلوجر من الصفر 2019 - الجزء الأول

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

مثال




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

تم كتابة هذا الشرح بناء علي وثائق بلوجر الرسمية.

تابعونا في الجزء الثاني