شرح أجزاء كود قوالب بلوجر وطريقة تعديلها
كمدون وبعد تركيب قالب بلوجر جديد، قد تكون بحاجة أحيانا للقيام بتعديلات على قالب مدونتك من قبيل:
في هذا القيم يتم إضافة مجموعة من الأكواد والتي لا تظهر على متصفح الويب. مثلا هذا القيم يحتوي على أكواد الCSS التي تتحكم في شكل صفحة الويب (الألوان، حجم الخط...) والتي يتم وضعها بين الكودين التاليين:
هنا يتم وضع محتوى صفحة الويب الذي يظهر على المتصفح مثل العناوين والفقرات..
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
</b:section>
<b:section-contents id='sidebar'>
</b:section>
<b:section class='main' id='main' name='Main' showaddelement='no'>
</b:section>
<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
</b:section>
- إضافة قسم جديد.
- تغيير الشكل من الألوان والحجم.
- حذف جزء غير مهم.
- تنظيف القالب.
في هذا الموضوع ستتعرف على أهم الأجزاء التي يتكون منها أي قالب بلوجر، بالإضافة إلى كيفية التعامل مع أكوادها للقيام بالتعديلات المرغوبة. وهو أمر سيساعدك في القيام بأي تغيير مثل التخلص من الأدوات المزعجة بدون قالب تنظيف.
من المهم جدا أن تكون ملما بتقنيات الويب وتصميم المواقع للقيام بهذه الأمور. لكن، لا تقلق يمكنك البدء بتعلم html و CSS اليوم. قدمنا سابقا دروسا بالفيديو ويمكنك أن تتعلم ما يكفي من أساسيات في ظرف يوم واحد فقط.
مكونات قوالب بلوجر
أي قالب بلوجر لابد أن يتوفر على هذه الأجزاء كما في الكود التالي:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<head>
<b:skin><![CDATA[/*
]]></b:skin>
</head>
<body>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
</b:section>
<b:section-contents id='sidebar'>
</b:section>
<b:section class='main' id='main' name='Main' showaddelement='no'>
</b:section>
<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
</b:section>
</body>
</html>
<!DOCTYPE html>
<head>
<b:skin><![CDATA[/*
]]></b:skin>
</head>
<body>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
</b:section>
<b:section-contents id='sidebar'>
</b:section>
<b:section class='main' id='main' name='Main' showaddelement='no'>
</b:section>
<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
</b:section>
</body>
</html>
شرح الأجزاء:
1. نسخة xml
<?xml version="1.0" encoding="UTF-8" ?>
هذا الكود يتعلق بنسخة xml المستخدمة في القالب، وهو غير مهم.
2. ال html
<!DOCTYPE html>
محتوى صفحة الويب هنا
</html>
بين هذين الكودين يتم وضع محتوى صفحة الويب كاملة.3. قسم head
<head>
أكواد أخرى هنا
</head>
في هذا القيم يتم إضافة مجموعة من الأكواد والتي لا تظهر على متصفح الويب. مثلا هذا القيم يحتوي على أكواد الCSS التي تتحكم في شكل صفحة الويب (الألوان، حجم الخط...) والتي يتم وضعها بين الكودين التاليين:
<b:skin><![CDATA[/*
هنا يتم وضع أكواد css
]]></b:skin>
4. body
هنا يتم وضع محتوى صفحة الويب الذي يظهر على المتصفح مثل العناوين والفقرات..
<body>
محتوى صفحة الويب الذي يظهر على المتصفح
</body>
وتحتوي على أجزاء أخرى قد تختلف أسماءها من قالب لآخر، لأن المصمم يمكنه وضع الأسماء التي يريدها. في الفيديو سنرى كيف يمكنك ايجاد كل قسم باستعمال inspect على المتصفح.
الأقسام الثانية داخل body:
أ. header
هو القسم الأول الذي يظهر في الأعلى، غالبا يكون فيه شعار الموقع أو المدونة.
</b:section>
ب. sidebar أو aside
هو الشريط الجانبي.
<b:section-contents id='sidebar'>
</b:section>
ت. main
هو مكان إظهار المواضيع أو المشاركات مع التعليقات، وهو أهم جزء لأنه يحتوي على المحتوى الذي يتم نشره.
</b:section>
ث. foot أو footer
هو الجزء الأخير ويتم وضعه في الأسفل.
<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
</b:section>
تعديل قوالب بلوجر لإضافة أقسام جديدة للأدوات
بعد التعرف على الأجزاء المكونة لقالب بلوجر، لنجرب الآن إضافة أقسام جديدة للأدوات عبر الخطوات التالية:
1. لا تنسى حفظ نسخة من قالب مدونتك قبل القيام بأية تغييرات. أو قم بالتجارب على القالب في مدونة أخرى حتى تنتهي لتجنب المشاكل والأخطاء.
2. قم بفتح أداة تعديل القالب بالنقر على مظهر ثم تحرير HTML.
3. قم بالنقر وسط كود القالب على Ctrl+F للبحث عن ]]></b:skin> وفوقها مباشرة أضف كود الCSS التالي:
1. لا تنسى حفظ نسخة من قالب مدونتك قبل القيام بأية تغييرات. أو قم بالتجارب على القالب في مدونة أخرى حتى تنتهي لتجنب المشاكل والأخطاء.
2. قم بفتح أداة تعديل القالب بالنقر على مظهر ثم تحرير HTML.
3. قم بالنقر وسط كود القالب على Ctrl+F للبحث عن ]]></b:skin> وفوقها مباشرة أضف كود الCSS التالي:
.addedcontainer{
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 0 10px;
}
.addedcontainertwo{
width: 50%;
float: right;
box-sizing: border-box;
text-align: center;
padding: 0 10px;
}
.addedcontainerthree{
width: 33%;
float: right;
box-sizing: border-box;
text-align: center;
padding: 0 5px;
}
.addedcontainerfour{
width: 25%;
float: right;
box-sizing: border-box;
text-align: center;
padding: 0 5px;
}
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 0 10px;
}
.addedcontainertwo{
width: 50%;
float: right;
box-sizing: border-box;
text-align: center;
padding: 0 10px;
}
.addedcontainerthree{
width: 33%;
float: right;
box-sizing: border-box;
text-align: center;
padding: 0 5px;
}
.addedcontainerfour{
width: 25%;
float: right;
box-sizing: border-box;
text-align: center;
padding: 0 5px;
}
4. بعد إضافة كود CSS، لديك مجموعى من الخيارات هنا لإضافتها:
بعد أضافة أي جزء، عد للتخطيط وستلاحظ الفرق.
بعد أضافة أي جزء، عد للتخطيط وستلاحظ الفرق.
أ. مربع واحد
<div class="addedcontainer">
<b:section class='addedcontainer' id='addedcontainer' maxwidgets='no' name='one addedcontainer' showaddelement='yes'>
</b:section>
</div>
<b:section class='addedcontainer' id='addedcontainer' maxwidgets='no' name='one addedcontainer' showaddelement='yes'>
</b:section>
</div>
ب. مربعين
<div class="addedcontainertwo">
<b:section class='addedcontainertworight' id='addedcontainertwof' maxwidgets='no' name='two containers' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainertwo">
<b:section class='addedcontainertwoleft' id='addedcontainertwoleft' maxwidgets='no' name='two containers' showaddelement='yes'>
</b:section>
</div>
<b:section class='addedcontainertworight' id='addedcontainertwof' maxwidgets='no' name='two containers' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainertwo">
<b:section class='addedcontainertwoleft' id='addedcontainertwoleft' maxwidgets='no' name='two containers' showaddelement='yes'>
</b:section>
</div>
ث. ثلاثة مربعات
<div class="addedcontainerthree">
<b:section class='addedcontainerthreefirst' id='addedcontainerthreefirst' maxwidgets='no' name='three containers first' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerthree">
<b:section class='addedcontainerthreesecond' id='addedcontainerthreesecond' maxwidgets='no' name='three containers second' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerthree">
<b:section class='addedcontainerthreethird' id='addedcontainerthreethird' maxwidgets='no' name='three containers third' showaddelement='yes'>
</b:section>
</div>
<b:section class='addedcontainerthreefirst' id='addedcontainerthreefirst' maxwidgets='no' name='three containers first' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerthree">
<b:section class='addedcontainerthreesecond' id='addedcontainerthreesecond' maxwidgets='no' name='three containers second' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerthree">
<b:section class='addedcontainerthreethird' id='addedcontainerthreethird' maxwidgets='no' name='three containers third' showaddelement='yes'>
</b:section>
</div>
ج. أربعة مربعات
يمكنك الآن تعديل قالب مدونتك متى شئت، قد يأتي اليوم الذي تصمم فيه قوالب بلوجر، من يدري.
<div class="addedcontainerfour">
<b:section class='addedcontainerfourfirst' id='addedcontainerfourfirst' maxwidgets='no' name='four containers first' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerfour">
<b:section class='addedcontainerfoursecond' id='addedcontainerfoursecond' maxwidgets='no' name='four containers second' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerfour">
<b:section class='addedcontainerfourthird' id='addedcontainerfourthird' maxwidgets='no' name='four containers second' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerfour">
<b:section class='addedcontainerfourfourth' id='addedcontainerfourfourth' maxwidgets='no' name='four containers fourth' showaddelement='yes'>
</b:section>
</div>
<b:section class='addedcontainerfourfirst' id='addedcontainerfourfirst' maxwidgets='no' name='four containers first' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerfour">
<b:section class='addedcontainerfoursecond' id='addedcontainerfoursecond' maxwidgets='no' name='four containers second' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerfour">
<b:section class='addedcontainerfourthird' id='addedcontainerfourthird' maxwidgets='no' name='four containers second' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerfour">
<b:section class='addedcontainerfourfourth' id='addedcontainerfourfourth' maxwidgets='no' name='four containers fourth' showaddelement='yes'>
</b:section>
</div>
يمكنك الآن تعديل قالب مدونتك متى شئت، قد يأتي اليوم الذي تصمم فيه قوالب بلوجر، من يدري.