دورات شروحات قوالب بلوجر دورة تصميم قالب بلوجر من الصفر 2019 ( الجزء الثاني)
تم النشر في
وقت القراءة
4 دقيقه للقراءة
تم شرح العلامة الأساسية <b: widget /> في الجزء الأول دورة تصميم قالب بلوجر من الصفر. في هذا المنشور ، سيكون هناك وصف تفصيلي لكيفية استخدام علامة عناصر الأدوات الدقيق في ما يظهر داخل عنصر الأدوات.
نظرًا لأننا نريد أن نتعلم ونجعل ونصمم قالب بلوجرإحترافي ، فيجب علينا العمل على قالب HTML ، قمت بتصميم قالب متجاوب بإستخدام بوتستراب و يحتوي علىHeader, Navbar, Main, Sidebar, Footer . وما إلى ذلك. لا تتوفر هذه الميزات في قالب HTML الحالي الخاص بنا حيث نعمل.
لا تحتاج إلى تنزيل Bootstrap. إليك قالب Bootstrap فارغ جاهز وهاذا القالب سنعمل عليه في الدروس القادمه.
انتقل إلى لوحة تحكم بلوجر المظهر تحرير HTML وقم بحذف القالب الحالي واضف قالب البوتستراب التالي.
قالب البوتستراب لبلوجر
قواعد إنشاء قسم في بلوجر
- 1. كل قسم له وسم فتح ووسم إغلاق. وسم الفتح
<b:section>ووسم الأغلاق</b:section>قم بإنشاء موضوع وقم بفحص المدونة بأداة inspect element من المتصفح ، سترى فئة "div "class بدلاً من القسم "section". ولكن في محرر HTML في بلوجر ، لا يتم تغيير الأقسام إلى فئة div. - 2. يجب أن يكون لكل قسم معرفة "id" وفئة "class" فريد. تسمية فئة اومعرفة في قسم آخر ممنوع أي انك لن تستطيع تسمية قسمين بنفس الأسم. نظرًا لأن القسم يتم تحويله إلى div ، تبقى الفئة ومعرف القسم في div كسمات. حتى نتمكن من تخصيص تصميم القسم حسب هذه الفئة والمعرف.
- 3. لا يسمح لك أن تداخل قسم.بداخل قسم آخر هذا غير صالح.
- 4. يمكنك إدراج سمات معينة فقط.
- 5. سيكون من الأفضل إنشاء قسم تحت div.
| السمات | القيمة | مطلوب/إختياري | الأشارة إلى |
|---|---|---|---|
| id | اسم فريد. يسمح فقط بالحروف والأرقام. مثال: header, navbar, sidebar, footer إلخ. | مطلوب | تحديد وتخصيص القسم مع id. |
| class | مثل id. | اختياري | تحديد وتخصيص القسم مع class. |
| maxwidgets | أرقام. مثل: 1 ، 2 ، 3 ، 10 إلخ. | اختياري | عدد الأدوات التي نريدان نضعها في هذا القسم. |
| showaddelement | قيم منطقية - "yes" / "no". | اختياري | إذا كانت "yes" ، فسيسمح القسم بإضافة الأدوات ، إذا كانت "no" لن تسمح فإضافة أي أداة. |
| growth | رأسي أو أفقي - "horizontal" / "vertical" | اختياري | إذا كان رأسيًا ، فسيتم ترتيب القسم جنبًا إلى جنب. مكدسة خلاف ذلك. |
قواعد إنشاء الأدوات
- يمكنك استخدام وسم البداية والنهاية كإعلان للأداة. علامة البدء هي
<b:widget>وتكون علامة النهاية</b:widget>. - يجب أن يكون لكل للأداة معرف فريد وسمة type. تسمية فئة اومعرف لقسم آخر ممنوع. نظرًا لأنه يتم تحويل عنصر واجهة المستخدم إلى div ، تظل معرف الأداة م في div كسمات. حتى نتمكن من تخصيص تصميم القطعة من هذا المعرف.
- لا يسمح بتداخل الأدوات بداخل بعضهم البعض.
- يمكنك فقط إدراج السمات المحددة
- يجب أن تضطر إلى إنشاء أداة بداخل قسم أذا ارادت إنشاء أداة جديده.
- غير مسموح لك بإدراج HTML في الأدوات
سمات علامة الأداة
| السمات | القيمة | مطلوب / اختياري | الأشارة إلي |
|---|---|---|---|
| id | اسم فريد. يسمح فقط بالحروف والأرقام. مثال: header, navbar, sidebar, footer etc. | مطلوب | تحديد وتخصيص القسم مع معرف. |
| type | Header, Blog, Profile, PageList, AdSense, Attribution, HTML | مطلوب | تحديد نوع الأداة. |
| locked | yes, no | إختياري | إذا كانت "yes" ، فلا يمكنك حذف هذه الأداة أو نقلها. |
| title | ضع أي اسم. مثال: أدوات ، إعلان ، قوائم إلخ | إختياري | عرض عنوان هذه الأداة. |
| pageType | كل من , archive, main, item, static, all | إختياري | تحديد نوع صفحة الأداة. |
| mobile | yes, إفتراضي no | إختياري | إذا كانت "yes" ، فسيتم عرض الأداة على الجهاز المحمول. |
الاختلافات بين الأقسم و الأدوات في بلوجر
| الأقسام | الأدوات |
|---|---|
| القسم منطقة مستقلة. | تابعة لعناصر الصفحة التي تعتمد على القسم. |
| يمكن لكل قسم ان يوضع بداخله أداة واحدة أو متعددة. | الأداة لا يمكن أن تحوي قسم بداخلها. |
| لا يمكن إضافة القسم بشكل حيوي. | يمكن إضافة أداة من علامة تبويب عناصر الصفحة (إضافة أداة) |
| ليس للقسم أي سمة للتحكم في العرض أو الأخفاء على الأجهزة المحمولة. | تحتوي الأداة على سمة للتحكم في العرض أوالأخفاء على الأجهزة المحمولة. |
| لا يحتوي القسم على سمة title لعرض أو إخفاء أي عنوان. | تحتوي الادوات على سمة title لعرض أو إخفاء اسم العنوان. |
| يسمح في الأقسام بإضافة HTML بداخله مباشرة | الأداة لا تسمح بإضافة HTML بداخلها مباشرة. |
أوجه التشابه بين القسم و الأداة في بلوجر
| القسم | الأداة |
|---|---|
| القسم لا يمكن أن يحتوي علي قسم أخر. | الاداة أيضا لا يمكن أن تحتوي علي اداة أخري. |
| عند فحص القالب بأداة inspect element ستجد انه تم تغير وسم القسب بالوسم div. | الأداة أيضا يتم إستبدالها بالوسم div. |
| كل قسم لديه معرف فريد. | كل اداة لديها معرف فريد |
| ليس للقسم أي سمة للتحكم في العرض أو الاخفاء على الأجهزة المحمولة. | يحتوي عنصر واجهة المستخدم على سمة للتحكم في العرض أو الاخفاء على الأجهزة المحمولة. |
| لا يحتوي القسم على السمة title لعرض أو إخفاء أي عنوان. | تحتوي الأداة على السمة title لعرض أو إخفاء اسم العنوان. |
| القسم يسمح بإضافة HTML بداخلها مباشرة. | الأداة لا تسمح بإضافة HTML بداخلها مباشرة. |
مزايا تسمية فئة القسم:
1. على الرغم من أنه من الاختياري تسمية فئة القسم ، إلا أننا يجب أن
نضيفها لأن التسمية ستساعد بلوجر على تحديد كيفية نقل محتوى القالب عند
تغيير القالب .
2. الاسم الأساسي للفئات "class"هو‘navbar’ for navigation menu, ‘header’ for header section, ‘main’
إلي الأن ينتهي هذا الجزء من سلسلة أنشاء قالب بلوجر من الصفر يتبع في الجزء القادم حيث سنبدأ فعلياً بأنشاء أو قالب بلوجر إحترافي ومتجاوب لنا.
نراكم في الجزء التالي
أضف تعليق