شرح تصميم قالب بلوجر – الجزء الرابع | موقع أبانوب حنا للبرمجيات

تصميم قالب بلوجر سهل مثل كتابة صفحات HTML عادية ولكن الفرق هو أن بلوجر توفر لنا طريقة لإنشاء صفحات ديناميكية عن طريق ترجمة القالب (parsing) وإضافة الداتا المستخدمة في كتابة كود القالب.

تعلمنا في الجزء الأول والثاني والثالث كل ما يخص عناصر تصميم بلوجر (Blogger Elements) والمعلومات الخاصة بطريقة استخدامهم. ولكن الآن، في الجزء الرابع، نتكلم عن طريقة استخدام css لتنسيق ثيم بلوجر. واستخدام المتغيرات (defining variables)، و تصميم تخطيط الصفحة (page layout)، و كيف تجعل المدونة قابلة للتخصيص عن طريق الـ Theme Designer.

الـ Theme Designer يُسمي أيضاً Template Designer وهو طريقة تقدمها منصة بلوجر للتعديل على قوالب وثيمات بلوجر الخاصة بمدونتك.

استخدام b:skin لتنسيق ثيم بلوجر

وسم b:skin يستخدم مثل وسم <style> في كود HTML حيث يتم وضع كود لغة التنسيق CSS داخله. ولكن منصة بلوجر أعطتنا ميزة اضافية وهي إمكانية عمل متغيرات variables واستخدامها كقيم لخصائص العناصر في لغة CSS. بالإضافة إلى إمكانية ضم هذه المتغيرات في مجموعات واستخدامهم في كود CSS.

اضافة كود b:skin

كود <b:skin> لابد من اضافتها داخل وسم <head> داخل كود قالب بلوجر. لابد أن توضع كل المتغيرات ومجموعاتها داخل /** */ أو داخل <![CDADTA[ ]]> لكي لا يقوم المتصفح ولا الـ xml parser بترجمتهم (parsing). لأن هذا الكود يقوم بترجمته محرك بلوجر (Blogger engine) ويعرض كود CSS عادي جداً بعد ترجمته.

طريقة اضافة تنسيقات CSS لقالب بلوجر

<!-- Defining b:skin example -->
   .....
   <head>
     .....
     <b:skin><style typ="text/css">
         /**
          *  Variable Definitions go here.
          */
   
         /**
          *  CSS Styles go below, followed by the Variable Definitions
          */
     <style></b:skin>
     ......
   </head>
   .....

استخدام المتغيرات في تنسيق CSS في بلوجر

استخدم تاج <Variable> مع بعض الخصائص (السمات) وهم :

name : اسم مميز وغير مكرر يتكون من حروف وأرقام.
description : وصف قصير للمتغير. هذا الوصف يظهر في template designer أثناء تخصيص قالب بلوجر.
type : قيمتها تكون إما Font أو color أو length أو string أو url أو background بعض هذه القيم تضيف خصائص أخرى للمتغير.
value : قيمة المتغير
default : القيمة الإفتراضية للمتغير. يستخدم محرك بلوجر هذه القيمة في حالة عدم وجود قيمة في value للمتغير.

القيمة المكتوبة في default و value لابد أن تتبع نوع المتغير. للتوضيح أكثر، هذه هي أنواع المتغيرات (types) وطريقة كتابتها (formats).

color : قيمة اللون لابد أن تكون hexadecimal مثال #FF2266. يمكن استخدام هذا المتغير كقيمة للخصائص في كود CSS التي تطلب لون. عمل مجموعة من الألوان، يجعلها تظهر في قسم داخل الـ Theme Designer كما ترى في الصورة التالية.

font : طريقة كتابة الخط تكون بهذا الترتيب font-style font-weight font-size font-family. تستخدم لإعطاء تنسيق الخط للعناصر داخل كود CSS. يظهر اختيار اللون داخل Theme Designer في بلوجر كما ترى الصورة التالية.

لمشاهدة متغيرات القالب إذهب إلى Theme ثم Customize سيفتح لك الـ Blogger Theme Designer ثم اضغط على تبويب Advanced وستجد به كل مجموعات المتغيرات التي يمكنك تغييرها.

مثال على مجموعات المتغيرات في كتابة كود ثيم بلوجر

<!-- Variable Declaration -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin>
       <style type='text/css'>
       /** Color and font variable declaration
   
       <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
   
       <Variable name="title.font" description="Title Font Styles" type="font" 
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   
       */
       
       /** CSS styles */
       </style>
     </b:skin>
   
     (or)
   
     <b:skin><![CDATA[
       /** Color Variable Declaration */
       <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
   
       /** Font Variable Declaration */
       <Variable name="title.font" description="Title Font Styles" type="font" 
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     ]]></b:skin>
   </head>
   ....

استخدام مجموعات المتغيرات في بلوجر

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

عمل مجموعات من المتغيرات يجعل تخصيص هذه المتغيرات سهل جداً في الـ Blogger Theme Designer دون الدخول إلى كود ثيم بلوجر لتغيير قيم المتغيرات.

لكتابة مجموعة نستخدم وسم <group> ونستخدم الخصائص التالية مع وسم group :

description : وصف قصير للمجموعة. هذا الوصف يستخدم لتعريف المجموعة داخل الـ Blogger Theme Designer كما ترى في الصورة التالية.

selector : يحدد CSS Selector ليستخدم للمجموعة داخل الـ Theme Designer في بلوجر. تستخدم لتحديد المنطقة التي تتأثر بتغير هذه المجموعة من المتغيرات. يتم تحديد المكان عن طريق صندوق بلون معين حول القسم أو الجزء من الصفحة كما ترى في الصورة التالية.

تحديد جزء معين من الصفحة لعمل تغييرات عليه في مصمم بلوجر

مثال كود عمل مجموعة متغيرات في تنسيق ثيم بلوجر

<!-- Group Declaration -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[
       /**
        * Grouping the variables shown in previous example
        */
       <Group description="Codedodle Title" selector=".header">
         <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
         <Variable name="title.font" description="Title Font Styles" type="font" 
           default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
       </Group>
     ]]></b:skin>
   </head>
   ....

طريقة ظهور مجموعات المتغيرات في مصمم بلوجر

الكود السابق يظهر كيف تستخدم مجموعات المتغيرات، والصورة السابقة توضح كيف تظهر مجموعات المتغيرات في Theme Designer في بلوجر.

استخدام المتغيرات في كود تنسيق CSS

لكي تستخدم هذه المتغيرات داخل تنسيقات CSS استخدم طريقة استدعاء المتغير عن طريق وضع علامة الدولار قبل اسم المتغير $variable_name أو عن طريق استدعى المتغير بهذه الطريقة $(variable.name) كما تجد في المثال التالي.

<!-- Using the variables -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[
       /**
        * Grouping the variables shown in previous example
        */
       <Group description="Codedodle Title" selector=".header">
         <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
         <Variable name="title.font" description="Title Font Styles" type="font" 
           default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
       </Group>
   
       /**
        * CSS Style */
   
       .Header h1 a {
         color: $(title.color);
         font: $(title.font);
         text-align: center;
       }
     ]]></b:skin>
   </head>
   ....

استخدام template skin في ثيم بلوجر

يستخدم <template-skin> لنضع بها كل المتغيرات variables التي تتحكم في عرض width الصفحة وعرض أقسام الصفحة. بهذه الطريقة يمكن تغيير عرض كل أقسام الصفحة بسهولة داخل Blogger Theme Designer.

مثال على طريقة استخدام b:template-skin في ثيم بلوجر

<!-- template-skin example code -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[
       ....
     ]]></b:skin>
     <b:template-skin>
       <b:variable default='960px' name='page.width' type='length' value='960px'/>
       <b:variable default='0' name='main.sidebar.left.width' type='length' value='0px'/>
       <b:variable default='310px' name='main.sidebar.right.width' type='length' value='310px'/>
   
       body {
         min-width: $(page.width);
       }
   
       .sidebar-left {
         min-width: $(main.sidebar.left.width);
       }
   
       .sidebar-right {
         min-width: $(main.sidebar.right.width);
       }
      </b:template-skin>
   </head>
   ....

لوحة تعديل عرض أقسام الصفحة في مصمم بلوجر

أنواع متغيرات أخرى

هناك أنواع أخرى من المتغيرات التي يدعمها بلوجر. هذه المتغيرات تستخدم في مناطق أخرى داخل كود ثيم بلوجر. كما تجد في المثال التالي.

<!-- other variable types -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><<style type="text/css">
       /** Length Variable */
       <Variable name="content.padding" 
         description="Content Padding" 
         type="length" 
         default="10px" min="0" max="100px" 
         value="10px"/>
   
       /** URL Variable */
       <Variable name="body.background.gradient" 
         description="Body Gradient Cap" 
         type="url"
         default="url(https://domain.com/path/to/gradient.png)" 
         value="url(https://domain.com/path/to/gradient.png)"/>
   
       /** Background Variable */
       <Variable name="blog.background"
         color="$(content.background.color)"
         description="Background of blog paging area" 
         type="background"
         default="transparent none no-repeat scroll top center" 
         value="transparent none no-repeat scroll top center"/>
   
       /** String Variable */
       <Variable name="page.width" 
         description="Page Width" 
         type="string" 
         default="auto" 
         value="auto"/>
     </style>
     ]]></b:skin>
   </head>
   ....

الكود السابق يوضح اعلان متغيرات من النوع length و url و background و string.

انتهينا من الحديث عن كيفية إضافة تنسيقات CSS داخل ثيم بلوجر. وطرق الإستفادة من إمكانيات بلوجر في المتغيرات ومجموعات المتغيرات لتسهيل تخصيص القالب عند كل المدونين عن طريق Blogger Theme Designer دون الدخول للكود.

أتمنى أن تكون هذه التدوينة قد نالت إعجابكم مع التدوينات الثلاثة السابقة. لمزيد من المعلومات عن بلوجر وتصميم المواقع، والبرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

موقع أبانوب حنا للبرمجيات

الأقسام والموضوعات