أساسيات تصميم وتكويد قوالب بلوجر 2022
تصميم قالب بلوجر من الصفر ليس بالأمر الصعب الذي تتخيله. فمن السهل جِدًّا أن تبني قالب بلوجر من البداية بسهولة إذا تعلمت الأساسيات التي تستخدمها في بناء هذا القالب. لتقوم بتسهيل عملية بناء القالب وتكويده يمكنك أن تتعلم أساسيات لغات البرمجة التي ستستخدمها في بناء القالب (مثل: HTML و CSS و JavaScript) وفهم بعض أساسيات لغة XML. يمكنك تعلم هذه اللغات بشكل مجاني عن طريق موقع https://www.w3schools.com
كيف يعمل بلوجر؟
عند إرسال قالب XHTML إلى المدونة، يتم تخزين هذا القالب في قاعدة بيانات المدونة. عند طلب المدونة عبر المتصفح، يوزع محلل بلوجر (Blogger Parser) الرمز ويعيد إخراج HTML من كود XML الذي تم تحليله والذي سيُعرض في المتصفح.
 |
النسق الأساسي للقالب
يتم تكويد قالب بلوجر بلغة XHTML بالكامل وعناصر بلوجر (Blogger Elements). في الكود السابق، قمنا بتحديد مجموعة من xmlns XML (Namespace) التي تم تعريفها بواسطة Google للاستخدام مع منصة بلوجر. Namespace مثل (xmlns:b, xmlns:expr, xmlns:data) تتيح لنا تصميم قالب بلوجر والحصول على البيانات من قاعدة بيانات بلوجر.
·
- مصدر بيانات بلوجر
·
- يتيح الوصول إلى عناصر
بلوجر
·
- يستخدم لحساب التعبير عن
السمات
ملحوظة: مجالات الأسماء السابقة مجرد اختصارات ويمكنك تغيير مجالات الأسماء السابقة من "b" إلى "blog" و"data" إلى "d". ولكن من الأفضل إبقاء الأسماء كما هي.
نصائح قبل البدء في تصميم قالب بلوجر
قبل البدء في تصميم القالب، قم بتخطيط سريع شكل القالب الذي تريد تصميمه. سيُساعدك هذا أثناء تصميم القالب وتكويده. يمكنك رسم التخطيط على قطعة من الورق، أو استخدام تطبيقات للتخطيط مثل wire-frame. قم بتحديد عناصر الموقع مثل:
· كيف ستظهر المنشورات
· أين سيكون مكان القائمة وكيف سيكون شكلها
· أين سيكون مكان الإضافات
· عدد أعمدة القالب
الأقسام - Sections
يتم تصميم تخطيط قوالب بلوجر بالأقسام Sections. الأقسام عبارة عن تخطيط الصفحة (مثل: Header، Sidebar، Footer، ...إلخ). وتعتبر هي نفس فكرة الأقسام في HTML5.
القسم هو جزء من الموقع تقوم بتخصيص محتوى معين في هذا القسم.
 |
تركيب الأقسام (Section Syntax)
يظهر في هذا الكود بنية إنشاء قسم (Section) في قوالب بلوجر. يمكن أن تضع كود HTML حول كود القسم (Section)، ولكن لا يمكن أن يكون هناك كود HTML داخل كود القسم (Section). لتقوم بتحديد محتويات القسم (Section) يجب استخدام عناصر واجهة منصة بلوجر.
كل وسم من وسوم القسم (Section) يتم كتابته بالشكل الموضح في أعلى هذه الفقرة.
كل سمة من سمات الأقسام لها معنى خاص، يتم تحليلها بواسطة Blogger لعرض العناصر النهائية.
سمات الأقسام (Section Attributes)
سوف نتعرف على بعض سمات الأقسام المهمة التي ستستخدمها بشكل متكرر أثناء تصميم وتكويد القالب.
· Id (مطلوب) – هذه الخاصية تعطي اسما فريد للقسم، تستخدم بها حروف وأرقام فقط.
· class (اختياري) – هذه الخاصية تعطي اسم شائع للفئات مثل: "العنوان"، شريط التنقل، الشريط الجانبي، ...إلخ. إذا قررت أن تقوم بتبديل القالب لاحقًا، فإن هذه الأسماء تساعد Blogger على تحديد أفضل الطرق لنقل المحتوى الخاص بك. ويمكنك استخدام أسماء مختلفة. ليس من الشرط أن تعطي هذه الخاصية اسم فريد، فمن الممكن استخدام الاسم لأكثر من عنصر.
· showaddelement (اختياري) – تأخذ هذه الخاصية قيمة "yes" أو "no"، القيمة الافتراضية تكون "yes". تجعل هذه الخاصية إمكانية إضافة أداة جديدة للقسم، ويظهر خيار "إضافة أداة" في صفحة التخطيط داخل منصة Blogger.
· maxwidgets (اختياري) – تقوم هذه الخاصية بتحديد الحد الأقصى لعدد الأدوات في القسم. إذا لم تحدد العدد، فلن يكون هناك حد لعدد الأدوات.
لا يمكن أن يحتوي قسم الأدوات على أقسام أخرى أو أكواد أخرى بداخله. إذا كانت هناك ضرورة لإضافة رمز حول أو داخل قسم، فيجب تقسم القسم إلى قسمين مختلفين.
 |
مثال:
ملحوظة: يجب أن يكون هناك على الأقل قسمين في القالب أو اثنين من سمة "b:section"، وإلا فإن منصة بلوجر ستعتبره خَطًّا.
الأدوات - Widgets
يتم صنع الأقسام خصيصًا باستخدام الأدوات (Widgets). هذه الأقسام عبارة عن عناصر للتخطيط، والأداة (Widget) هي التي يتم بها عرض البيانات الحقيقية. بواجهة تصميم بأبسط شكل، هو وسم واحد فقط، وهو عنصر نائ ب أو ما يُسمي بـ Placeholder لما يجب أن يتم إظهاره في عناصر الصفحة. يوجد بعض الأدوات الافتراضية في Blogger تمكنك أيضًا من إنشاء أدوات مخصصة. يتم تخزين البيانات الخاصة بالعنصر لواجهة المستخدم في قاعدة بيانات Blogger ولا يمكن الوصول إليه إلا عندما يتم عرض عنصر UI (واجهة المستخدم).
 |
تركيب الأدوات – Widget Syntax
· id (مطلوب) – يجب أن يحتوي على أحرف وأرقام فقط، ولا يمكن أن يحتوي على رموز، ولا يمكن أن يبدأ برقم وإلا سيحدث خطأ. يجب أن يكون قيمة الـ id اسم فريدًا ولا يمكن أن يتشابه مع عنصر آخر.
· type (مطلوب) – تشير هذه الخاصية إلى نوع عنصر الأداة، ويجب أن تأخذ هذه الخاصية نوع أو قيمة صحيحة من عناصر الأدوات:
Blog
BlogArchive
BlogProfile
Feed
HTML
Header
LinkList
List
Logo
Navbar
NewsBar
SingleImage
VideoBar
· locked (اختياري) – تأخذ هذه الخاصية قيمة "yes" أو قيمة "no"، والقيمة الافتراضية لها هي "no". وظيفة هذه الخاصية فقل الأدوات بحيث لا يمكن تحريكها أو حذفها من صفحة تنسيق منصة بلوجر.
· pageType (اختياري) – تأخذ هذه الخاصية قيم: ("all"، "main"، "item"، "achive")، والقيمة الافتراضية لهذه الخاصية تكون "all". وظيفة هذه الخاصية هي عرض عنصر الأداة على الصفحات المخصصة لموقعك فقط (يتم عرض جميع عناصر UI في صفحة التنسيق داخل منصة بلوجر).
· title (اختياري) – تقوم هذه الخاصية بتحديد العنوان الخاص بعنصر الأداة التي سيتم عرضها. إذا لم تقم بتحديد العنوان، فسيتم استخدام عنوان افتراضي لعنصر الأداة مثل "List1".
· mobile (اختياري) – تأخذ هذه الخاصية قيم: ("yes"، "no"، "only”) ، والقيمة الافتراضية هي "default". وظيفة هذه الخاصية تحديد ما إذا كان سيتم عرض الأداة على الهاتف أم لا. لن يتم عرض عناصر: ("PageList"، "Header"، "Adsense"، "Profile"، "Blog") على الهاتف إلا إذا كانت قيمة هذه الخاصية هي "default".
مثال:
 |
قواعد إنشاء الأقسام (Sections)
· 1 – أي قسم له وسم فتح ووسم إغلاق ما عدا بعض الوسوم لا تحتوي على وسم إغلاق ويطلق عليهم (Empty Elements أو Void Elements). وسم الفتح "<b:section>" أما وسم الإغلاق "<b:section/>". إذا قمت بفحص موقع إلكتروني تم إنشائه باستخدام بلوجر من خلال خيار "inspect element" الموجود في المتصفح، ستجد أن تم استبدال وسم القسم "section" بـعنصر آخر "<div>". ولكن يظل القسم (Section) في محرر HTML الموجود في منصة بلوجر، لا يتم تغيير الأقسام إلى وسم "div".
· 2 – يجب أن يكون لكل قسم معرف "id" وفئة "class". ممنوع أن تقوم بتسمية قسمين بنفس الاسم وإلا سيعتبر بلوجر أن هذا خطأ. نظرًا لأن الأقسام يتم تحويلها إلى "div"، إلا أن الفئات "class" والمعرفات "id" تبقى كـسمات حتى بعد تحويل القسم إلى "div". وذلك حتى تتمكن من تخصيص القسم حسب المعرف والفئة.
· 3 – ممنوع تداخل الأقسام. أي أنك لا يمكنك أن تقوم بإدراج قسم داخل قسم آخر، هذا ممنوع وستعتبره منصة بلوجر خطأ.
· 4 – الأفضل أن تقوم بإنشاء قسم تحت عنصر "div".
· 5 – تستطيع إدراج سمات معينة فقط.
|
السمة |
القيمة |
مطلوب/اختياري |
الوظيفة |
|
id
|
اسم فريد يسمح فقط بالأرقام والحروف. مثل: head, sidebar |
مطلوب |
تعريف وتخصيص القسم |
|
class |
مثل الـ id + يمكن استخدامه مع أكثر من قسم |
اختياري |
تعريف وتخصيص القسم |
|
showaddelement
|
القيم المنطقية – "yes"/"no" |
اختياري |
إذا كانت القيمة "yes"، فسيسمح القسم بإضافة أدوات جديدة به، أما إذا كانت القيمة "no" لن يسمح القسم بإضافة أي أداة |
|
maxwidgets
|
أرقام مثل: 1، 2، 8، 15 |
اختياري |
أقصى عدد للأدوات التي يمكن أن يحتويها القسم |
|
growth |
رأسي أو أفقي – vertical/horizontal |
اختياري |
إذا كانت القيمة "vertical"، فسيتم ترتيب القسم جنبًا إلى جنب، والعكس صحيح |
قواعد إنشاء الأدوات (Widgets)
· 1 – ممنوع تداخل الأدوات بداخل بعضهم البعض.
· 2 – تستطيع إدراج السمات المحددة فقط.
· 3 – يجب أن تحتوي كل أداة على معرف فريد "id" وسمة "type". ممنوع تسمية معرف أو فئة باسم معرف أو فئة آخرين. تظل معرفات الأداة كـسمات بعد تحويل الأداة إلى "div". وذلك حتى تتمكن من تخصيص الأداة فيما بعد.
· 4 – ممنوع إدراج وسوم HTML في الأدوات.
· 5 – يمكن استخدام وسم البداية والنهاية كإعلان للأداة. علامة بدء الأداة هي "<b:widget>" وعلامة نهاية الأداة هي ""<b:widget/>.
· 6 - ستضر إلى إنشاء أداة بداخل قسم إذا اردت إنشاء أداة جديدة.
|
السمات |
القيمة |
مطلوب/اختياري |
الوظيفة |
|
id |
اسم فريد لا يمكن أن يتشابه مع اسم id آخر |
مطلوب |
تعريف وتخصيص القسم |
|
type |
AdSense, Attribution, Blog, HTML, Header, PageList, Profile |
مطلوب |
تحديد نوع الأداة |
|
title
|
أي اسم مثل: إعلان، قائمة |
اختياري |
عرض عنوان الأداة |
|
pageType |
all, archive, item, main, static |
اختياري |
تحديد نوع صفحة الأداة |
|
locked |
yes/no |
اختياري |
إذا كانت القيمة "yes"، فلن تستطيع تحريك الأداة أو حذفها من واجهة منصة بلوجر |
|
mobile |
yes/no |
اختياري |
إذا كانت القيمة "yes"، فستستطيع عرض الأداة على الهاتف |
بعض الاختلافات بين الأقسام (Sections) والأدوات (Widgets)
|
الأقسام |
الأدوات |
|
يمكن أن تضع أداة أو أكثر داخل كل قسم |
لا يمكن أن تحتوي الأداة على قسم بداخلها |
|
لا يوجد للأقسام أي خاصية أو سمة للتحكم في العرض أو الإخفاء على الهواتف |
تحتوي الأدوات على سمة خاصة بالتحكم في عرض أو إخفاء الأداة على الهواتف |
|
يمكن إضافة وسوم HTML بداخل الأقسام مباشرة |
لا يمكن إضافة وسوم HTML بداخل الأداة |
|
القسم جزء أو منطقة مستقلة بذاتها |
الأدوات تابعة لعناصر الصفحة التي تعتمد بشكل أساسي على الأقسام |
|
لا يمكن إضافة قسم جديد من واجهة منصة بلوجر |
يمكن إضافة أداة جديدة من صفحة التنسيق داخل منصة بلوجر |
|
لا تحتوي الأقسام على خاصية أو سمة title لعرض أو إخفاء عنوان القسم |
تحتوي الأدوات على خاصية title لعرض أو إخفاء عنوان الأداة |
بعض التشابهات بين الأقسام (Sections) والأدوات (Widgets)
|
الأقسام |
الأدوات |
|
يتم تغيير وسوم الأقسام بالوسم div |
وسوم الأدوات يتم استبدالها بالوسم div |
|
لا يمكن أن يحتوي القسم على قسم آخر بداخله |
لا يمكن أن تحتوي الأداة على أداة أخرى بداخلها |
|
أي قسم لديه معرف id فريد |
أي أداة لديها معرف id فريد |
تسمية فئة "class" القسم
· 1 – الاسم الأساسي للفئات "class" يكون (navbar: navigation menu, main, header: header section)
· 2 – على الرغم من أنه من الاختياري تسمية فئة "class" القسم، إلا أنه من الأفضل أن نضيفها لأن ستساعد بلوجر على تحديد كيفية نقل محتوى القالب الحالي إذا قمت بتغيير قالبك لاحقًا
بعض البيانات الديناميكية الافتراضية في بلوجر
تقدم منصة بلوجر بعض وسوم البيانات الافتراضية التي يمكنك من خلالها استدعاء بيانات محددة لعرضها مثال: إذا كنت تريد عرض عنوان المدونة دِينَامِيكِيًّا دون أن تقوم بكتابة العنوان بنفسك، يمكنك استخدام "</data:title> ".
|
الوسم |
ماذا يعرض |
|
<data:title/> |
عنوان الموقع |
|
<data:newerPageTitle/> |
عنوان الصفحة الجديد من المنشورات |
|
<data:olderPageTitle/> |
عنوان الصفحة القديمة من المنشورات |
|
<data:description/> |
وصف الموقع |
|
<data:commentLabe/l> |
عدد التعليقات |
|
</data:post.title/> |
عنوان المنشور |
|
<data:post.author/> |
اسم كاتب المنشور |
|
<data:post.timestamp/> |
تاريخ ووقت نشر المنشور |
|
<data:post.dateHeader/> |
تاريخ المشاركة كرأس للمنشور |
|
<data:authorLabel/> |
إظهار "نشر بواسطة" |
|
<data:post.body/> |
محتوى المنشور |
|
<data:post.ur/l> |
رابط المنشور |
|
<data:label.name/> |
تسمية المنشور |
ANCHOR TAG
يتم تحويل ANCHOR TAG (<a>) في بلوجر إلى نص URL. مثال: إذا كان عنوان الرابط للصفحة الرئيسية هو https://www.google.com، فسيتم تحويل هذا الرابط إلى الوسم التالي "<a expr:href='data:blog.homepageUrl >الرئيسية</a>" ثم إلى "<a href="http://www.google.com">الرئيسية</a>".
بعض ANCHOR TAGS الديناميكية
|
وسوم Anchor الديناميكية |
ماذا تعرض |
|
<a expr:href='data:post.url'>اقرأ المزيد</a> |
نص لإقرأ المزيد مع رابط الموضوع |
|
<a expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> |
المنشورات الأحدث مع رابط للمنشورات الأحدث |
|
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> |
اسم كاتب المنشور مع رابط مباشر |
|
<a expr:href='data:blog.homepageUrl >الرئيسية</a> |
نص مع رابط الصفحة الرئيسية |
|
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a> |
اسم التسمية مع رابط مباشر للتسمية |
|
<a expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> |
المنشورات الأقدم مع رابط للمنشورات الأقدم |
|
<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a> |
نص التعليقات للتعليق، مع رابط مباشر |
إضافة الوقت والتاريخ
لتقوم بإضافة الوقت والتاريخ في موقعك على بلوجر اتبع الشرح التالي:
· انتقل إلى لوحة تحكم بلوجر < التنسيق < رسائل المدونة < تعديل خيارات صفحة التدوينات
· تحقق من خيارات الوقت والتاريخ
أو يمكنك استخدام الكود التالي في قالب المدونة بعد هذا السطر "<div class='post-footer-line post-footer-line-1'>".
إنشاء الأقسام الأساسية في منصة بلوجر
سنقوم بإنشاء الأقسام التالية:
· 1 – Header
· 2 – Body
· 3 – Sidebar
· 4 – Footer
Header
قم بوضع الكود التالي في وسم div header
 |
Body
 |
قم بوضع الكود التالي في post div
Sidebar
 |
قم بوضع الكود التالي في sidebar div
Footer
قم بوضع الكود التالي في footer div
 |
إلى هنا نكون وصلنا إلى نهاية الموضوع، ولكن لم ينته مشوارك في تعلم تصميم قوالب بلوجر، ابحث على جوجل ويوتيوب عن كورسات تصميم قوالب بلوجر وستجد ما تريده هناك. في النهاية أتمنى أن تكونوا قد استفدتم الاستفادة القصوى من هذا الشرح، والسلام عليكم ورحمة الله وبركاته.