17 يناير 2019

شرح كود اضافات أو أدوات بلوجر

من الأمور التي يتعامل معها مدون يستعمل منصة بلوجر، الأدوات. وهي إضافات يتم تشغيلها لعدة أهداف مثل:


  1. إظهار قائمة من الروابط.
  2. أداة للاتصال بنا.
  3. صندوق المتابعة عبر البريد.

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


شرح كود اضافات بلوجر

أي أداة بلوجر تحتوي على كود بهذا الشكل:



<b:widget id='Text1' locked='false' title='عنوان' type='Text' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>محتوى الأداة</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>





شرح أجزاء عناصر الكود

عند فتح كود قالب بلوجر والبحث عن أداة، ستجد فيها الأجزاء التالية:

1. وسم الفتح

<b:widget id='Text1' locked='false' title='عنوان' type='Text' version='1'>

يبدأ دائما بهذا العنصر <b:widget وهو الرئيسي. ويمكن أن يحتوي على عناصر أخرى مثلا في النموذج أعلاه لدينا:

  • id: كل أداى لديها أي دي خاص به باسم مختلف.
  • locked: القفل، يحتمل خيارين true أي أنه لا يمكن حذف الاضافة من التخطيط. وfalse وهو العكس أي يمكن حذف الأداة.
  • title: عنوان الإضافة.
  • type: نوع الإضافة، في المثال أعلاه الإضافة هي من نوع نصي.
  • version: النسخة والرقم يتم تحديده من مصمم الإضافة.

2. وسم الغلق

</b:widget>
يحدد نهاية الأداة.

3. كود المحتوى

<b:widget-setting name='content'>
هنا يوضع كود محتوى الأداة مثل html.
</b:widget-setting>

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


4. عنوان ومحتوى الأداة


<b:includable id='main'>
</b:includable>

بين هذين الكودين، يتم إظهار عنوان الأداة ثم المحتوى. في الرقم 2 يتم وضع الأكواد فقط، وهنا يتم تحويل الأكواد لإظهار ما تحتوي عليه من معلومات مثل نصوص أو روابط أو صور...

مثلا، لدينا عنوان الأداة:

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>


لدينا شرط هنا، وهذا الشرط يقول: إذا كان العنوان ليس فارغا أظهره.

كود الشرط <b:if cond='data:title != ""'></b:if> للتحكم في العنوان <h2 class='title'><data:title/></h2>


وهذا الكود يظهر محتوى الأداة: data تعني المعطيات ومقابها content أي ما تحتويه الإضافة.

<div class='widget-content'>
<data:content/>
</div>