تصميم قالب مدونة بلوجر ( الدرس السادس )

الصناديق والعنــاصر التي تتكون منهـا أكواد قوالب بلـــوجر

في موضوع سابق تحدثنا عن ( خصائص الصناديق container في قالب بلوجر )
وفي هذا الموضوع سنشير إلى أهم الصناديق والعناصر التي يتكون منها قالب بلوجر، مع بيان وأدوارها ووظائفها ، وقبل ذلك لنتفق على أن العناصر هي أصغر حجما من الصناديق، والعنصر في الغالب يقع ضمن صندوق اكبر منه، فالصندوق إذن يمكن أن يحتوي على أكثر من عنصر .

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

أولا يجب أن نعلم أن الرمز # و النقطة (.) يظهران قبل بداية أكواد عنصر او صندوق معين وفيما يلي أهم الصناديق مع أهم العناصر التي تندرج تحت كل صندوق : .

Global : وتندرج ضمنه الأجزاء التالية:

الخصائص العامة لمجمل القالب : Body {…}

بداية أكواد الصندوق الأكبر الذي يضم كامل محتويات القالب : #outer-wrapper {….}

ويحتوي على العمود الجانبي، ومنطقة النشر، والمنطقى السفلى لمنطقة النشر : #content-wrapper {…}

{…} a : ويتحكم في خصائص الروابط .

ويتحكم في خصائص الروابط التي تم الضغط عليها. : a:visited{…}

ويتحكم في خصائص الروابط عندما يكون مؤشر الفأرة فوقها : a :hover{…}

وتجدر الإشارة إلى ما ذكرته هنا يتعلق فقط بأسماء أو عناوين العناصر و اعلم أن الأكواد التي تحدد خصائص كل عنصر تقع بين اللامتين {...} سوف لن نعيد كتابتها فيما يأتي من الأكواد.

الرأس : Header . :
وتندرج ضمنه الأجزاء التالية
header-wrapper # : ويدل على بداية أكواد الصندوق الذي يتحكم في كل منطقة الرأس header. ويشمل اسم المدونة، ووصف المدونة .
header# : وهو صندوق يقع بدوره ضمن الذي سبقه .

header h# : واكواده تتحكم في مظهر عنوان أو اسم المدونة.

header h1 a # : ويتحكم في عنوان المدونة باعتباره رابطاlink.

header description # : تتحكم في خصائص وصف المدونة.

header a img# : يتحكم في خصائص الصورة في منطقة الرأس .

الجزء الرئيسي : Main :
وتندرج ضمنه الاجزاء التالية:

main-wrapper#: وهو الصندوق الذي يحيط بتاريخ التدوينات، ومنطقة المحتوى أو النشر، والتعليقات ، والخلاصات ، وأي قطعة أو جزء تتم إضافتها فوق أو أسفل منطقة النشر او المحتوى blog post

main # : وهو صندوق يقع ضمن الذي قبله .

main.widget# : ويتحكم في في كل القطع والأجزاء التي تقع ضمن main-wrpper .

h2.date-header : يتحكم في خصائص تاريخ التدوينات .

post. : وهي مسبوقة بنقطة يتحكم في خصائص منطقة المحتوى – النشر- blog post .

Post h3. : يتحكم في خصائص عناوين التدوينات.

post body p. : يتحكم في خصائص جسم ومحتوى التدوينات .

post ul. : يتحكم في تنسيق القوائم غير المرقمة .

post ol. : يتحكم في تنسيق القوائم المرقمة.

a img : يتحكم في الخصائص العامة للصور.

العمود الجانبي : Sidebar :
وتندرج ضمنه الأجزاء التالية:

sidebar-wrapper. : ويحيط بكل العناصر التي يتكون منها العمود الجانبي .

sidebar. : صندوق يتواجد داخل الذي قبله.

sidebar1 # : يتحكم في خصائص العمود الجانبي الأول في حال وجود أكثر من عمود.

sidebar2 # : يتحكم في خصائص العمود الجانبي الثاني ، مع التنبيه إلى أنه أذا أردت ان تجعل كل الأعمدة متشابهة ، فيمكنك أن تتحكم في خصائصها مجتمعة من خلال العنصر الأول وهو .sidebar

.sidebar .widget : تتحكم في خصائص كل الأجزاء التي يتكون منها العمود الجانبي – "إضافة أداة ".

sidebar1 .widget. : تتحكم فقط في خصائص العمود الجانبي رقم 1.

sidebar .blogArchive. : يتحكم في خصائص الأرشيف الموجود في العمود الجانبي . ويستحب ترك خصائصه كما هي افتراضيا وعدم تغيير أي شيء فيها .

sidebar h2 . : يتحكم في خصائص عناوين أجزاء العمود الجانبي.

.sidebar #blogArchive1 h2. : يتحكم في عنوان الأرشيف.

Miscellaneous : ذكرنا أن هذا الجزء يضم ملف التعريف أو البروفايل و bockauote ، والأكواد التي تندرج ضمنه هي :

profile1 # : ويتحكم في خصائص " من أنا" about me

profile1 h2 # : يتحكم خصائص عنوان ملف التعريف " من أنا".

Profile-img a img : يتحكم في خصائص الصورة المرفقة بـ " من أنا" إن وجدت .

Profile-textblock :يتحكم في خصائص النص الذي يعرف به المدون نفسه في قسم ملف التعريف "من أنا" .

Blockauote: يتحكم في خصائص النصوص التي يضعها المدون بين مزدوجتين "..."

Post-footer : ويحتوي على الأكواد التالية :

post-footer. : يتحكم في كل خصائص أسفل التدوينات والمواضيع.

post-footer-line. : يتحكم في خصائص كل سطر جديد في هذه المنطقة.

Post-footer a : يتحكم في خصائص الروابط في هذه المنطقة.

Post-footer .post-comment-link a : يتحكم في روابط التعليقات.

blog-pager# : يتحكم في خصائص " رسالة جديدة" و "الصفحة الرئيسية" و "رسالة أقدم" التي تتواجد في صف واحد أسفل منطقة المحتوى .

blog-pager-newer-link# : يتحكم في خصائص رابط " رسالة أقدم".

.blog-pager-older-link# : يتحكم في خصائص رابط "رسالة أقدم".

feed-links. : يتحكم في العبارة التي تكون أسفل كل تدوينة وهي عبارة " اشترك في الرسالة" .

التعليقات : comments :
وتندرج تحته العناصر التالية:

comments# : ويتحكم في كل خصائص العناصر المكونة لصندوق التعليقات .

comments a# : يتحكم في خصائص الروابط .

comments h4 # : يتحكم في رأس header صندوق التعليقات.

comments author. : يتحكم خصائص كتابة أسماء المعلقين.

comment-body p . : يتحكم في خصائص جسم body منطقة التعليقات .

Footer
ويحتوي على العناصر التالية:

footer-wrapper # : وهو يحيط بكل العناصر التي يتكون منها "الفوتر" .

footer #: ويقع ضمن الجزء الذي قبله .

footer h2 # : يتحكم في خصائص عنوان الفوتر .

footer .widget # : يتحكم في الأجزاء أو الإضافات التي توجد في الفوتر .

footer a . : يتحكم في خصائص النصوص الموجودة في الفوتر.

الآن أصبحت على معرفة بأهم الصناديق أو الأجزاء المكونة لقوالب بلوجر ، كما أصبحت تعرف أهم العناصر التي يتكون منها كل صندوق ، والاكواد الدالة عليها ووظائفها . المزيد في الحلقة المقبلة بإذن الله .