Top Ad unit 728 × 90

recent

طريقة تعريب قوالب بلوجر


قليل منا من لم يستعن بقوالب بلوجر blogger templates من أجل إظهار محتواه المميز على الويب.. سنتكلم في هذا الموضوع عن تعريب قوالب بلوجر المجانية free blogger templates ، وذلك من أجل تصميم مدونة احترافية..

إيقاف عمل المدونة أمام الزوار

ادخل إلى قائمة التحكم في بلوجر ثم من إعدادات / أساسي: اختر في الأسفل لقراء المدونة: خاص بمؤلفي المدونة.

طريقة رفع القالب إلى مدونتك:
يتم ذلك - أصلحك الله - باختيار "قالب" في لوحة التحكم، ثم في الأعلى "نسخ احتياطي"، ورفع ملف القالب ال Xml.
ولاحظ أن مجلد القالب قد يحتوي في الغالب على صفحة فيها طريقة التعديل على عناصره المهمة كالقوائم وإعدادات الصفحات الإجتماعية، فلابد من زيارتها بعد الإنتهاء من تعريب القالب من أجل ضبطه وفق ما تريد أن تظهر عليه مدونتك (إذن يحتوى ملف القالب المضغزط على القالب نفسه وهو ملف بصيغة xml يمكنك فتحه بالنوت باد، وعلى صفحة متصفح فيها أساسيات التغيير عليه).

أهم عناصر قالب بلوجر

لنتحدث أولا عن لغة Html، هي اللغة التي نستخدم أكوادها في إنشاء وتصميم الصفحات (يعني وضع أسس للبناء).
أما اللغة CSS فنستخدم أكوادها للتزيين كالتلوين والخلفيات والصور.. إلخ.

شرح الهيكل الأساسي لقالب مدونة بلوجر:
كما ترى في الصورة التالية عندنا أربعة أجزاء أساسية، وقد توجد قوالب فيها أكثر من Sidebar واحدة، وهكذا.
والأجزاء كما هو ظاهر في الصورة هي الجزء العلوي Header، والقائمة الجانبية Sidebar، وجزء المحتوى الأساسي في المنتصف Main (أحيانا تتم إضافة كلمة فتصبح Main-wrapper)، والجزء السفلي Footer.



تبدأ أكواد صفحة بلوجر بالوسم Head، ويحتوي على معلومات الموقع الأساسية مثل اسمه ووصفه، وأكواد الميتا للكلمات المفتاحية، وغير ذلك. ولا يظهر هذا الجزء في المتصفح للزائر ولكن المتصفحات عند زيارة الموقع تبدأ به فيعطيها المعلومات الخاصة به لتنقلها إلى جواسيسها (وكل وسم له بداية ونهاية، أي مجال لوضع محتوياته فيه، مثلا: يبدأ هذا الوسم ب <html> وينتهي ب <html/> (الخط يدل على إغلاقه أو انتهائه)، ويتم وضع محتوياته بينهما، كما يتم الربط بين هذه المحتويات ومحتويات أخرى في جزء آخر من القالب عن طريق أكواد أخرى.

يليه الوسم body، وهو عبارة عن شكل الصفحة الذي نراه في المتصفح، أي أن كل محتويات الصفحة المرئية موجودة فيه بدء بالرأس وحتى الذيل.

ومن المهم جدا معرفة الوسم <div>، ويعني الحيز (أو الصندوق). وهذا الكود <div> قد يحتوي على عدة صناديق أخرى مدرجة فيه تحمل نفس الإسم <div> أيضا.

مثلا نرى غالبا في صفحة الهيدر (header أو الجزء العلوي): لوغو الموقع + صورة إعلانية. فهذا المكان مقسم إلى صندوقين div، في كل واحد منهما مواده الخاصة به، ففي الأول اللوغو، وفي الثاني الصورة الإعلانية.
وهذه الصندوقين محتويان في صندوق أكبر هو مستطيل الهيدر كله.

مثال آخر: الصندوق التالي الذي في أعلى الموقع عبارة عن div (ولا مانع من وجود div آخر أو أكثر بداخله لوضع العناصر وترتيبها كما نفعل في خانات الجداول من أجل التنظيم والتحكم بمكان العنصر من الصندوق)



ويحتوي الديف الذي في الصور أعلاه على هذه العناصر: روابط القائمة، وخانة البحث.

أما ديف الهيدر فيقع في أسفله، ويحتوي على اللوغو + صورة الإعلانات (كل منهما في div داخلي خاص به)..

وهذا مثال آخر:



مثال أيضا:
في الصورة التالية:



لاحظ أن الجزئينSidebar وMain يحويهما div واحد، فكل منهما داخل div خاص به، وهكذا بالنسبة لعناصر الهيدر والفوتر قد تكون هي الأخرى عبارة عن مجموعة من الديفات (الصناديق) التي تحتوي على عناصر خاصة بها.
وعند فتح محرر الأكواد في صفحة كروم بواسطة الضغط على المفتاح F12 ، ونقوم بالتنقل بين الأكواد يتم تظليل الديف الكلي كله وتظليل الديفات المحتواة في داخله، حسب تنقلنا بالماوس، ولهذا عند البحث عن عنصر يجب النتنقل بين الأكواد القريبة من الكود الذي وجد لك المحرر، مع النظر إلى أعلى الصفحة حيث العرض الطبيعي للموقع، حتى ترى تظليلا كاملا للعنصر الذي تريد فتعلم أنه هو المراد (وتنتقل الآن إلى يمين الصفحة لنسخ أكواده والتعديل عليها)..

ملاحظة:

في هذه الصورة



ترى أسهما متجهة إلى اليمين، عند الضغط عليها يظهر محتواها (فابحث أيضا في محتواها حتى تجد العنصر الذي تريد)..


ومن الأكواد التي ينبغي معرفتها في التعريب:
كود الإرتفاع high/ وكود العرض width، وتوضع أمامهما قيم بالبيكسل منتهية بفاصلة ونقطة.
أما كود padding، وكود margin فتشرحهما صورة السايدبار التالية:



نلاحظ أن الصورة تحتوي على div رقم 1 (الصندوق الأصفر) وهو الأكبر، ويحتوي بدوره على div2 و div3 (الصناديق الحمراء التي بداخلها الصور المعبرة عن المحتوى وهي المربعات الزرقاء).
إذن المسافة بين المحتوى والصندوق div الذي يوجد فيه تسمى padding.
أما المسافة بين صناديق ال div الداخلية وبعضها البعض فتسمى margin.

وكما تلاحظ في حالة مثالنا الأربعة قيم، الأولى منها تعبر عن المسافة العلوية، ثم اليمنى، ثم السفلى، ثم اليسرى (بهذا التتابع حسب إتجاه عقارب الساعة). فنكتب: Padding: 2px 5px 3px 8px
أما إذا تمت كتابته بقيمتين فقط مثل:
Padding: 7px 9px
فالقيمة الأولى يتم تطبيقها على المسافة العلوية والسفلية معا. أما القيمة الثانية فيتم تطبيقها على المسافة اليمنى واليسرى معا.

أما كود background فهو للخلفية، وأحيانا يكون عبارة عن لون، وأحيانا أخرى يكون عبارة عن صورة (سترى رابطها أمامه).
ويمكنك وضع صورة صغيرة للخلفية مع خاصية repeat أي أنه سيتم تكرارها حتى تملأ الفراغ.
والكلمة center تعني وضعها في الوسط.

أما font فتعني الخطوط، وتجد فيها حجمه وأنواعه (والإسم المكتوب الأول من أنواعه هو المطبق، فإذا لم يجده المتصفح ينتقل إلى النوع الثاني ثم الثالث، وهكذا)، مثال:
font: 14px; Arial,tahoma
font-familly: Arial أي الخط المختار لتطبيقه على الموقع.
font-size حجم الخط
text-align: left أي النص يبدأ من اليسار (وفي التعريب سنجعله يبدأ من اليمين لأنه عربي).
أما:
float: right فشرحها:
عندنا مثلا القائمة العلوية وفيها عدة أبواب: الرئيسية - الإسلام - الثقافة..
كما ترى هذه القائمة عبارة عن لائحة liste لذا يضعها كود html الخاص بها (ul) على شكل لائحة أي عنصر بعضها فوق الآخر، لذا عند إضافة ميزة الطواف (float) سنجعل العناصر تطفو أي ترتفع إلى الأعلى في اتجاه اليمين لتكون على شكل أفقي، هكذا: الرئيسية - الإسلام - الثقافة...
إذن في حالتنا العربية نختار: float: right (أما في حالة اللكتابة الأجنبية فهي لليسار float: left).

مثال: في العنصر التالي يظهر النص إلى يسار الصورة (رغم أن المفترض أنهما في صندوق واحد ويجب أن يكون أسفلها، يعني بدون طواف أو float: none)
إذن وجود نص إلى يمين الصورة في صندوق واحد، قد يدل على وجود طواف إلى اليمين، أي أنه تم رفعه ليظهر بجانب الصورة (متوازيا معها).

بعض الكلمات الشائعة الموجودة في القالب

header بداية القالب (ولا يظهر للزائر، وتوضع فيه معلومات الموقع + أكواد البحث)
body جسم القالب (أي محتويات الصفحة)
sidebar القائمة الجانبية (وتوضع فيها إضافات بلوجر وغيرها)
footer الصندوق السفلي (وتوضع فيه إضافات بلوجر وغيرها + حقوق الموقع) (طبعا في صناديق div)
main-wrapper صفحة المحتوى (في بعض القوالب تتم إضافة كلمة wrapper إلى هذه التسميات)
popularpostes المشاركات الشائعة

تطبيق عملي

بعد تنصيب القالب افتح مدونتك في متصفح جوجل كروم ثم اضغط على المفتاح F12 لظهور خاصية أكواد القالب في أسفل الصفحة (وأختر ظهور الأكواد في منتصف الصفحة إلى الأسفل، كذلك اختر html لتظهر أكوادها الخاصة بالقالب).



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

مثال: نقف بالماوس على اللوغو أو على الصندوق "الصفحة الرئيسية" كما يشير السهم الأول في الصورة وسنتبع الأرقام 1،2،3 بالتالي من أجل تحديد العنصر المطلوب:
إذن نقف على العنصر "الصفحة الرئيسية"، ونضغط يمينا ونختار من اللائحة Inspecteur: سيظهر لنا محرر الأكواد، ومكان الكود الخاص باللوغو في الجزء الخاص بعناصر القالب، ويجب التنقل للأعلى أو للأسف لأسطر قليلة من أجل تظليل كامل صندوق العنصر المطلوب، وسترى أثر ذلك مباشرة في الأعلى، حتى يتم تظليله كله (لأنه قد يظلل لك عنصرا واحدا منه كالنص وحده، أو الرابط الخاص به، إلخ).
بعد تظليل كود العنصر كله سترى في المتصفح أن التظليل شمل صندوق العنصر، إذن ننتقل إلى أكواد هذا العنصر والتي سنرى في الجزء الأيمن من محرر الأكواد وهو الجزء الذي تظهر فيه أكزاد العنصر المظلل كما في الصورة، وهنا سنرى خصائص العنصر، ومنها لونه، ونصه، وحجم النص، إلخ، والذي يهمنا من أجل تعريبه الخاصيتين:
align: left أو float: left أو float: left
نقوم بالنزول حتى نجد ما نريد، ونقوم بتغيير left إلى right، وسترى مباشرة في المتصفح هل تحول إلى اليمين أن لا، ولكن هذا التأثير لم يطبق على مدونتك بل هو تجريبي فقط وعلى المتصفح، وسيختفي إذا قمت بتحديث صفحته.
إذن ليتم تطبيقه على قالب مدونتك، ادخل إلى لوحة تحكم بلوجر، واختر "قالب" ثم "تحرير html"، اضغط على CTRL+F للبحث فيه عن كلمة من الكود المطلوب نسختها سابقا، تقع بجوار الكلمة التي تريد تبديلها.
أي نقوم بنسخ كلمة من صندوق المحرر (الذي ظهرت فيه أكواد العنصر المظلل / المربع الموجود في اليمين)، وننتقل إلى القالب في المدونة للبحث عنها في داخله، وعندما نجدها، مثلا: align: left أو float: lef أو float: left، نقوم فقط بالتعديل إلى اليمين أو اليسار حسب المطلوب (لأنه ليس دائما يكون التعديل إلى اليمين فقط من أجل التعريب، ولهذا تفضل طريقة التعريب خطوة خطوة على فتح ملف نوت باد للقالب، واستبدال كل الكلمات اليسارية باليمنى في ثانية).
أيضا يجب ملاحظة أنك قد تجد في القالب أكثر من كلمة تشبه الكلمة (أو الجملة) التي تبحث عنها، فتنقل بواسطة المفتاح ENTRER حتى التي تجد الكلمة المطلوبة بالضبط، وهي التي بجوارها أو أسفلها: align: left أو float: left، وعلامة على أنه الكود المطلوب كاسمه مثلا أو وسمه....
بعد التبديل وحفظ التعديلات سيتم تطبيق التغيير على قالب المدونة (ويتم وضع العنصر في اليمين).

ولتغيير لون من ألوان القالب قم بالوقوف عليه في المتصفح بالماوس وأظهر محرر الأكواد، وفي الجزء الأيمن (في المجال styles) سترى اللون وقميته فقم بنسخها فقط، وابحث عنها الآن في صفحة القالب داخل المدونة، وقم بتغييرها إلى اللون الذي تريد (مع البحث المتكرر من خلال الضغط على المفتاح ENTRER حتى تجد كل أماكن اللون المطلوب، وتغييرها كلها أو بعضها).

وهذا موقع يمكنك أخذ الألوان منه.. من هنا..

ونفس الطريقة نقوم بها من أجل معرفة صورة خلفية المدونة إن وُجدت background، نبحث عنها بمحرر الأكواد ثم ننتقل إلى القالب ونستبدل لونها إن كانت لونا، أو رابطها إن كان صورة برابط لصورتنا.

شاهد الصورة التالية من المتصفح (وهي لعنصر محدد أظهر محرر الأكواد عناصره)، لتساعدك في تحديد العنصر المطلوب عند البحث عنه داخل قالب المدونة من لوحة التحكم.


لاحظ أن ال float وغيره من وسائل التنظيم تكون أمامها النقطة في القالب، فهي التي نبحث عنها إذا انتقلنا إلى القالب في المدونة.

التعديل على الأكواد الخاصة بالهاتف:
تبدأ هذه الأكواد غالبا بالجملة:
@media only screen
علامة @ هي الأولى وتليها كلمة media.
فنقوم بنفس التغييرات التي قمنا بها سابقا في هذا الجزء من القالب إذا احتجنا لذلك.
ويمكنك فتح المدونة في الموقع التالي على الرابط التالي.. لرؤية الموقع في الهاتف والتأكد أن كل شيء مضبوط.
يمكنك فتح محرر الأكواد بالمفتاح F12 في نفس الصفحة التي يتم عرض الموقع فيها على الهاتف، والتنقل والبحث بين الأكواد، ونسخ الأماكن للتعديل عليها في القالب بنفس الطريقة السابقة (وقد لا تحتاج لذلك).

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

مشكلة سكربت المشاركات الشائعة (برنامج التعريب يحل هذه المشكلة بسرعة):

هذا السكربت ليس من القالب بل هو إضافة مضافة إليه، ويقوم بإظهار أجزاء من المواضيع + صورة صغيرة إلى اليسار، ولوضع الصورة الصغيرة في اليمين يجب البحث عن ال floate الخاص بهذا الجزء، واجعله إلى اليمين.
لكن أحيانا في بعض القوالب يكون هذا السكربت مشفرا، وأحيانا تجده مفتوحا (ولكل مشكلة حل).
إذن للعثور على هذا السكريبت، تجده غالبا فوق الوسم <head/> ، فابحث عن <head/>، وفي أعلاه ستجد ال floate من ضمن الكود الخاص بتصغير الصور في المدونة، وهو الكود الذي يبدأ بالأسطر التالية:
<script type='text/javascript'>
summary_noimg = 450;
summary_img = 375;
img_thumb_height = 150;
img_thumb_width = 200;
ثم قم يتغيير ال floate إلى اليمين.

مثال عليه:



أخيرا:
يمكنك أيضا البحث المباشر في القالب عن كلمة left واستبدالها ب right، والبحث عن كلمة float واستبدال ما أمامها، لكن عليك حفظ القالب في كل مرة لتفادي الأخطاء (وهذه الطريقة قد تساعدك في تحويل اتجاه بعض العناصر التي لم تهتدي إليها من خلال تظليل عناصر القالب مع عرض مجال العنصر الذي ستعدل عليه، مثلا: يعطيك أسماء بعص المواضع مثل sidbar، وFooter وهكذا.
طريقة تعريب قوالب بلوجر Reviewed by موقع خبر غير on يونيو 03, 2016 Rating: 5

ليست هناك تعليقات:

جميع الحقوق محفوظة ل موقع خبر © 2021
,

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

يتم التشغيل بواسطة Blogger.