كيف تُعرّب عنوان “الهيدر” في قوالب ووردبريس

يتسائل الكثير من الأخوة، وخصوصاً المبتدئين في عالم التدوين، عن طرق تعريب القوالب وتحيولها لتصبح من اليمين إلى اليسار. وبالرغم من أني شرحت في سلسلة سابقة تعريب ملفات ووردبرس إلا أني خصصت تلك الدورة لملفات ال php و لم أتطرق فيها إلى تعريب شكل وطريقة عرض المدونة، التي يحكم بها ملف التصميم أو الستايل style.css. سأشرح لك في هذه التدوينة كيف تغيّر شكل عنوان أو “لوغو” الهيدر أو أعلى الصفحة في ملفات قوالب ووردبرس ليلائم مدونتك العربية.

مما يساهم في تسهيل تعريب العنوان أنه دائماً يكون من نوعين لا ثالث لهما: إما صورة أو نص “تكست”. لذلك أول شيئ عليك أن تقوم به هو أن تحدد إذا كان “اللوجو” صورة أم نص عادي. لنعالج الآن هذين النوعين بالتفصيل:

إذا كان صورة…

إذا كان صورة فلا بد من وجود رابط لها في ملف التصميم.  تعرّف على إسم رابط الصورة.. إبحث عنه.. عادة ما يكون في أول ملف الستايل. إن لم تجده فلا بد أن يكون في ملف header.php أو functions.php. قم الآن بالخطوات التالية:

• إرفع صورة تصميمك إلى مجلد images للقالب
• غيّر رابط الصورة إلى صورتك

بالطبع، الصورة لا زالت على اليسار.. بل قد تجد أنها خرجت عن الصفحة تماماً! لا تقلق! هذا عادة متعلق بالمسار (float , direction) و الفراغات (margin) أو الخانات (padding). ستجد حميع هذه الدوال وخصائصها وقيمها – بما في ذلك رابط الصورة- مندرجة تحت كلاس “اللوجو” في ملف الستايل style.css. أنظر هذه التدوينة حول هذه الأوامر الإنسيابية المهمة.

كما شرحت في التدوينة، قم الآن بالتعديلات التالية:

• غيّر أي كلمة left إلى right
• أضف

 direction:rtl;

• إستبدل حواشي وفراغات جهة اليسار بجهة اليمين كما هو موضح في الصورة التالية:

© عبدالملك الثاري – عالم التقنية

هذه هي الفكرة الرئيسية. إفحص نتائج التعديلات هذه و عدّلها كما يناسب قالبك. أنظر المثال التالي:

إذا كان نص…

أما إذا كان العنوان هو عبارة عن نص فستجد في ملف ال css خصائص الخطوط مثل h1 و h2 كما قد يكون هناك كلاس خاص بجملة ” الوصف” description التي عادة ما تأتي تحت العنوان مباشرة. إستبدل الخطوط والأحجام لما يناسبك.

بالطبع بإستخدام نفس المبدأ في الأعلى، عليك تحويل الخطوط لتصبح من اليمين إلى اليسار. فقط أضف ال direction.

يمكنك كذلك أن تستبدل نص العنوان بصورة عبر إضافة رابطها. أنظر هذه التدوينة لمزيد من التفاصيل.

أنظر المثال التالي:

لمزيد من التفاصيل، راجع التدوينات التالية:

• تعريب القوالب: القواعد والقوانين
• تعريب ملفات ووردبرس: الدرس الأول – header.php