لاشك في أن أي مبرمج للقوالب يطمح في أن يكون القالب الخاص به متوافق مع الـ rtl و ltr في آن واحد , ماذا إن قلت لك أننا في هذا المقال سنتطرق لهذا الأمر
شرح الإتجاه في بلوجر - direction blogger
لاشك في أن أي مبرمج للقوالب يطمح في أن يكون القالب الخاص به متوافق مع الـ rtl و ltr في آن واحد , ماذا إن قلت لك أننا في هذا المقال سنتطرق لهذا الأمر ونشرحه بالتفصيل .
ماهي خاصية direction أو الإتجاه :
طبعا الكثير منا وخاصة المبتدءين في المجال لايعرفون معنى الخاصية direction مما يتوجب علينا توضيحها .. الخاصية direction تظبط إتجاه النص بحيث نستخدم rtl للإشارة إلى اللغات التي تكتب من اليمين إلى اليسار و ltr للغات التي تكتب من اليسار الى اليمين كـ اللغة الإنجليزية وذالك بإستخدام الخاصية dir على العنصر html .
في قوالب بلوجر يمكننا توليد الوضيعة rtl و ltr تلقائيا حسب اللغة المستخدمة في المدونة بحيث : يتم توليد الوضعية rtl للعربي أما ltr للأجنبي مما يسمح للمصمم ضبط المسار المناسب لكل وضعية كيفما يشاء .
يمكننا إضافة السمة dir بحيث تكون معدة تلقائيا وتتغير بتغير اللغة وذالك بإضافة expr:dir='data:blog.languageDirection' داخل الوسم <HTML> , قم بتركيب هذه السمة في المكان المطلوب كما لاننسى أننا قد إستعملنا هذه السمة في شرحنا عن أكواد الميتا تاج .
بعد تركيب السمة لاحظ من خلال فتح مصدر الصفحة عند عنصر الـ html ستجد من بين التعاريف السمة dir='rtl' وهذا في حال كانت اللغة عربية أما لو إنتقلت للغة الأجنبية من إعدادات اللغة أو ببساطة قمت بإضافة ?hl=en في أخر الرابط ستلاحظ أن السمة تغيرت إلى dir='ltr' وهذا هو المطلوب .
حسنا , المفروض الآن الفكرة تكون قد وصلت لكم لذالك فل نتحدث عن طريقة التخصيص بـ مثال عملي :
من أجل تطبيق هذا المثال يتوجب علينا إضافة كلاس - class يتغير بتغير إتجاه عرض المدونة , إتبع الشرح التالي حتى تتمكن من إضافته :
- 1 - توجه إلى بلوجر ثم المظهر - إضغط على تعديل <HTML> .
- 2 - إبحث عن وسم الفتح <body> .
- 3 - يمكن إضافتها بطريقتين بسيطتين :
الطريقة الأولى :1
أضف السمة التالية مباشرة في الـ <BODY> : expr:class='data:blog.languageDirection'
بحيث تكون بالشكل التالي :
الطريقة الثانية :1
والتي سـ نستعمل فيها العلامة <b:class> التي تسمح لنا بإضافة قيمة في السمة class مفردة .
- لإضافتها فقط نقوم بإضافة العلامة <b:class expr:name='data:blog.languageDirection'/>
تحت وسم فتح <BODY> مباشرة بحيث تكون بالشكل التالي :
بعد إضافتها ستلاحظ من خلال فتح المصدر إضافة كلاس يتغير بتغير لغة العرض .
الآن هيا نفترض أن عندنا عنصر ما نعمل عليه ونريد أن نجعله متوافق مع لغتي العرض .. وليكن زر تحميل مثلا , وهو الذي يظهر أمامك في المعاينة أسفله و class الخاص به هو .mtec-btn فـ إذا كانت لغة العرض عربية rtl نضع الزر في الجهة اليمنى فـ الكود الخاص بها سيكون بالشكل التالي :
-
.rtl .mtec-btn {float: right;}
-
أما إذا كنا في لغة العرض الإنجليزية مثلا ltr نقوم بوضع الزر في الجهة اليسرى ويكون الكود بهذا الشكل :
-
.ltr .mtec-btn {float: left;} -
أتمنى أن تكون الفكرة واضحة فـ في نظري الشرح بسيط ومفهوم يتطلب فقط بعض التركيز ( الخلاصة : في كل مرة نصمم أداة نقوم بإستخدام الكلاس المناسب لذالك الإتجاه . ) وطبعا في مدونتنا نضع بلوجر أول إهتماماتنا ونسعى جاهدين في سبيل تطويرة أكثر .
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS