كيفية شراء دومين أو استضافة والدفع من بنك بايير

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

في كثير من الأحيان يحتاج المدوّن إلى تغيير أحجام المساحات على مدونته لتتناسب مع طبيعة محتوى المدونة وأماكن الاعلانات التي يريد وضعها عليها ولا سيّما المساحات الاساسيّة المكوِّنة لجسم القالب الرئيسي أعني مساحة الهيدر ومساحة الموضوع ومساحة السايدبار الذي في يسار المدونات العربية غالباً وكذلك مساحة الفوتر، وفي الوقت ذاته لا يريد تغيير قالب المدونة، لذا سنشرح في هذه التدوينة بشكل مفصَّل أهم الأكواد والمصطلحات التي يمكنك من خلالها الوصول إلى المقطوعة البرمجية التي تخص كلّ واحدة منها داخل صندوق أكواد القالب للتحكم بمساحتها بتصغيرها أو تكبيرها من دون الحاجة إلى تغيير القالب.

ولكن قبل الدخول في شرح الأكواد وكيفية تعديل المساحات لابدّ من مقدمة تعريفية بطبيعة تكوين مساحات القالب أو ما يُعرف بالمساحة الكلية والمساحة الجزئية

أولاً: المساحة الكليّة للمدونة والمساحات الضمنيّة الجزئية

لأجل تعديل مساحة أي جزء من المدونة لابد من إجراء تعديل معاكس على الجزء الذي يليه او الذي بجانبه ويمكن توضيح ذلك بهذا المثال:

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

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

ثانياً: الأكواد الأساسيّة والأكواد الفرعيّة

تنقسم أكواد القالب عادةً إلى قسمين متشابهين ومتتاليين مع اختلاف في الاسم والوظيفة إلى حدٍ ما فمثلا الكود الخاص بحجم منطقة المواضيع " post " في القالب يتكوّن في الحقيقة من قسمين هما:

القسم الأوَّل: وهو يحمل هذا الاسم ضمن أكواد القالب: " #main-wrapper "

القسم الثاني: وتجده أسفل القسم الأوّل مباشرة وهو يحمل الاسم: " #main "

والمعنى الحرفي لاسم الكود الأوّل هو (المجمع الرئيسي) بينما اسم الكود الثاني معناه (المجمع) لذا سنسمي الكود الأوّل بـ الكود الرئيسي والكود الثاني بـ الكود الفرعي وعلى ضوء ذلك يمكن بيان الفرق بينهما بما يلي:

1- يمثّل الكود الرئيسي " # main-wrapper " المساحة المتاحة لقائمة المواضيع والتي هي في أغلب القوالب تساوي (600 بكسل). ويمكن التعديل عليها كيفما تشاء بحسب حجم القوائم المجاورة

2- يمثّل الكود الفرعي " #main " الكود المتحكم بالحشو الذي يُشكل المحتوى الداخلي للكود الرئيسي وهذه المساحة بامكانك تصغيرها إلى أيّ حجم يناسبك ولكن لا يمكنك تكبيرها أكثر من المساحة المحددة في الكود الرئيسي الذي يمثل وعاءً لهذه المساحة وهو 600 بكسل في مثالنا المذكور.

ولضمان عدم حصول اي تشويه في القالب عند التعديل احرص دوماً على أن تكون مساحة الكود الفرعي (الحشو) أقل بقليل (بضعة درجات) من مساحة الكود الرئيسي فاجعلها مثلا في مثالنا السابق تستوعب 598 بيكسل .

وهذا الأمر من تقسيم الأكواد إلى رئيسيّة وفرعية عامّ يشمل جميع مساحات المدونة فمثلاً السايدبار أيضا ينقسم إلى كود رئيسي يمثل المساحة الكلية للقائمة الجانبية وكود آخر فرعي يمثل كيفية توزيع المساحات الضمنية (الحشو) داخل القائمة الجانبية وهكذا الفوتر والهيدر وسائر مساحات القالب .

ثالثاً: قواعد التعديل على مساحات قالب بلوجر

هناك مجموعة قواعد لابد من مراعاتها عند التعديل على مساحات وشكل قالب بلوجر يظهر بعضها مما سبق ويحتاج بعضها الآخر إلى مزيد من التفصيل والخلاصة عند التعديل على القالب لابدّ من مراعاة القواعد التالية لتجنب تشويه المظهر:

1- إذا قمت بتكبير منطقة عرض المواضيع " post" لابد من تصغير القائمة الجانبية (السايد بار) بنسبة مساوية.

2- إذا قمت بتكبير القائمة الجانبية (السايدبار) فلابد من تصغير منطقة عرض المواضيع " post" بنسبة مساوية.

3- إذا قمت بتكبير أو تصغير أحد أقسام الفوتر لابد من فعل عكسه في الأقسام المجاورة وبنفس النسبة .

4- بعض القوالب تحتوي على ثلاثة قوائم ففي هذه الحال عند تكبير او تصغير أي واحدة من القوائم الثلاثة يجب فعل العكس باحدى القائمتين الأخريين بالنسبة نفسها.

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

رابعاً: كيفية التعديل على مساحة الهيدر header

يعد الهيدر القسم الأوّل الذي يظهر في أعلى المدونة او الموقع والذي يتضمن شعار المدونة مع مساحة اعلانية الى جانب الشعار وفي الغالب يتضمن شريطا للقائمة العلوية وآخر للقائمة السفليّة.

شرح الكود الرئيسي للهيدر:

header-wrapper هذا هو عنوان الكود الرئيسي للهيدر.

background-color: #f8f8f8; هذا هو كود خلفية الهيدر قم بتغيير القيمة #f8f8f8 إلى أي لون يناسبك

padding-bottom: 50px; هذه هي المسافة التي تفصل الحشو عن الاطار من الأعلى

padding-top: 88px; هذه هي المسافة التي تفصل الحشو عن الاطار من الاسفل

ويُنصح بعدم التعديل على الهيدر إذا لم تكن خبيرا بالتعامل مع قوالب بلوجر لأنّ التعديل على الهيدر في الغالب يستدعي التعديل على جسم القالب بالكامل.

خامساً: كيفية التعديل على مساحة المواضيع (المقالات)

لتعديل حجم مساحة المواضيع للصفحة الرئيسية إذهب إلى صندوق أكواد القالب وبعد فتحه انقر في اي مكان منه ثم إضغط على كنترول والحرف f سيظهر لك مربع البحث ابحث عن الكود الرئيسي الخاص بمنطقة عرض المواضيع وهو في أغلب القوالب تحت عنوان #main-wrapper وكما وضحنا سابقاً هذا هو الكود الذي يتحكم بالمساحة الكليّة لعرض الموضوع وليس الحشو ويمكنك معرفة ذلك من خلال وجود كلمة wrapper فيه والتي تعني الحيز الرئيسي .

ستجد في هذا القسم المصطلحات التالية في أغلب قوالب بلوجر:

شرح الكود الرئيسي لمنطقة المواضيع :

#main-wrapper وهو اسم الكود ويعني الحيز الخارجي او كما أسميناه الكود الرئيسي

float: left; وهو خاص باتجاه الكود اي هل هو موجود على يمين المدونة او على يسارها

width: 486px; هذا هو عرض مساحة الموضوعات بالبكسل وهو الكود المطلوب للتعديل على منطقة الموضوعات فيمكنك التعديل عليه كيفما تشاء من خلال التعديل على الرقم 486 في المثال أو أي رقم ستجده بجانبه فهو يختلف من قالب إلى آخر ولكن لا تنسى القواعد التي ذكرناها سابقا فلأجل التعديل على مساحتها يجب أن تجري تعديلا معاكسا وبنسبة مساوية على القوائم المجاورة.

margin: 0px 0px 0px 0px; هذا الكود يمثل مساحة  الفراغ بين منطقة المواضيع وجسم المدونة الخارجي وهو غير مهم لذا اتركه كما هو .

padding: 0px 0px 0px 0px; أمّا هذا فيمثل مساحة الفراغ بن جسم الكود (حدوده) وبين حشو الكود اي بين الاطار والمحتوى وبتعبير أدق بين الكود الرئيسي والكود الفرعي ويُفضل أيضا تركه كما هو .

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

ولكن من المهم أن نشرح الكود الداخلي حيث ستجد داخل الكود السابق وهو الكود الرئيس كوداً آخر وهو الكود الداخلي ومن خلاله تتحكم بكيفية ظهور حشو الكود الرئيس وبعبارة أوضح ما فعلناه الى الآن هو تكبير أو تصغير إطار مساحة المواضيع ولكن ما فائدة تكبير هذه المساحة إذا لم يتم معه تكبير أو تصغير نفس حجم عرض العنوان والصورة ووصف الموضوع لذا سنشرح الكود الفرعي أيضا الذي يمكنك من خلاله فعل ذلك وتجده تحت الكود الرئيسي مباشرة وتجد فيه الأكواد التالية:

شرح الكود الفرعي لمنطقة المواضيع :

#main وهو اسم الكود الفرعي وعنوانه

width: 476px; هذا هو كود حجم حشو الموضوع يمكنك زيادة الرقم او تقليله بحسب حجم اطار المواضيع الذي حددته سابقا.

margin: 4px; هذا هو كود حجم الفراغ بين الجوانب وهو غير مهم دعه كما هو

وستجد مجموعة أخرى من الأكواد التي تنضوي تحت هذا الكود ولكلّ واحد منها خاصيته ولا تنفعنا في تغيير حجم الـ " post " لذا نترك شرحها .

سادساً: كيفية التعديل على مساحة القائمة الجانبيّة (السايد بار)

تجد في القالب كوداً رئيسياً يخص السايدبار وآخر فرعي كما شرحنا من ذي قبل فالكود الرئيسي تحت عنوان #side-wrapper1 يخص مساحة إطار السايد بار (القائمة الجانبية) والكود الفرعي تحت عنوان #sidebar1 يخص مساحة محتوى (حشو) السايد بار والذي يجدر بنا الإشارة إليه هنا أنه قد يكون في بعض القوالب أكثر من قائمة جانبية ففي بعض قوالب بلوجر تجد قائمة جانبية من جهة يمين القالب وقائمتان من جهة اليسار وفي هذه الحالة يمكنك التمييز بينها بملاحظة الرقم المكتوب بجوار عنوان الكود الرئيسي للسايد بار من 1 إلى 3 وهنا سنشرح كيفية التعديل على السايد بار الأوّل فقط ويمكنك التعديل على الثاني والثالث بالطريقة نفسها .

شرح أكواد الكود الرئيسي للسايد بار (القائمة الجانبية):

#side-wrapper1 أو قد تجده بدون الرقم 1 وهو عنوان الكود الرئيسي للسايدبار، ومعناه مجمع القائمة الجانبية

width: 156px; هذا هو كود التحكم بعرض القائمة الجانبية فيمكنك زيادة عرضها أو تقليله بتغيير الرقم وقد تجد في قالبك رقما غير 156 فهو متغير من قالب لآخر ولا تنسى الالتزام بالقواعد التي ذكرناها آنفا عند تغيير عرض السايدبار.

float: left; لتغيير جهة وجود القائمة الجانبية ونقلها من يسار المدونة إلى يمينها .

وهناك أكواد أخرى ستجدها تحت هذا العنوان لا تنفعنا في عملية التعديل على عرض القائمة الجانبية لذا نترك شرحها.

شرح الكود الفرعي للقائمة الجانبيّة:

في بعض القوالب لن تجد الكود الفرعي للسايدبار تحت الكود الرئيسي الخاص به بل تجده في موضع آخر من القالب بعيداً عن الكود الرئيسي الخاص به ولا يوجب هذا الأمر أن تقلق فلأجل إيجاد الكود الفرعي للسايدبار كل ما عليك أن تبحث عنه باسمه الذي هو كما يلي:

#sidebar1 هذا هو عنوان الكود الفرعي للسايدبار وقد تجده بدون الرقم1

width: 152px; هذا هو كود التحكم بمقياس عرض محتوى السايدبار يمكنك التعديل عليه بنفس النسبة التي أجريتها على عرض الاطار الخارجي للسايدبار ولا يمكنك جعل المحتوى أعرض من الاطار.

وستجد تحته أيضا أكواداً أخرى غير مهمة في التعديل على عرض القائمة الجانبية.

سابعاً: كيفية التعديل على مساحة الفوتر

يمثل الفوتر الجزء الأخير أسفل مظهر المدونة أو الموقع وتجده في تكويد القالب تحت عنوان foot أو footer وتجد الكود الرئيسي للفوتر تحت عنوان footer-wrapper ويليه هذا الكود

<b:section class='foot' id='footer-3' name='Footer'

شرح الكود الرئيسي للفوتر:

footer-wrapper هذا هو عنوان الكود الرئيسي الخاص بالفوتر

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

width: 30%; هذا هو الكود الخاص بالتحكم بحجم كل قسم على حدة من الفوتر ففي هذا المثال يكون حجم القسم الأوَّل (أي عرضه) يساوي 30 بالمائة من المساحة الكلية للفوتر وتكون مساحة القسم الثاني 40 بالمائة ومساحة القسم الثالث 30 بالمائة والمجموع هو مائة من مائة وللتعديل على مساحة أحدها يجب الالتزام بالقواعد السابقة من القيام بالتعديل على القسم المجاور بشكل معاكس وبالقيمة نفسها ففي مثالنا إذا جعلت القسم الأوّل 50 بالمائة وجب ان تجعل القسم الثاني 25 بالمائة والثالث 25 بالمائة وهكذا .

float: right هذا الكود خاص بجهة الفوتر ولا حاجة الى التعديل عليه.

text-align: right; هذا خاص بجهة الخط ولا تحتاج الى التعديل عليه أيضا

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

تنبيه: لا نجيز نسخ المقال واعادة نشره على المواقع والمدونات الأخرى ومن يفعل ذلك يتحمل المسؤولية الشرعية والقانونية كاملة.

تعديل المقال