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

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

الشكل المبسط للـ <b:widget/> هو كالتالي

<b:widget [attributes...] />

يُمكنك أن تعتبر الويدجت عبارة عن نداء للدالة (function call) أو استدعاء للفانكشن لتقوم بعملها. ومحتوي الدالة نفسها موجود داخل بلوجر.

إنشاء ويدجت مخصص (custom widget)

لإنشاء ويدجت مخصص لابد أن نقوم ببعض التعديلات علي كود الـ widget. في البداية نبدأ بكود فتح وإغلاق الويدجت كما ترى هنا.

<b:widget [attributes...] >
  </b:widget>

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

<b:widget id='HTML1' type='HTML'>
  </b:widget>

من الأفضل اختيار الـ widget id عن طريق كتابة نوع الويدجت ورقم يبدأ من ١ ثم ٢ ثم ٣ وهكذا. مثال: إن كنت تريد عمل ويدجت للتواصل contact و ويدجت للإشارات labels من الأفضل اختيارهم كالتالي HTML1 و HTML2 وهكذا. ويمكنك النظر للكود التالي لكي تتضح الفكرة أكثر.

<b:widget id='HTML1' type='HTML' locked='yes' title='Contact Us'>[Widget code here...]</b:widget>
  <b:widget id='HTML2' type='HTML' locked='yes' title='Labels'>[Widget code here...]</b:widget>

استخدام Include and Includable في منصة بلوجر

الويدجت يحتوى فقط على includable فقط. أما الـ includable يحتوى على جزئين:

• include : وهي تساوي استدعاء الفانشكن (function call) في لغات البرمجة. أى أنها تستدعى includable محدد ليتم تنفيذ ما فيه.
• includable : هي عبارة عن تعريف الفانكشن (function definition) وهي الأشياء التي تحدث عند استدعاء الدالة.

ستجد الصورة التالية توضح طريقة استخدام include و includable بشكل أوضح.

شرح includable في منصة بلوجر

طريقة كتابة كود includable

<b:includable id='uniqueId' var='dataForWidget'>
      [Here we can place any piece of code]
  </b:includable>

ما هي الـ Includable Attributes

• id (ضروري) : معرف مميز ولا يمكن تكراره. يتكون من حروف إنجليزية وأرقام إنجليزية.
• var (اختياري) : اسم متغير (variable). يتكون من حروف وأرقام. يُستخدم كمرجع للبيانات. نستخدمه لتمرير البيانات داخل الويدجت. سيتضح الأمر بعد قليل، لا تقلق.

شرح Include

 نستخدم كود include عندما نريد أن تستخدم نفس أسطر الكود أكثر من مرة. بدلاً من تكرار كتابة أسطر الكود في كل مرة، نكتب الأسطر داخل includable ثم نستدعيه بكود include كما ترى في الكود التالي.

<b:includable id='main'>
     <b:loop var='i' values='posts'>
        <b:include name='post' data='i'/>
     </b:loop>
  </b:includable>
  
  <b:includable id='post' var='p'>
     Title: <data:p.title/>
  </b:includable>

طريقة كتابة كود انكلود (include syntax)

<b:include name=’idOfTheIncludable’  data=’dataForIncludable’ />

شرح الـ Include Attributes

• name (ضروري) : هو معرف يتكون من حروف وأرقام. لابد أن يساوي معرف أحد الـ b:includable في نفس الويدجت.
• data (اختياري) : هو تعبير أو بيانات معينة. هذه الداتا هي قيمة الـ var في الـ includable

الإنكلودابول الإفتراضي (Default Includable)

كل الويدجت المخصصة لابد أن تحتوي على انكلودابول به id يساوي main. هذا الإنكلودابول يحتوي على كل محتوى الويدجت بالكامل. هذا هو الإنكلودابول الوحيد الذي تحتاج إلى استخدامه.

ولكن إن أردت، يمكنك اضافة انكلودابول داخل الإنكلودابول الرئيسي (id=main) أو خارجه. ثم استدعاء هذه الإنكلودابولز داخل الإنكلودابول الرئيسي بإستخدام كود الـ include كما شرحنا منذ قليل.

حتى إن كان لديك العديد من الـ includables داخل الـ widget بجانب الـ main includable فلن يتم عرض إلا الـ main includable. ولذلك تحتاج إلى استخدام الـ include لكي تعرض الـ includables الأخري التي تريدها بالإشارة إلى الـ includable id.

إن كنت تعرف لغة سي (C Language) فأنت تعرف أن هناك فانكشن تسمي main() يتم استدعائها عند بداية تشغيل البرنامج. اعتبر includable الذي به id=main كأنه الفانكشن الرئيسية في لغة البرمجة سي. أي هو الجزء الذي يتم تشغيله عند البدء في تنفيذ كود الـ widget.

مثال كامل على استخدام widget في بلوجر

<b:widget id='HTML1' type='HTML' locked='yes' title='Labels'>
      <b:includable id='main'>
          <h3>Labels</h3>
          <b:include name='labels'></b:include>
      </b:includable>
      <b:includable id='labels'>
          <ul>
              <li><a href='#' title='PHP'>PHP</a></li>
              <li><a href='#' title='Java'>Java</a></li>
              <li><a href='#' title='CPP'>CPP</a></li>
          </ul>
      </b:includable>
  </b:widget>

انتهينا من شرح الـ widget والـ includable والـ include في ثيم بلوجر.

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

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