درس تعاريف المتغيرات Variables Definitions

في هذا الدرس الشيق سنتعرف على كيفية جعل القالب اكثر تخصيصا من لوحة التحكم من ناحية ألوان الخلفيات والنصوص والتحكم بأنواع الخطوط والحجم اي كون القالب  Fully Customizable  طبعا لجعل القالب يدعم هاته الخاصية هناك متغيرات تعريفية لهذا الغرض وسهل التعامل معها وفهم طريقة عملها وكيفية توظيفها، غالبا ما نجد هاته الخاصية في القوالب الافتراضية لبلوجر والعديد من المطورين يجهل طريقة عملها حيث يتم تعديل هاته المتغيرات من خلال لوحة التحكم  Blogger Dashboard  كما ترون في الصورة اعلاه وسهولة التحكم فيها دون اللجوء الى القالب من HTML وتغيير الألوان والنصوص، جميل اليس كذلك؟؟

اذا لنبدأ على بركة الله :

ملحوظة : هاته المتغيرات تعمل داخل وسمي ... فقط اي انها لن تعمل خارج هذا الاخير اي انه حتى لو وضعتها في CSS داخل وسمي Style فلن تعمل لك.

حسنا اولا يجب ان نعرف طريقة عمل هاته المتغيرات وكيفية تخصيصها لكل معرف محدد.

اولا ولكي تعمل يجب ان تكون داخل تعليق CSS بين /*....*/  وهاته قائمة لتعريفات المتغييرات الممكن العمل بها :

name : الاسم وهو يحتوي على حروف وارقام فقط وممنوع ان يحتوي على مسافة بدل هاته الاخيرة مسموح وضع نقطة، كما انه يجب ان يكون اسما فريدا لكل متغير وغير مكرر.

description : الوصف يمكن ان يكون اسم او عنوان يصف المتغير name واكثر دلالة كما انه يمكن ان يشمل مسافات مثال كما ترون في الصورة اعلاه Page Text / Backgrounds / Blog Title حتى يسهل الامر على مستخدم القالب ان يعرف مع اي جزء من القالب يتعامل معه.

type : وهو نوع المتغير والذي يكون اما "font" او "color".

default : القيمة الافتراضية للون الاساسي للقالب قبل ان يتحكم فيه مستخدم القالب مثلا بالنسبة للون الافتراضي للقالب الخاص بهاته المنصة هو اللون البرتقالي #fd9b5d لو مثلا بعت القالب لمستخدم اخر ولم يقنعه هذا اللون حينها سيغيره كما يشاء هو.

value : وهي القيمة المستعملة.

الخطوة الأولى :

الان نمر للبنية الاساسية للمتغيرات :

هذا مثال لمتغير اللون الخاص بلون خلفية القالب :

 /* Variable definitions 
name="bgcolor" description="Background Main Color" type="color" default="#fff" value="#fff"/>
name="body.font" description="Body Main Font" type="font" default="normal 12px tahoma, arial" value="normal 12px tahoma, arial"/>
*/
]]

كما ترون اولا تم وضع المتغيرات داخل تعليق /* ... */  ثم ادراج وسم مغلق ذاتي باللإضافة انها داخل وسمي skin وبهذا نكون احترمنا شروط بلوجر للمتغيرات وبالتالي سوف تشتغل معنا بدون مشاكل، وكما تلاحظون داخل وسم Variable يتم وضع التعريفات وهي اسم المتغير الذي هو bgcolor هذا فقط مثال يمكنك وضع اي اسم تشاء فقط من الضروري يكون له معنى للجزء المقصود والوصف انصح ان يكون له علاقة بالاسم والنوع في هذا المثال color والقيمة الافتراضية للون وهو اللون الابيض.
وكذلك نفس الشيء بالنسبة للخط.

الخطوة الثانية

لاشتغال معرف المتغير الذي تم وضعه اعلاه وهنا نتعامل مع المعرف name وهاته بنيته $(variable_name) وفي هذا المثال فالمعرف كالتالي $(bgcolor) بالنسبة للون خلفية القالب وكذلك الخط الاساسي للقالب ولكي يشتغل يجب ان يكون كالتالي :

body {
          background : $(bgcolor) ;
          margin : 0;
          font: $(body.font) ;
          padding : 0;
}

اذا كيف كان الدرس سهل اليس كذلك :)
لو لديك اي استفسار تفضل بطرحه نظام التعليقات امامك فلا تبخل وبالتوفيق لكم.
موعدنا في درس اخر غدا باذن الله.

:بضغطة زر تشارك الفائدة وتدعم المدونة

Tweet

المزيد

:مواضيع قد تهمك