14 يناير 2019

شرح أجزاء كود قوالب بلوجر وطريقة تعديلها

كمدون وبعد تركيب قالب بلوجر جديد، قد تكون بحاجة أحيانا للقيام بتعديلات على قالب مدونتك من قبيل:



  • إضافة قسم جديد.
  • تغيير الشكل من الألوان والحجم.
  • حذف جزء غير مهم.
  • تنظيف القالب.

في هذا الموضوع ستتعرف على أهم الأجزاء التي يتكون منها أي قالب بلوجر، بالإضافة إلى كيفية التعامل مع أكوادها للقيام بالتعديلات المرغوبة.

من المهم جدا أن تكون ملما بتقنيات الويب وتصميم المواقع للقيام بهذه الأمور. لكن، لا تقلق يمكنك البدء بتعلم 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>

شرح الأجزاء:

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 class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
</b:section>

ب. sidebar أو aside


 هو الشريط الجانبي.

<b:section-contents id='sidebar'>
</b:section>

ت. main

 هو مكان إظهار المواضيع أو المشاركات مع التعليقات، وهو أهم جزء لأنه يحتوي على المحتوى الذي يتم نشره.

<b:section class='main' id='main' name='Main' showaddelement='no'>
</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 التالي:



.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;
}


4. بعد إضافة كود CSS، لديك مجموعى من الخيارات هنا لإضافتها:

بعد أضافة أي جزء، عد للتخطيط وستلاحظ الفرق.

أ. مربع واحد

<div class="addedcontainer">
<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>

ث. ثلاثة مربعات

<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>

ج. أربعة مربعات

<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>


يمكنك الآن تعديل قالب مدونتك متى شئت، قد يأتي اليوم الذي تصمم فيه قوالب بلوجر، من يدري.