منتدى جلاكسو

متصل صلاح دويدار

  • الموظفين
  • *******
  • المشاركات :1,600
  • عضويه: 29486
  • تاريخ التسجيل : 08/05/2013 » 03:42:am
الشرح الكامل لتعريب قوالب ووردبرس WordPress
 (شوهد 2547 مرات)
« : 27/08/2013 » 04:57:pm »
السلام عليكم ورحمة الله وبركاته

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

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

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

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

2. تركيب سيرفر محلي على الجهاز.
حتى نفحص التغييرات على الجهاز بدلا من فحصها على الشبكة ,
وهذا يضمن سهولة وسرعة في العمل.
تحميل سيرفر محلي:
التحميل من هنا

3. برنامج لمعالجة ملفات المدونة يعمل بترميز utf-8
شخصياً أستعمل برنامج 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 هنالك كتاب عربي يشرح لك ذالك خطوة خطوة تجده هنا:
التحميل من هنا

طبعا لازم تكون عندك خلفية معينة عن ال 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 افقي بواسطة برنامج لمعالجة الصور.
مثال على قبل وبعد:


باسورد فك الضغط

NoAvatar

غير متصل باسم سلطان

  • عضو
  • *
  • المشاركات :14
  • عضويه: 29484
  • تاريخ التسجيل : 07/05/2013 » 11:10:pm
رد : الشرح الكامل لتعريب قوالب ووردبرس WordPress
 (شوهد 2547 مرات)
« رد #1 : 23/09/2013 » 08:34:am »
 مجهود ممتاز يامان انا بركب سكربت الوردبرس العربى وبركب عليه اى ثيم بلاقي الثيم اتعرب وبيمشى الحال
سجل

متصل صلاح دويدار

  • الموظفين
  • *******
  • المشاركات :1,600
  • عضويه: 29486
  • تاريخ التسجيل : 08/05/2013 » 03:42:am
رد : الشرح الكامل لتعريب قوالب ووردبرس WordPress
 (شوهد 2547 مرات)
« رد #2 : 11/10/2013 » 08:33:am »
الف شكر باسم ردك نور الموضوع

NoAvatar

غير متصل uaiwejuf

  • عضويه فضيه
  • ***
  • المشاركات :1,650
  • عضويه: 28990
  • تاريخ التسجيل : 12/11/2012 » 02:36:pm
رد : الشرح الكامل لتعريب قوالب ووردبرس WordPress
 (شوهد 2547 مرات)
« رد #3 : 22/10/2013 » 09:38:pm »
بارك الله فيك
سجل
NoAvatar

غير متصل beshoucin

  • عضو
  • *
  • المشاركات :1
  • عضويه: 32450
  • تاريخ التسجيل : 31/05/2017 » 01:19:pm
رد : الشرح الكامل لتعريب قوالب ووردبرس WordPress
 (شوهد 2547 مرات)
« رد #4 : 31/05/2017 » 01:21:pm »
بارك الله فيك عمل رائع جدا و مفيد
سجل
NoAvatar

غير متصل النسر الفضي

  • عضو
  • *
  • المشاركات :6
  • عضويه: 33615
  • تاريخ التسجيل : 25/09/2020 » 08:13:pm
رد: الشرح الكامل لتعريب قوالب ووردبرس WordPress
 (شوهد 2547 مرات)
« رد #5 : 26/09/2020 » 08:07:pm »
مشكووورين
سجل