[الدرس الثالث] دورة تعريب قوالب بلوجر (خطوات التعريب)

نشر بتاريخ :- 02-01-2014

₪ أداة الخنفساء (firebug) للفايرفوكس للمساعدة في التعريب :

لقد شرحت هذه الأداة في تدوينات سابقة أرجو متابعتها لكي نبدأ التطبيق معاً :

لكي نقوم بالتعريب بشكل جيد هناك 5 مراحل في هذه الدورة لتعلم التعريب ، قمت بتقسيمها حتى يسهل فهمها وتكون كل مرحله منفصله لكي تتجاوزها إذا كانت لديك خلفية مسبقة عنها وهي كالتالي :

♥ المرحلة الأولى ـ تغيير اتجاه النص إلى الجهة اليمنى .

♥ المرحلة الثانية ـ تعريب الكلمات .

♥ المرحلة الثالثة تعديل الهوامش .

♥ المرحلة الرابعة : تغيير نوع الخط .

♥ المرحلة الخامسة والأخيرة : التعليقات ومشكلة الهوامش .

سنشرح كل خطوه بالتفصيل بإذن الله تعالى ..

-المرحلة الأولى ـ تغيير اتجاه النص إلى الجهة اليمنى :

هناك 3 خطوات فقط لتغير اتجاه النص في هذه المرحلة :

1 . تغيير اتجاه النص في العنوان الرئيسي لهيدر المدونة و الجزء الخاص بوصف المدونة ( #header-wrapper ) .

2 . تغيير اتجاه النصوص بشكل كامل عن طريق الغلاف الخارجي للمدونة (#Outer wrapper) .

3 . تغيير اتجاه القائمة العلوية للمدونة .

سنشرح كل خطوة بالتفصيل قدر الإمكان :

•أولاً : تغيير اتجاه النص في العنوان الرئيسي لهيدر المدونة :

سنستخدم الأمر ( text-align: right ) لتغيير اتجاه النص ، ما عليك سوى التوجه إلى :

" لوحة التحكم الرئيسية " ثم " تصميم " ثم " تحرير HTML ".

ثم نضع علامة عند مربع توسيع قوالب عناصر واجهة المستخدم ..

وبعد ذلك نضغط من لوحة المفاتيح على (ctrl + f ) لكي نستخدم محرك بحث خاص بالمتصفح ليساعدنا على البحث عن الأكواد ..

الآن ألصق في محرك البحث هذا الأمر :

#header {

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

اضغط على الصورة لتكبيرها

#header{color: $pagetitlecolor;text-align :right;}

• ثانياً : تغيير اتجاه النصوص بشكل كامل عن طريق الغلاف الخارجي للمدونة :

الغلاف الخارجي ( Outer wrapper # ) : هو الذي يضم كلاً من الهيدر (header) ومنطقة التدوينات (post) بما في ذلك التعليقات (comments) والقائمة الجانبية للمدونة (sidebar) والفوتر (footer) ، هذه صورة توضيحية :

يكفي أن نلصق كود خاصية محاذاة النص لجهة اليمين حتى تتحول النصوص في المدونة إلى اليمين ، والآن ابحث في قالبك عن :
Outer wrapper # لكي تقوم بلصق خاصية محاذاة النص لليمين كما هو موضح هنا باللون الأحمر :

#outer-wrapper{

font: $bodyfont;

margin:0 auto;

text-align: right;

width:960px;

}

• ثالثاً : تغيير اتجاه القائمة العلوية للمدونة :

القائمة العلوية هي التي تحمل صفحات المدونة مثل ( الرئيسية – من نحن – اتصل بي .. إلخ ) ، لهذه القائمة مسميات مختلفة في كود القالب لذا من الأفضل استخدام أداة firebugلتحديدها من أجل اجراء التغييرات عليها ، فكل مصمم وضع لها اسماً من اختياره ، وهذه بعض المسميات أو لنقل الأوامر أفضل :

القوائم تستخدم العنصر ul ولابد لها من فقرات بداخلها ، وهذه الفقرات يرمز لها بـ li ، لذا فإن كلمة ( من نحن – اتصل بنا .. إلخ ) هي الفقرات ، أكثر القوالب يتم تغيير اتجاهها لليمين من خلال الفقرات li ، وبعض القوالب تضطر أن تغير اتجاه القائمة ul لتكون في اليمين ، لذا يجب أن يقع اختيارك أولاً على الأوامر التي تحتوي على li أو اترك المهمة لأداة الخنفساء فهي ستقوم بذلك بدقة .
هذه المرة سنستخدم خاصية float لأننا كما ذكرنا القوائم نستخدم معها دائماً خاصية التعويم ، وليس خاصية محاذاة النص كما كنا نفعل بالسابق .

الآن ابحث عن هذا الأمر في القالب crosscol .PageList li, .footer .PageList li (طبعاً أخذت الأمر بمساعدة الخنفساء) ثم من float غير القيمة left واستبدلها بـ right :

.crosscol .PageList li, .footer .PageList li{

background: none repeat scroll 0 0 transparent;

float: right;

list-style: none outside none;

margin:0;

padding:0.75em;

}

النتيجة :

طبعاً قد تجد قوالب لا تحتوي على هذه الأوامر كما ذكرت وذلك لأن مصمم القالب اختار لها أسماء أخرى ، فالحل هو استخدام أداة firebug الخاص بمتصفح الفايرفوكس لإيجاد المربع الخاص بالهيدر والخاص بالغلاف الخارجي للقالب ، عندها لن تواجه مشاكل في اختلاف المسميات .

الآن استطيع أن أقول لك أنك انجزت 99% من خطوات التعريب وهي الأهم بقي
تعريب الكلمات وبعض الهوامش وهذا أمرها سهل جداً .

اعتذر من الجميع على التأخير في طرح الدرووس
اتمنى إلتماس العذر لي >.<
واي استفسار اتمنى طرحه وإذا كان هناك فقره غير واضحه لا تتردد في السؤال حتى أقوم بالتعديل عليه

في أمان الله ورعايته

شبكة ديفي نت التطويرية

اهلا وسهلا بكم في شبكتنا

المواضيع الأخيرة

[الدرس الثالث] دورة تعريب قوالب بلوجر (خطوات التعريب)

[الدرس الثالث] دورة تعريب قوالب بلوجر (خطوات التعريب)

الردود

دعم احلى منتدى

التصميم والجرافيكس

مدونات بلوجر

روابط مهمة