السلام عليكم و رحمة الله تعالى و بركاته.
انك عندما تلقي نظرة على قالب بلوجر فانك تقرا عدة مصطلحات و رموز لا تفهم معناها .اليوم باذن الله تعالى سأشرح العناصر الاساسية لقالب بلوجر و التي يجب البدء بها عند التفكير في تصميم قالب بلوجر أو تعديله .بالاضافة الى الخصائص التي يجب تعديلها عند تعريب قالب ما .
الصورة التالية تبين مكونات قالب بلوجر
- المكونات الاساسية لقوالب بلوجر :
1 - الجسم الأساسى للقالب “ Body “
وهو عبارة عن الوعاء التى يحتوى بداخله كل المكونات الاخرى للقالب من الهيدر " Header " والفوتر " Footer " والغلاف الداخلى " Content Wrapper " و شريط القوائم " Menu bare " و السايدبار " Sidebare "وكل الأجزاء التي ستأتي تندرج ضمن "body".
2 - الهيدر الخاص بالمدونة " Header "
وهو عبارة عن الجزء الموجود فى أعلى المدونة والذى يحتوى بدوره على عنوان المدونة " Title " ووصف المدونة "Description " وايضا إعلانات منها " Adsense " و غيرها من الاضافات .اما كود الهيدر فيشمل مل يلي
header-wrapper # : ويدل على بداية أكواد الصندوق الذي يتحكم في كل منطقة رأس المدونة header. ويشمل اسم المدونة، ووصف المدونة .
header# : وهو صندوق يقع بدوره ضمن الذي سبقه .
header h# : واكواده تتحكم في مظهر عنوان أو اسم المدونة.
header h1 a # : ويتحكم في عنوان المدونة باعتباره رابطاlink.
header description #: تتحكم في خصائص وصف المدونة.
header a img# : يتحكم في خصائص الصورة في منطقة الرأس .
3 - شريط القوائم " Menu bare "
وهو عبارة عن شريط يحتوى على مجموعة من الروابط والاختصارات الهامة التى تحب ان تعرضها على زوارمدونتك وتسهيل الوصول اليها مثل فهرس للمدونة او سجل للزوار او اتصل بنا وغيرها.
4 - الجسم الداخلى " Content Wrapper "
او المنطقة الخاصة بمحتوى المدونة.
وهو يحتوى بداخله على كل من محتوى الرسائل " Main Wrapper " وأيضا محتوى السايدبار " Side bare " وهو الجزء الاهم فى المدونة .
5 - منطقة الرسائل " Main Wrapper "
يقع هذا الجزء فى الجسم الداخلى " Content Wrapper " والمسؤول عن نشر المواضيع " Posts " وأيضا نشر التعليقات " Comments " الخاصة بكل موضوع ومكونات أخرى نضعها في المدونة لتبدو بشكل جميل.
6 -#main : وهو صندوق يقع ضمن الذي قبله .
main.widget# : ويتحكم في في كل القطع والأجزاء التي تقع ضمن .main-wrpper
h2.date-header : يتحكم في خصائص تاريخ التدوينات .
post. : وهي مسبوقة بنقطة يتحكم في خصائص منطقة المحتوى – النشر- blog post .
Post h3. : يتحكم في خصائص عناوين التدوينات.
post body p. : يتحكم في خصائص جسم ومحتوى التدوينات .
post ul. : يتحكم في تنسيق القوائم غير المرقمة .
post ol. : يتحكم في تنسيق القوائم المرقمة.
a img : يتحكم في الخصائص العامة للصور.
7 - منطقة السايدبار " Sidebare "
يقع هذا الجزء فى الجسم الداخلى " Content Wrapper " وهو الجزء المخصص لوضع الادوات والاضافات الخاصة بك والتى تخص مدونتك من ( التسميات " Labels " , الأرشيف " Archives" ، التعليقات " Comments" ، اعلانات ادسنس " Adsense " .
اكواد هذا الجزء تشمل على
sidebar-wrapper. : ويحيط بكل العناصر التي يتكون منها العمود الجانبي .
sidebar. : صندوق يتواجد داخل الذي قبله.
sidebar1 # : يتحكم في خصائص العمود الجانبي الأول في حال وجود أكثر من عمود.
sidebar2 # : يتحكم في خصائص العمود الجانبي الثاني ، مع التنبيه إلى أنه أذا أردت ان تجعل كل الأعمدة متشابهة ، فيمكنك أن تتحكم في خصائصها مجتمعة من خلال العنصر الأول وهو .sidebar
sidebar .widget. : تتحكم في خصائص كل الأجزاء التي يتكون منها العمود الجانبي – "إضافة أداة ".
sidebar1 .widget. : تتحكم فقط في خصائص العمود الجانبي رقم 1.
sidebar .blogArchive. : يتحكم في خصائص الأرشيف الموجود في العمود الجانبي . ويستحب ترك خصائصه كما هي افتراضيا وعدم تغيير أي شيء فيها .
sidebar h2 . : يتحكم في خصائص عناوين أجزاء العمود الجانبي.
.sidebar #blogArchive1 h2. : يتحكم في عنوان الأرشيف.
Miscellaneous- 8 : هذا الجزء يضم ملف التعريف بالكاتب أو البروفايل و bockauote ، والأكواد التي تندرج ضمنه هي
profile1 # : ويتحكم في خصائص " التعريف بالكاتب" about me.
profile1 h2 #: يتحكم في خصائص عنوان ملف التعريف .
Profile-img a img : يتحكم في خصائص صورةالكاتب .
Profile-textblock :يتحكم في خصائص النص الذي يعرف به المدون نفسه فيملف التعريف .
Blockauote : يتحكم في خصائص النصوص التي يضعها المدون بين مزدوجتين "..."
9 - الفوتر الخاص بالمدونة " Footer "
وهو عبارة عن الجزء الموجود فى أسفل المدونة وهو مثل السايدبار " Side bare " تقريبا وهو مخصص لوضع الادوات والاضافات الخاصة بك والتى تخص مدونتك من( التسميات " Labels " , الأرشيف " Archives" ، التعليقات " Comments"، اعلانات ادسنس "Adsense
ولكن له بعض المميزات الخاصة سيتم شرحها بالتفصيل لاحقا.
post-footer. : يتحكم في كل خصائص أسفل التدوينات والمواضيع.
post-footer-line. : يتحكم في خصائص كل سطر جديد في هذه المنطقة.
Post-footer a : يتحكم في خصائص الروابط في هذه المنطقة.
Post-footer .post-comment-link a : يتحكم في روابط التعليقات.
footer-wrapper # : وهو يحيط بكل العناصر التي يتكون منها "الفوتر" .
footer #: ويقع ضمن الجزء الذي قبله .
footer h2 # : يتحكم في خصائص عنوان الفوتر .
footer .widget # : يتحكم في الأجزاء أو الإضافات التي توجد في الفوتر .
blog-pager# : يتحكم في خصائص أرقام الصفحات ومن بينها " رسالة جديدة" و "الصفحة الرئيسية" و "رسالة أقدم" التي تتواجد في صف واحد أسفل منطقة المحتوى .
blog-pager-newer-link# : يتحكم في خصائص رابط " رسالة أقدم".
.blog-pager-older-link# : يتحكم في خصائص رابط "رسالة أقدم".
feed-links. : يتحكم في العبارة التي تكون أسفل كل تدوينة وهي عبارة " اشترك في الرسالة" .
10-مكان النشر" Posts" وهذا الجزء هو أهم ما في المدونة , فا من خلاله تعرض محتوى مدونتك للقراء , ويحتوي بدوره على أجزاء وهي عنون التدوينة , وتاريخ نشرها , واسم المدون , والتصنيف الذي تندرج فيه التدوينة .
اما الخصائص فهي التي تحدد فمن خلالها نتحكم في الحجم و المكان الخلفيات لهذه العناصر بالاضافة الى اختيار الالوان و نمط الخط.
11-التعليقات"comments"وتندرج تحته العناصر التالية:
comments# : ويتحكم في كل خصائص العناصر المكونة لصندوق التعليقات .
comments a# : يتحكم في خصائص الروابط .
comments h4 # : يتحكم في رأس header صندوق التعليقات.
comments author. : يتحكم خصائص كتابة أسماء المعلقين.
comment-body p . : يتحكم في خصائص جسم body منطقة التعليقات .
اما الخصائص فهي التي تحدد فمن خلالها نتحكم في الحجم و المكان الخلفيات لهذه العناصر بالاضافة الى اختيار الالوان و نمط الخط.
- الخصائص الأساسية لقوالب بلوجر :
- text-align وتعني محاذاة النصوص , فإذا كان القالب إنجليزيا فستكون محاذاة النصوص على اليسار وستكون العبارة هكذا ;text-align:left أما اذا كان القالب معربا ستكون هكذا ;text-align:right .
- float وتعني محاذاة التنسيق , أي مكان وجود العنصر اما في اليمين فتكون العبارة هكذا ;float:rightواما في اليسار فتكون العبارة هكذا ;float:left .
- direction من خلالها نستطيع تحديد اتجاه القالب كامل , بحيث نضيفها بهذا الشكل direction:rtl مثلا تحت Body هنالك سيتحول اتجاه القالب كاملا في بعض القوالب , وفي القوالب الأخرى سيبقى اتجاه بعض العناصر مثل ما هو مع بعض التغيير . وفي بعض القوالب تكون هكذا direction:ltr; فعلينا تغييرها direction:rtl .
توضيح : rtl تعني right-to-left أي من اليمين إلى اليسار , و ltr تعني rleft -to-right من اليسار إلى اليمين .
- padding وتعني الهوامش الداخلية فإذا كانت في القالب الإنجليزي موجودةً هكذا padding-left:5px; فإنه يلزمنا تغيير left إلى right لتصبح العبارة هكذا padding-right:5px; .
- margin وهي مضاد padding وتعني الهوامش الخارجية وهي لا تختلف عن padding , فإذا كانت في القالب الإنجليزي موجودةً هكذا margin -left:5px فإنه يلزمنا تغيير left إلى right لتصبح العبارة هكذا ;margin -right:5px .
- Font-family , وتعني الخط , فإذا كان الخط هكذا ;font-family:arial ونريد أن نغيره إلى خط آخر مثلا tahoma سنغير arial فقط . ;font-family:Arial, Helvetica, sans-serif;
هذا إيجاز لبعض الخواص [ css ] التي عادة ما أستخدمها عندما أعرب قالباً ما , ولن تفهموها بشكل جيد الآن , ولكن بعد التطبيق ستسهل لكم وستحبونها كثيرا .{…} a : ويتحكم في خصائص الروابط .
: {…}a:visited ويتحكم في خصائص الروابط التي تم الضغط عليها.
:{…}a:hover ويتحكم في خصائص الروابط عندما يكون مؤشر الفأرة فوقها.
أما بالنسبة لتعديل Html فإني لم أعد أستخدمها كثيرا عندما أعرب أحد القوالب , وذلك لأن أكثر التعديل يكون على css والتنسيق من خلالها من اليمين إلى اليسار , أو العكس .
فعادة ما نبحث في القالب في تحرير Html في البلوجر عن dir , ونضع بجانبها rtl لتكون بهذا الشكل dir="rtl" .
لا تنسونا من صالح دعائكم........
المشاركات
