شرح طريقة تعريب قوالب ووردبريس

رشيد بيدوسي · #1 11-26-2006, 01:17 PM

السلام عليكم ورحمة الله وبركاته

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

يمكن تكون هناك نقاط لم أذكرها بشكل دقيق او نقاط
نسيتها وكل أخ او أخت يستطيع أن يحسّن هذا الموضوع
مدعو للكتابة او لمراسلتي لتعديل الموضوع حتى تكون
الفائدة من هذا الشرح كبيرة قدر الامكان.

خطوات أولية عليك إعدادها قبل بدء التعريب:

1.
إختيار قالب معيّن للتعريب.
هنالك قوالب انجليزية كثيرة على هذا الرابط:
http://themes.wordpress.net/
كبداية مفضل ان تختار قالب بسيط حتى نتعلم ونتقن الشيئ.

2.
تركيب سيرفر محلي على الجهاز.
حتى نفحص التغييرات على الجهاز بدلا من فحصها على الشبكة ,
وهذا يضمن سهولة وسرعة في العمل.
هذا الموضوع يفيد بالنسبة لتركيب سيرفر محلي:
http://www.ar-wp.com/showthread.php?...D3%ED%D1%DD%D1

3.
برنامج لمعالجة ملفات المدونة يعمل بترميز utf-8
شخصياً أستعمل برنامج notepad ++
موجود هنا: http://www.ar-wp.com/showthread.php?...hlight=notepad

4.
بعد ان قمنا بتركيب السيرفر المحلي وركبنا المدونة عليه واخترنا القالب نبدأ بالعمل.

بداخل مجلد القالب الذي اخترناه توجد ملفات php و css وصور. كلها مسؤولة
عن الشكل الخارجي للقالب.

______________________________________

بالنسبة لملفات ال php علينا تغيير الكلمات الانجليزية الى العربية وتغيير تركيبة اليوم والتاريخ.
نفتح الملفات بواسطة برنامج nptepad ++ ونغير الترميز
الى utf-8 (من FORMAT) ونبدأ بالترجمة.
نحن لا نغيّر كل الكلمات الانجليزية للعربية.
فقط الكلمات التي تظهر بالمدونة.
مثلاً:

كود:

<h2 class="posttitle" align="right"><?php _e('Not Found'); ?></h2>
        <p align="right"><?php _e('Sorry, but no posts matched your criteria.'); ?></p>
        <?php include (TEMPLATEPATH . '/searchform.php'); ?>

بعد التعريب:

كود:

<h2 class="posttitle" align="right"><?php _e('Not Found'); ?></h2>
        <p align="right"><?php _e('عذراً , لم يتم العثور على نتائج مناسبة'); ?></p>
        <?php include (TEMPLATEPATH . '/searchform.php'); ?>

هنالك كلمات انجليزية ممنوعون من تغييرها للعربية
وهي كلمات او اوامر مسؤولة عن برمجة القالب.

عندما تستعمل برنامج notepad++ فهو يظهر لك الكلمات
القابلة للتعريب حيث يكون لونها رمادي فاتح وتكون بين فواصل علوية مثل هذه ' او هذه ".

كود:

            <div class="postentry">
                <?php the_content(__('Read the rest of this entry &raquo;')); ?>
                <?php wp_link_pages(); ?>
            </div>

في ملفات ال PHP علينا أيضاَ تغيير تركيبة التاريخ. بالانجليزية يكون على هذا النمط:

كود:

('F jS, Y')

حتى يلائم العربية نغيره الى:

كود:

’j F, Y‘

______________________________________

بعد ان انتهينا من تعديل ملفات PHP ننتقل الى ملف الستايل: STYLE.CSS
هذا الملف مهم جدا وهو عمليا مسؤول عن الشكل الخارجي للمدونة من ناحية الاتجاهات (يمين شمال).
اذا اردت ان تتعمق بال CSS هنالك كتاب عربي يشرح لك ذالك خطوة خطوة تجده هنا:
http://www.ar-wp.com/showthread.php?...t=%DF%CA%C7%C8

طبعا لازم تكون عندك خلفية معينة عن ال CSS ولو كانت بسيطة.

العمل على هذا الملف يكون أسهل وعملي أكثر من الترجمة.

1.

لتغيير اتجاه الصفحة من اليسار لليمين نتوجه الى قسم ال body في
ملف الستايل ونضيف اليه direction: rtl; كالتالي:

كود:

body {
    margin: 0;
    padding: 0;
    background: #4E5706 url(images/bg.gif);
    color: #000;
    font-size: x-small;
    font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
    text-align: center;
    voice-family: "\"}\""; 
    voice-family: inherit;
    font-size: small;
    direction: rtl;
}

2.

الان نصل الى تغيير الاتجاهات يمين يسار في تصميم القالب
مثل العناوين القوائم وما الى ذالك ...

نبحث عن الكلمات left او right ونغيرها حسب الحاجة.

مثلا:

كود:

}
#header {
    margin: 0 auto;
    width: 765px;
    height: 85px;
    background: url(images/header.gif) no-repeat;
    text-align: left;
    overflow: hidden;
}

نشاهد باللون الأحمر أنّ الانحياز او اتجاه الخط هو لليسار.
اليسار يلائم اللغة الانجليزية ونحن نحتاج العربية.
لذالك نغيّر left الى right.

من المهم ذكره انه توجد كلمات left أو right يمنع تغييرها بتاتا
لانها لا تكون ضمن المتغيرات التي يمكن ان نعدل عليها.

مثلا هنا لا نغير كلمة RIGHT بالمرة:

كود:

#wp-calendar caption {
    margin: 1.2em 0 0 0;
    padding: 0.4em 0;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    background: url(images/sidebarheader.gif) no-repeat 50% -2px;
    color: #212503;;
    font-weight: bold;
}

والسبب هو ان كلمة right تشير الى
جزء معين من القالب (اسم) وليست ضمن
المتغيرات.

3.
بالنسبة لل margin, border,padding (في كتاب شرح ال css الذي ذكرته بالبداية يوجد شرح
لهذه المتغيرات) فهذه المتغيرات الثلاث ممكن ان تلبس أكثر من صورة.
ما يهمنا هو الصورة التي يظهر بها 4 ارقام حيث نبدّل الرقم الثاني
مع الرقم الرابع.

مثال قبل التغيير:

كود:

#content {
    float: right;
    padding: 0 38px 0 23px;
    width: 538px;
    background: url(images/content.gif) no-repeat 100% 0;
    voice-family: "\"}\""; 
    voice-family: inherit;
    width: 477px;
}

وبعد التغيير:

كود:

#content {
    float: right;
    padding: 0 23px 0 38px;
    width: 538px;
    background: url(images/content.gif) no-repeat 100% 0;
    voice-family: "\"}\""; 
    voice-family: inherit;
    width: 477px;
}

هذه الأرقام الاربعة تصف المتغيرات بالنسبة لفوق يمين تحت يسار حسب الترتيب.
ما يهمنا هو يمين يسار ولذالك غيرنا الثاني والرابع فقط.

4.

في القالب محتمل تكون قوائم على شكل صورة.
بشكل عام تغيير الاتجاه من اليسار لليمين يحل المشكلة.
لكن احيانا المشكلة تبقى ويمكن حلها بواسطة:

قبل التغيير -

كود:

background: url(images/bullet.gif) no-repeat;

لتغيير اتجاهها -

كود:

background: url(images/bullet.gif) right no-repeat;

5.

الخطوط - نبحث عن font-family وعن font-size لتغيير
نوع الخط وحجمه.

بهذا نكون قد انتهينا من ملف الستايل.

______________________________________

الان نقوم بتغيير اتجاه الصور من مجلد ال Images.
يعني نعمل للصورة flip افقي بواسطة برنامج لمعالجة الصور.
مثال على قبل وبعد:
http://www.ar-wp.com/attachment.php?...1&d=1164545793

بهذا نكون قد انتهينا.
ان شاء الله انه الشرح يفيدكم.

أبو حمزة المدني · #2 11-26-2006, 03:24 PM

يعطيك الف عافية

جاري التطبيق إن شاء الله

بوجسووم · #3 11-26-2006, 03:41 PM

جزاك الله خير اخوي رشيد على الشرح الطيب والحين راح اطبق الشرح وان شاء الله ننجح في التعريب

..

K.. · #4 11-26-2006, 06:53 PM

السلام عليكم
شو المقصود بالجمله في الخطوه ٢

اقتباس:

تركيب سيرفر محلي على الجهاز.

ارجو التوضيح و التبسيط

رشيد بيدوسي · #5 11-26-2006, 07:05 PM

ابو حمزة و souqonline : جزاكم الله خير

اقتباس:

المشاركة الأصلية كتبت بواسطة K..

السلام عليكم
شو المقصود بالجمله في الخطوه ٢

ارجو التوضيح و التبسيط

يوجد رابط يصف الموضوع بشكل كامل

يعني بدل لا تكون التجارب على الموقع اللي على شبكة الانترنت ستكون على الموقع على الجهاز.

وهذا افضل واسرع للشغل.

moieu · #6 11-26-2006, 09:51 PM

جهد رائع رشيد... من زمان ننتظرك!

عبدالله العتيبي · #7 11-27-2006, 07:43 PM

جزاك الله خير أخوي رشيد..

شرح مختصر وجميل..

تقبل تحيتي

محبك

K.. · #8 11-28-2006, 04:42 PM

اخوي كيف اغير الترميز؟؟
ونغير الترميز
الى utf-8 (من FORMAT) ونبدأ بالترجمة.

على اي برنامج مب بالخصوص توت باد!! مثلا فرونت بيج او دريم ويفر؟؟

K.. · #9 12-16-2006, 11:57 AM

انتظر الرد؟؟؟

رشيد بيدوسي · #10 12-18-2006, 12:32 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة K..

اخوي كيف اغير الترميز؟؟
ونغير الترميز
الى utf-8 (من FORMAT) ونبدأ بالترجمة.

على اي برنامج مب بالخصوص توت باد!! مثلا فرونت بيج او دريم ويفر؟؟

لم استعمل برامج التصميم في التعريب ولا اعرف اذا في امكانية. لماذا تستعملها ؟

ركب برنامج نوت باد بلوس وغير الترميز من قائمة format

فراس · #11 12-18-2006, 01:56 PM

جزاك الله كل خير...

سؤال: ليش utf-8 وليس windows-1256???

ENG-SAAD · #12 01-09-2007, 10:51 AM

سؤالي هو : ماهو افضل متصفح استخدمه عندما اريد التشيك على المدونة علما ان هذا المتصفح اذا رايت فيه التعريب ظهر بالشكل المطلوب يكون كذلك على باقي المتصفحات؟؟

ارجوا أن تكونوا فهمتو السؤال؟؟

ودمتم سالمين

رشيد بيدوسي · #13 01-09-2007, 11:16 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة eng-saad

سؤالي هو : ماهو افضل متصفح استخدمه عندما اريد التشيك على المدونة علما ان هذا المتصفح اذا رايت فيه التعريب ظهر بالشكل المطلوب يكون كذلك على باقي المتصفحات؟؟

ارجوا أن تكونوا فهمتو السؤال؟؟

ودمتم سالمين

الاكسبلورير.

م.س. احجيوج · #14 01-09-2007, 12:22 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة رشيد

الاكسبلورير.

قطعًا لا. أي متصفح آخر سيظهر التصميم بشكل أقرب إلى الصحيح، أكثر من الاكسبلورر. هذا الأخير هو أسوء متصفح على الإطلاق.

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

ENG-SAAD · #15 01-09-2007, 02:31 PM

بصراحة الاكبلور 5 أو 6 يظهر الوردبيرس بشكل مقرف..

الجديد النسخة السابعة تمام صراحة احس انه متوافق معاه..
الفايرفوكس حلو ..

لكن الاكسبلورر لا يظهر كما في الفايرفوكس او العكس؟؟

رشيد بيدوسي · #16 01-09-2007, 06:26 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة م.س. احجيوج

قطعًا لا. أي متصفح آخر سيظهر التصميم بشكل أقرب إلى الصحيح، أكثر من الاكسبلورر. هذا الأخير هو أسوء متصفح على الإطلاق.

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

كلامك سليم اخ محمد. لكن ماذا تفعل عندما 90% يستخدمون هذا المتصفح ؟ (الذي كرهته حقيقة وانا استعمل الفايرفوكس).

Adham · #17 01-12-2007, 03:39 PM

رائع يارائع

الله يوفقك سنحاول التطبيق

م.س. احجيوج · #18 01-13-2007, 12:41 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة رشيد

كلامك سليم اخ محمد. لكن ماذا تفعل عندما 90% يستخدمون هذا المتصفح ؟ (الذي كرهته حقيقة وانا استعمل الفايرفوكس).

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

الحل في رأيي هو التشجيع على الانتقال إلى اللينكس. تشجيع محالات بيع الحواسيب على تثبيت اللينكس بدل الوبندوز. كتابات مقالات تعريفية باللينكس... إلخ.

MaXeR · #19 01-17-2007, 03:35 PM

اقتباس:

القابلة للتعريب حيث يكون لونها رمادي فاتح وتكون بين فواصل علوية مثل هذه ' او هذه ".

هل أعربها جميعها ..
أقصد هل تعريب كل الكلمات الرمادية يؤثر في الكود
أحد القوالب اللتي عربتها انت يوجد بها كلمات ملونة بالرمادي لم تعرب .. هل تركتها خطأ أو سهواً أم أن تعريبها يؤثر على القالب؟

رشيد بيدوسي · #20 01-17-2007, 04:14 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة MaXeR

هل أعربها جميعها ..
أقصد هل تعريب كل الكلمات الرمادية يؤثر في الكود
أحد القوالب اللتي عربتها انت يوجد بها كلمات ملونة بالرمادي لم تعرب .. هل تركتها خطأ أو سهواً أم أن تعريبها يؤثر على القالب؟

في أشياء أتركها لأنها لا تظهر.

LuJaIn · #21 02-16-2007, 03:48 AM

جزاكم الله خيراً

اقتباس:

3.
بالنسبة لل margin, border,padding (في كتاب شرح ال css الذي ذكرته بالبداية يوجد شرح
لهذه المتغيرات) فهذه المتغيرات الثلاث ممكن ان تلبس أكثر من صورة.
ما يهمنا هو الصورة التي يظهر بها 4 ارقام حيث نبدّل الرقم الثاني

#content {
float: right;
padding: 0 23px 0 38px;
width: 538px;
background: url(images/content.gif) no-repeat 100% 0;
voice-family: "\"}\"";
voice-family: inherit;
width: 477px;
}

هل التغيير يكون على الكونتينت فقط ؟
لأنه يوجد عندي أربعة أرقام في :

اقتباس:

h2 {
font: 95% "Times New Roman", Times, serif;
letter-spacing: 0.2em;
margin: 15px 0 2px 0;
padding-bottom: 2px;

،

أيضاً ، الكونتينت عندي هكذا :

#content {
margin: 5px;
/* float:left; */
padding-right: 6px;
width: 75%;

هل أغيّر الليفت إلى رايت ( المكتوبة بالأخضر ) ؟

،

اقتباس:

الان نقوم بتغيير اتجاه الصور من مجلد ال Images.
يعني نعمل للصورة flip افقي بواسطة برنامج لمعالجة الصور.

ممكن توضيح أكثر ؟
- مامعنى فليب أفقي ؟
- و مالمقصود ببرامج لمعالجة الصور ؟ < هل هي الفوتوشوب ونحوها ؟

MaXeR · #22 02-16-2007, 04:20 PM

اقتباس:

- مامعنى فليب أفقي ؟
- و مالمقصود ببرامج لمعالجة الصور ؟ < هل هي الفوتوشوب ونحوها

فليب أفقي يعني عكس الصورة بحيث اليمين يصبح يسار والعكس
برامج معالجة الصور هي الفوتوشوب والجيمب والفيرووكس وما يماثلها

FahadOnline · #23 02-27-2007, 10:56 AM

أخي ممكن توضحلي أكثر ما الفرق بين صيغ التاريخ
('F jS, Y') ’j F, Y‘

phparabic · #24 03-22-2007, 08:49 PM

مساكم الله بنور شباب

فيه شي مهم لتعريب اي قالب من القوالب او الأستايلات بجميع انواعها واشكالها..

وهو اتجاه الصفحات لكي تكون مناسبة للغة العربية وترميز لقراءة الصفحات بشكل صحيح.

اولاً لتعريباي قالب ادخل على مجلد الأستايل وفتح ملف :header.php

تجد في اعلا شيئ هذي السطرين:

كود PHP:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

يتم تغييرا الى هذا :

كود PHP:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="ar" xml:lang="ar">

وباقي اتعريب مثل ما شرحة اخي رشيد

وبالله التوفيق

امير · #25 03-26-2007, 08:51 PM

اعزائي في المنتدى
هل من تعريف بماذا تعني المدونات / الوورد برس /
وهل المدونات لا توجد جاهزة على بعض برامج التصميم مثل دريم ووفر
الا يوجد رابط لدومين مجانا لقد صممت موقعا على موقع استضافة مجاني وابحث عن دومين مجاني
وجزاكم الله خيرا

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
[ استفسار ][ مشكلة] تعريب قوالب ووردبريس	SUBSWISS	قوالب ووردبريس - عام	5	07-08-2009 03:51 PM
[ استفسار ] تعريب قوالب ووردبريس	SUBSWISS	قوالب ووردبريس - عام	6	05-11-2009 09:15 PM
قوالب ووردبريس للتحميل	Techno-Man	معرض القوالب	3	03-28-2009 04:29 AM
هل هناك قوالب ووردبريس المجانيه؟؟	حتومي	مدونات ووردبريس المجانية	4	09-22-2008 02:27 AM
[طلب] شرح طريقة تعريب إضافات ووردبريس	hamido2008	طلبات الإضافات / طلبات تعريب الإضافات	7	07-23-2008 04:15 PM

هؤولاء الاعضاء يشكرونك يا رشيد بيدوسي على هذه المشاركة:
Abadi22 (12-27-2009), aboanas93 (08-14-2009), لجيتوني (05-30-2010), alfakieh (05-09-2009), مريم الانصاري (05-07-2011), Arash.Ajdary (05-02-2010), Athekra Support (09-12-2009), أفيــــاء (10-21-2010), aymooonalex (02-15-2010), منيره المطيري (07-31-2010), bader_max (06-26-2010), اللجي (04-14-2009), البغدادي (08-27-2011), الجالي (10-31-2010), الشوق (04-18-2010), الصقر (12-20-2008), ابو النوور (04-11-2011), ابو خليل (04-12-2009), drbarakota (09-29-2010), بديع (06-22-2010), بنت الاكارم (07-29-2011), feonase (08-05-2009), gsmegypt (12-26-2011), gt2 (05-03-2009), mhdfadhil (01-11-2012), mwafi (12-25-2009), Omar.ite (06-16-2010), oner (04-28-2009), oussama1942 (01-01-2011), q8patriot (07-13-2011), Safia (01-01-2010), Story-WD.com (12-18-2011), T.REX (01-22-2010), Theeb_Q6r (06-12-2010), the_wizard (10-12-2008), turaifi (11-26-2009), غالي هواك (09-21-2009), غراب (01-27-2009), was955 (01-16-2012), نجم المحبه (08-03-2009), وكالة 18 نوفمبر (01-23-2010)

هؤولاء الاعضاء يشكرونك يا رشيد بيدوسي على هذه المشاركة:
ArAbTi (08-04-2009), krikab (05-15-2009), سفير الجزيره (05-19-2009)

phparabic, تمّ شُكرك على هذه المشاركة من قبل الأعضاء:
zezOo (04-30-2011)

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)