خطوات تعريب قوالب ووردبريس

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

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

الخطوة الأولى: تنزيل القالب وتعريب ملفات php

أقوم أولاً بتنزيل مجلد ملفات القالب على حاسوبي وأفتحها جميعاً بإستخدام المحرر. ثم أبدأ عادةً بملفات ال php مثل single.php وأقوم بتعريب كل الكلمات النصيّة. تجد هذه الجمل والكلمات بين فواصل علوية عادة (فاصلة واحدة على كل جهة) أو بين أقواس <p> </p> أو <a> </a> بالنسبة للروابط. لاحظ كذلك أن أغلب الكلمات التي تحتاج إلى تعريب هي باللون الأسود. بالطبع هناك كلمات أخرى بألوان مختلفة كذلك… ولكن أغلبها بالأسود. قد تستصعب هذا الأمر إذا لم تكن ملماً بلغة ال php ولكني أنصحك أن تقوم به وأن تتعلم عبر التجربة و الخطأ. فأنا شخصياً حين بدأت مشواري مع ووردبرس لم أكن أعرف php على الإطلاق، و كل ما تعلمته كان عبر التجربة والخطأ.

قم الآن بتعريب كل ملفات php التي يحتويها القالب بنفس الطريقة مع إستخدام الكلمات العربية الموازية بالطبع.  أنظر إدراج الكلمات التي تحتاج إلى ترجمة في هذه التدوينة. لا تترك أي ملف دون تعريب، وتأكد أنك لم تغيّر أي كود لا يحتاج للتعريب. يمكنك إختبار التغييرات التي أجريتها على القالب أولاً بأول بإستخدام أحد الإضافات كما شرحت لك سابقاً.

لمزيد من التفاصيل راجع دورة تعريب ملفات ووردبرس.

الخطوة الثانية: تعريب ملف style.css

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

أولاً لا بد أن يحتوي كل قالب على تعريف لنوع الخطوط h1 h2 h3 إلخ وأحجامها. قم بتعديل هذه إذا رغبت. أنا شخصياً أقوم دائماً بتغيير الخط إلى Tahoma وتعديل الأحجام إذا كان ذلك مطلوباً. بعد ذلك أقوم بإجبار جميع الخطوط على العرض من اليمين لى اليسار عبر إستخدام:

direction:rtl;
text-align:right;

إختبر كل خطوة واحدة واحدة وشاهد نتائج التغييرات التي قمت بها.

ثانياً لا بد أن يحتوي الكود على menu. ستلاحظ أن هذه على اليسار وأنا أنصح عادة بوضعها على اليمين عبر تغيير كلمة left إلى right أو وضع الكود التالي:

float:right;

هذه خطوة مهمة. قم بإختبار التغييرات وتأكد أنها تعمل. إذا لم تعمل (بسبب خاصية الفراغات مثلاً) حاول وضعها في الوسط عبر إستخدام كلمة center بدل right.

ثالثاً كل قالب يحتوي على خانة بحث. قد تكون هذه على اليمين وقد لا يحتوي الكود على خاصية float. أضف هذه الخاصية وأجعل إتجاه الخط بالعربي كما شرحت في الأعلى.

رابعاً غيّر خاصية logo أو header. إذا كان القالب يحتوي على شعار هو عبارة عن صورة عليك تغييرها (سأشرح لك ذلك في الخطوة القادمة). على أية حال، ضع خاصية float و direction وتأكد أن الشعار في الموقع الصحيح.

خامساً سيحتوي القالب على أقسام content أو post أو page أو جميعها. قم بإضافة خاصية ال direction في المواقع المناسبة. لاحظ أنه قد لا تحتاج هنا إلى تعديل خاصية float من اليسار إلى اليمين لأن موقع المحتوى هو في اليسار حقيقةً خصوصاً ذا كانت القائمة الجانبية sidebar على اليمين. بالطبع يمكنك تعديل القائمة الجانبية لتصبح على اليمين عبر جعل float تساوي right.

أخيراً تأكد أنك لم تغيّر alignleft. و alignright. وأبقيها كما هي. هذه نقطة مهمة.

الآن نأتي إلى القائمة الجانبية sidebar والتعليقات comments. إبدأ بتحويل كل كلمات left إلى right وإضافة خاصية direction:rtl في المواقع المناسبة. يمكنك تحديد هذه المواقع عبر التجربة والخطأ إذا لم تفهم لغة css. ستلاحظ أن هناك أوامر خاصة بالفراغات تسمى margin و padding. هذه الأوامر تحدد مسافة الشيء بالإتجاهات الأربعة (الأعلى اليمين الأسفل واليسار) كما هو موضح في الصورة التالية:

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

أخيراً عليك تعديل أسفل الصفحة أو footer. أنا شخصياً أفضل وضعه في منتصف الصفحة. للقيام بذلك أضف الكود التالي:

float:center;
text-align:center;

الخطوة الثالثة: تعريب الصور والإيقونات

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

أما إذا كان القالب يحتوي على صور وأيقونات ساكنة غير متحركة فقط فعملية التعريب ستكون أسها. أولاً حدد ما إذا كنت ستسخدم نفس الصورة أم أنك تحتاج إلى صورة مختلفة. إذا كانت الصورة مختلفة فقم برفعها إلى مجلد images واستبدل الصورة القديمة بها. أما إذا كان من الممكن تحرير الصورة (عبر قلبها مثلاً لتصبح من اليمين إلى اليسار) فقم بفتحها بإستخدام برنامج تحرير الصور الذي تحبذه وقم بتعديلها (أنا أستخدم برنامج بسيط إسمه Preview). إحفظ الصور بعد التعديل تحت نفس الإسم وأرفعها إلى مجلد images بإستخدام برنامج FTP. سيطلب منك البرنامج أن تؤكد إستبدال الصور الموجودة فيه. قم بتأكيد ذلك وستظهر لك الصور المعرّبة.

أخيراً، في حال كانت الصورة الأيقونة الموجودة في القالب مناسبة لك ولكنها على اليسار بد اليمين، فكل ما عليك القيام به هو إضافة كلمة right للكود المتعلق يها. أتظر المثال التالي:

background: #eaeed2 url(images/download.gif) no-repeat <span style="color: #993300;">right</span> 1px;

يمكنك كذلك تحديد موقع الصورة أو الأيقونة عبر تعديل أو إضافة مسافات البكسلات.

الخطوة الرابعة: إختبر إختبر إختبر..

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

أخيراً إختبر القالب على جميع المتصفحات وليس على فيرفوكس لوحده. قد تجد أن عرض القالب يختلف من متصفح إلى آخر. قم كذلك بإختبار القالب على موقع W3C وتأكد أنه يراعي قياسات  css و html العالمية.