أساسيات تصميم قوالب بلوجر الجزء الثاني

بسم الله توكلنا اللهم لا علم لنا الا ما علمتنا

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

شرحنا في الدرس السابق أساسيات التصميم لقوالب بلوجر عن القطعات section وعن العنصري Widget وبالاخص العنصري تعلمنا المبادء الاساسية في هذا الدرس اخي الكريم سنتعمق في شرح هذا العنصر الفعال وسنتعرف كيف يبنى قوالب بلوجر باستخدام العنصري

الاساس في العنصري يكون وسمها على هذا الشكل <b:widget/> سنتخد وصف مفصل عن كيفيت السيطرة بالتفصيل على العنصري وما يظهر داخل القطعات ويمكنك ايضا ان تعتبر اساسيات العنصري كإستدعائات وظيفية function invocation

<b:widget [attributes...] /

الإستدعائات الوظيفية

إختر المظهر->html ->ثم يمكنك الضغط على ctrl+f وكتابة widget او الضغط على jump to widet كما في الصورة



القطعات في المدونة

انشاء قطعات لبلوجر

القطعات تحتاج لوسم بداية ووسم نهاية مثل html
<b:widget [attributes...] >
</b:widget>
مثلا نريد كتابة قطعة نقوم بالامر التالي :
<b:widget id='HTML1' type='HTML'>
</b:widget>
ملحوظة صغيرة : بالنسبة للid الخاصة بالعنصري يفضل وضع type شبيه بid فقط يكون الاختلاف في الترقيم مثلا يكون html 1 ثم 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> 

مضمن او غير مضمن

لتحديد محتوى العناصري نضع وسم باسم ” includable “ هذا الوسم يتم وضع فيه جميع الخصائص التابعة للعناصري الغير المضمنة به ، هناك نوعين به ” includable “ و ” include
العنصر includable = يكون متطابق مع اسم الدالة وعند استدعائه يقوم بعمل عدم التضمين تلقائيا
العنصرinclude = يكون متطابق مع تعريف الوظيفية function المتناسقة مع body



غير مضمن

<b:includable id='uniqueId' var='dataForWidget'>
    [هنا يمكننا وضع  اي  كود  ]
</b:includable> 

عناصر الغير المضمن

عنصر id ضروري = يكون متنوع مكون من حروف او ارقام
عنصر var اختياري = يدب على عنصر مكون من احرف او ارقام ، ويشير الى بينات ضمن هذا القسم او العنصر وبهذه الطريقة نمرر البينات نحو القطعات وكذلك نفس الامر للوظيفية function

المضمن

التضمين يستخدم ان كنت تمتلك قطعات section من الكود ـ تريد ان تعيد نفس الكود في عدة اماكن بدلا من اعادة الكود مرارا وتكرارا نختصره بعنصر واحد لتسهيل عملية التكويد مثال :
<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> 
ستلاحظ ان كود المظمن مكون من التالي
<b:include name=’idOfTheIncludable’  data=’dataForIncludable’ />
عنصرname ضروري = يدل على معرف مكون من احرف وارقام (string) ،يستوجب ان يكون لهم نفس التعريفة على نفس الاداة في العناصري
عنصر data اختياري = هو عبارة عن تعبير او جزء من البينات يتم تمريره الى التضمين في القسم الخاص بالقطعات
كل اداة يجب ان تحتوي على ”id“ يساوي ”main“ مضمنة داخل القطعات ، المحتوى الرئيسي يتم تصمينه بالكامل في القطعات وفي الواقع هذا التضمين الخاص بالقطعات وان كنت ملزم تستطيع ان تقوم بتضمين اكثر من قطعات داخل المحتوى الرئيسي او خارجه ... حتى وان كان لديك تضمينات بمعرف id مختلفة على القطعات فانك مضطر الى تعريفها عبر المعرف id داخل التضمين ”include“
ملحوظة ان كنت معتاد عل لغاتالبرمجة ولك خلفية عنها فمسطلح main قد تكون متعودعليه مثل لغات برمجية كلغة c





القطعات

مثال بالكود:
<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>
الى هنا اخوتي الكرام ينتهي الجزء الثاني من فهم اساسيات تكويد بلوجر الى الدرس القادم إن شاء الله

الدرس الثالث من تعلم أساسيات برمجة قوالب بلوجر

Post a Comment

0 Comments