البنية الأساسية لقسم CSS من اكواد قوالب بلوجر (4).

في الجزء السابق ذكرنا أن أكواد قوالب بلوجر يمكن تقسيمها إلى ثلاثة أقسام منها ، منطقة الرأس وذكرنا بأن أكواد هذا القسم ثاتبة لا تتغير، لذلك سوف لن نهتم بها في هذه السلسة من الدروس، وسنركز على القسمين المتبقيين لأهميتها البالغة في تحرير القالب.
وفي هذا الدرس سوف نتعرف على بنية قسم CSS وهي التي تكون القسم الثاني من أكواد القالب كما ذكرنا في الدرس السابق.
أولا يجب التنويه إلى أنه ليست كل القوالب لها نفس البنية ، لأن الأمر يتعلق ببصمة المصمم وطريقته في التصميم . ومع ذلك سنحاول في هذا الدرس أن نوضح الخطوط العريضة للأجزاء والأقسام التي ينقسم إليها هذا القسم بدوره، ويبلغ عدد هذه الأقسام المندرجة تحت قسم أكبر هو قسم CSS تسعة، وسنحدد وظائف كل قسم أو جزء منه على وجه الإجمال، على أن نشرح بتفصيل ما يحتويه كل قسم من هذه الأقسام من أكواد ووظائفها في الحلقات المقبلة من هذه الدروس . وننصح بقراءة هذه السلسلة حسب ترتيب حلقاتها حتى تسهل عملية الفهم .
وقبل البدء في بيان الأقسام التسعة المتعلقة بقسم css رجاء افتح هذه الصفحة في نافدة جديدة لنها تحتوي على اكواد قالب نمودجي توضيحي لما نحن بصدد شرحه وقد وضعت فيه الاقسام المذكورة باللون الأحمر حتى تقف على مكانها من أكواد القالب بصورة عامة مما يعين على فهم افضل للموضوع.

قسم 1 : التعريفات المتغيرة :variable definitions :
وهذا القسم يحدد نوع الخطوط وأحجامها ، والألوان وأشياء أخرى تظهر في الشكل الخارجي للقالب ،وكل القيم المحددة فيه تجد لها إحالات في باقي أجزاء القالب، بطريقة سنشرحها بتفصيل مستقبلا، وليس كل القوالب تتوفر على هذا القسم، وتكمن أهميته في أنه كلما كثرت أسطره في الكود سهل التحكم في خصائص القالب وإجراء التعديلات على مظهره اعتمادا على خيار : "الخطوط والألوان " من لوحة التحكم في مدونتك. أما في حال انعدامها فلا مفر من إجراء
التعديلات بشكل يدوي أي تحرير الكود مباشرة .

قسم 2 : global

وهذا القسم يحتوي على الأكواد التي تتحكم في المظهر العام للقالب برمته – طبعا في علاقة مباشرة مع القسم الذي قبله- ويبدأ بكود body متبوعا بعده مباشرة تأتي مجموعة من الاكواد التي الواقعة بين لامتين {.....} وهي تتحكم – كما قلنا – في المظهر العام للقالب مثل سعة عرض القالب، وكذا ولن خلفية القالب أو جعل الخلفية عبارة عن صورة . لكن رغم فإن هذا االقسم لا يتحكم في التفاصيل الدقيقة للقالب لأن هذه المهمة تتولاها أقسام أخرى سنعرض لها واحدا واحدا. وداخل هذا القسم تقع أجزاء مهمة من أكواد القالب وهي الغلاف الخارجي outer wrapper و منطقة المحتوى content wrapper ..

قسم 3 : الرأس : Header.
وهذا القسم يتحكم في كل شيء داخل منطقة الرأس Header wrapper ، والذي يحتوي غالبا على عنوان المدونة ، ووصف المدونة ، وقد تضاف إليه أشياء أخرى مثل العارضة العلوية linkbar ، وتجدر الإشارة إلى أنه لا يمكن إضافة أي اكواد على هذه المنطقة بواسطة خيار "عناصر الصفحة" بل تتم إضافتها يدويا .

قسم 4 : الجزء الرئيسي : Main :
وهذا القسم يتحكم في كل ما يندرج تحت قسم Main wrapper : مثل التاريخ ، والتدوينات ، والتعليقات ، ورابط الخلاصات أو أي إضافة تمت إضافتها إلى هذه المنطقة عن طريق عناصر الصفحة .

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

قسم 6 : متفرقات : Miscellaneous :
وهذا القسم يتحكم في العناصر الإضافية في المدونة والتي لا يتحكم فيها أي من الأقسام المذكورة، وهذه العناصر هي : ملف التعريف Profile:، وتنسيق النصوص الموضوعة بين مزدوجتين : blogquote ...

قسم 7: أسفل منطقة المحتوى : post footer :
وهذا القسم يتحكم في خصائص ثلاث أشياء في القالب وهي :

  • النصوص الموجودة أسفل منطقة التدوين ، وهي تحتوي على معلومات عن التدوينة وهي اسم كاتب التدوينة والتسميات التي تندرج تحتها ، والتعليقات .
  • الروابط الموجودة أسفل التدوينة وهي رسالة أقدم ، ورسالة أحدث .
  • روابط التغذية أو الخلاصات .
قسم 8: التعليقات : comments.
وهذا القسم يتحكم في خصائص التعليقات في المدونة .

قسم 9 : المنطقة السفلى : Footer :
وهذا القسم يراقب خصائص المنطقة الواقعة أسفل القالب ككل، وهي على العموم تحتوي على بعض النصوص التي تبين حقوق الملكية الفكرية للمدونة ، كما يمكن وضع بعض الإضافات في هذه المنطقة مثل " احدث التعليقات " احدث المواضيع " وعداد الزوار ، وغيرها ... وهذه المنطقة قد تتكون من عمود واحد أو أكثر .

إرسال تعليق

4 تعليقات

  1. يعطيك العافية أخوي ..

    تم الإستفادة من جميع الدروس السابقة و هذا الدرس أيضا ..

    في إنتظار القادم ..

    بارك الله فيك

    ردحذف
  2. شكرا على المتابعة وباقي الدروس ستأتي تياعا إن شاء الله

    ردحذف
  3. السلام عليكم

    الدرس رائع و إستفدت منه

    و الرابط للعينة التي أدرجتها للشرح كانت فكرته جدا ذكية

    حبذا لو كانت هناك صورة تصف الشكل العام للمدونة و فيه كل العناصر التي يتم تغييرها وفق تقسيمات CSS

    شكرا

    سلامي

    ردحذف
  4. درس رائع وقمة الفائدة..استمر اخي جزاك الله خيرا

    ردحذف