سازگار کردن قالب با زبان پارسی - راست‌چین سازی

[دانوش]

[justify]یکی از مشکلاتی که کاربران پرستا شاپ در این انجمن مطرح کردند کمبود قالب‌های سازگار با زبان پارسی است. این در حالیه که پرستاشاپ پشتیبانی از زبان‌های راست به چپ (RTL) را در نسخه‌ی جدید قرار داده. این به این معنی هست که پرستاشاپ دارای قالب‌های دوجهته (bidirection) است. اما متأسفانه ما این قالب‌ها رو کلاً راست به چپ می‌کنیم؛ طوری که برای زبان‌های چپ به راست قابل استفاده نیست!

 

در این آموزش روش صحیح دو جهته سازی قالب را خواهید آموخت و علاوه بر آن آموزش مختصری از CSS و HTML که پایه‌های زبان‌های تحت وب هستند ارایه خواهد شد. بنابراین اگر از HTML چیزی نمی‌دانید نگران نباشید. هم‌چنین روش‌هایی برای سازگار کردن (دوجهته کردن) فایل‌های php یا ماژول‌هایی که در حالت عادی با استفاده از CSS اصلاح نمی‌شوند فرا خواهید گرفت.

 

چرا دو جهته سازی قالب؟ چرا ما توصیه می‌کنیم که قالب‌ها دو جهته باشند و چرا فقط برای زبان فارسی سازگار نشوند؟

 

در نظر گرفتن نیاز همه. به این معنی که شاید شما نیاز به زبان دیگری نداشته باشید اما چرا حاصل زحمات شما که قرار است به صورت عمومی منتشر شود یا به فروش برسد کامل نباشد و چرا برای نیاز دیگران پیش‌بینی نکرده باشید؟

در نظر گرفتن نیاز زبان‌های دیگر. به این معنی که شاید با این کار بتوانیم قالب‌هایی برای عرب زبان‌ها و یا سایر زبان‌های راست چین ارایه کنیم و حتی بتوانیم قالب فارسی شده را به سازنده‌ی اصلی برگردانیم! و اهداف دیگری که در آینده شاید بتوانیم به آن‌ها برسیم.

امکان مقایسه بین راست و چپ چین. در صورتی که قالب اصلی حفظ شود می‌توانید با فعال کردن زبان انگلیسی قالب را در حالت چپ چین و راست چین مقایسه کنید تا مشابه هم باشند.

و دلایلی دیگر که می‌توانید با کمی اندیشیدن به آن برسید.

[/justify].

ابزارهای مورد نیاز:

 

هرکاری نیاز به ابزارهایی دارد و برای شروع ترجمه‌ی قالب‌ها به این ابزارها نیاز دارید:

• یک ویرایشگر متن پیشرفته مانند Notepad++
• یک ویرایشگر تصویر ساده مانند snag-it یا ویرایشگرهای پیشرفته‌تر مانند Photoshop
• افزونه‌ی Firebug برای فایرفاکس و یا افزونه‌های مشابه برای سایر مرورگرها

شروع به کار

 

[justify]در هر قالبی که به صورت استاندارد برای پرستا شاپ 1.4 تهیه شده است در پوشه‌‌ی css آن یک فایل به نام rtl.css وجود دارد. اما پرستاشاپ دارای cssهای زیادی است و این فایل کاربرد خود را از دست می‌دهد. پس به آن نیازی نداریم و می‌توانید آن را حذف کنید. انجمن پشتیبانی پرستا شاپ این مشکل را برطرف کرده و قابلیتی به پرستاشاپ افزودیم که قالب‌ها به طور کامل از راست چین پشتیبانی کنند.

 

در پوشه‌ی css هر قالب یک فایل به نام global.css و چند فایل css دیگر هم وجود دارد. ساده ترین بخش کار در اینجا انجام می‌شود و مشکل‌ترین بخش کار فایل‌هایی هستند که در آن‌ها Style تعریف شده. این بخش از کار قابل حل است اما نمی‌توان به یک شکل مشخص رسید تا افردی که در کار ترجمه‌ی قالب هستند از آن پیروی کنند. با این حال روشی برای حل آن‌ها ارایه می‌شود و دنبال روش بهتری هستم تا بدون دستکاری این فایل‌ها قالب را راست چین کنیم.

[/justify]

.

روش کار:

 

[justify]در پوشه‌ی css قالب از تمام محتویات پوشه‌ی css قالب (تمام فایل‌های css و پوشه‌ها) یک کپی تهیه کرده و در پوشه‌ی rtl که در همانجا می‌سازید قرار دهید. با این کار تمام cssهای اصلی دست نخورده باقی می‌مانند.

 

فایل global.css اصلی ترین فایل برای راست چین سازی است و باید کار را از آن شروع کنید. کار راست چین سازی را باید برای تمام فایل‌های موجود در این پوشه و یک پوشه که مربوط به چند ماژول مهم است انجام دهید. در زیر روش راست چین سازی قالب را شرح می‌دهیم.

 

نکته: هر css از بلاک‌هایی تشکیل شده که شامل صفت‌هایی هستند. هر بلاک با { } مشخص می‌شود و نام بلاک (نام یک کلاس یا شناسه) قبل از آن می‌آید.

هر صفت با یک نام شروع شده و بعد از آن یک علامت « : » و سپس تعریف مقدارها و علامت « ; »

[/justify]مثال:

 

نام بلاک {
صفت 1: مقدار1 مقدار2 مقدار3 مقدار 4;
صفت 2: مقدار1 مقدار2 مقدار3 مقدار 4;
...
}

.

بلوک‌هایی که باید اصلاح شوند شامل موارد زیر هستند:

 

[justify]ابتدا یک بلاک موجود با نام body یا نام #page را پیدا کرده به آن مقادیر زیر را اضافه میکنیم. اضافه می‌کنیم. این بلاک به شکل زیر اضافه می‌شود:

 

#page {   direction: rtl;   text-align: right;}

 

 

کل بلاک body که باید در قسمت فونت روی tahoma تنظیم شوند اما چون ممکن است این فونت روی سیستم نباشد فونت‌های دیگری هم اضافه می‌شود.

[/justify]کل بلاک‌هایی که دارای یکی از صفت‌های زیر باشند که روش تغییر آن‌ها را هم می‌بینید:

 

توجه: به جای « ... » در عبارات زیر ممکن است هر مقدار مجازی قرار داشته باشد.
font-family: Verdana, Arial, ... => font-family: Tahoma, Arial, sans-serif;font-family: Verdana, Arial, ... => font-family: B Homa, Homa, Tahoma, Arial, sans-serif;font-family: Verdana, Arial, ... => font-family: B Titr, Titr, Arial, sans-serif;
float: right => float: left
float: left => float: right
text-align: left => text-align: right
text-align: right => text-align: left
background: ... left => background: ... right
background: ... right => background: ... left
Background-position: ... right => background-position: ... left
Background-position: ... left => background-position: ... right
clear: right => clear: left
clear: left => clear: right;
right: ... => left: ...
left: ... => right: ...margin-left => margin-rightmargin-right => margin-leftpadding-right => padding-leftpadding-left => padding-rightborder-right => border-leftborder-left => border-right
margin, padding; => در ادامه‌ی آموزش

.

[justify]معمولاً این طور تصور می‌شود که در فایل باید تمام کلمه‌های Right را با Left و برعکس جایگزین کنیم؛ اما در واقع این طور نیست! این کار هرچند ممکن است درست به نظر برسد اما اشکالاتی دارد.

ابتدا وجود عباراتی شامل این کلمات است که نباید تغییر کنند. مانند : #header_right . توجه کنید که این‌ها نام یک کلاس یا شناسه هستند و نباید تغییر کنند و با تغییر آن‌ها ممکن است کل قالب به‌هم بریزد.

دومین دلیل عیب یابی دشوار روش جابه‌جایی خودکار است. به این معنی که اگر ناگهان تمام فایل را ویرایش کنید ممکن است عیب‌هایی در قالب به وجود بیاید که پیدا کردن آن‌ها دشوار باشد.

 

[/justify]

تغییر بلاک‌های شامل Margin ، Padding

[justify]دو صفت Margin و Padding تعیین کننده‌ی فاصله‌ی لایه‌ها از یک‌دیگر و از محتوای درونشان هستند.

.

صفت Margin تعیین کننده‌ی فاصله‌ی یک عنصر(لایه، جدول، عکس و...) از عناصر همجوار خودش است. به طور مثال Margin-right: 2px معادل فاصله‌ی 2 پیکسلی یک عنصر از سمت راست است.

صفت Padding تعیین کننده‌ی فاصله‌ی محتویات داخل یک عنصر از گوشه‌های آن است. به طور مثال Padding-right:2px به این معنی است که متن و تصاویر داخل آن عنصر با فاصله‌ی 2 پیکسل از مرز (border) سمت راست خودش آغاز خواهند شد.

[/justify].

[justify]این صفات به شیوه‌های مختلف به کار می‌روند و یک شکل ثابت ندارند. بنابر این انواع شکل‌های به کار گیری و نحوه‌ی اصلاح آن‌ها را بررسی می‌کنیم:

 

1. صفت Margin و Padding ممکن است دارای 4 مقدار باشد که هر مقدار با فاصله (space) از دیگری جدا می‌شود. در این صورت این مقادیر از چپ به راست به ترتیب تعیین کننده‌ی فاصله از بالا، راست، پایین و چپ هستند. برای ویرایش این حالت به مقدار اول و سوم کاری نداریم و مقادیر دوم و چهارم را با یک‌دیگر جابه‌جا می‌کنیم.

 

2. این صفات می‌توانند به صورت 3 مقداری هم به کار روند. این حالت مانند حالت 4 مقداری است وقتی مقدار چپ و راست یکی باشد (مقدار وسط برای چپ و راست اعمال می‌شود). یعنی نیازی به ویرایش آن‌ها نداریم و می‌توانید در فایل css آن‌ها را نادیده بگیرید.

 

3. هم‌چنین این صفات می‌توانند به صورت 2 مقداری یا تک مقداری به کار روند. در حالت اول مقدار اول برای بالا و پایین و مقدار دوم برای چپ و راست در نظر گرفته می‌شود. حالت تک مقداری هم وقتی به کار می‌رود که که بالا، پایین، چپ و راست دارای مقدار یکسان باشند. در این دو حالت نیازی به ویرایش بلاک ندارید و می‌توانید بلاک‌هایی که این حالات را دارند در فایل css در نظر نگیرید.

 

4. اما اگر این صفت‌ها با یک مؤلفه‌ی right و left باشند همانطور که بالاتر توضیح داده شد Right و Left را به جای یک دیگر به کار می‌بریم.

 

چند مثال:

 

[align=left]

margin: 1px 2px 3px 4px;  =>  margin: 1px 4px 3px 2px;
padding: 1px 2px 3px 4px; ==>  padding: 1px 4px 3px 2px;
margin-right: 2px;  =>  margin-left: 2px;
padding-right: 2px;  =>  padding-left: 2px;
margin-left: 2px;  =>  margin-right: 2px;
padding-left: 2px;  =>  padding-right: 2px;
border-right: 5px solid red;  =>  border-left: 5px solid red;

[/justify] .

[justify]

 

[/justify]تا به این‌جای کار با بخش اصلی کار آشنا شدیم اما هنوز بخش‌هایی در cssهای ماژول‌ها و تغییر بعضی عکس‌ها و موارد دیگری باقی مانده که در بخش بعدی آموزش ارایه خواهد شد.

 

نکات مهم

 

• در هنگام ویرایش قالب برای اعمال تغییرات باید «اعمال کامپایل» را از تنظیمات » کاربری‌ها فعال کنید.
• برای نمایش تغییرات باید در ابزارها » زبان‌ها در ویرایش زبان فارسی آن را به عنوان زبان RTL علامت بزنید.

این آموزش به صورت اختصاصی و برای اولین بار در انجمن پشتیبانی پرستا شاپ پارسی ارایه شده. هرگونه کپی برداری از آن فقط و فقط با ذکر منبع مجاز است.

[/align]

[salondaran]

سلام خسته نباشید

از زحمات شما سپاسگذارم . آیا کتاب یا آموزش جامع تری هست ؟

 

[دانوش]

در حا حاضر خیر. به زودی آموزش‌ها کامل تر میشه.

[salondaran]

امکانش هست بطور عملی یک قالب را شروع به فارسی سازی کنید و مرحله به مرحله پیش بروید ؟

 

[دانوش]

راست چین سازی قالب پرستاشاپ وقت گیره و زحمت زیاد داره. بعد از راه اندازی بخش ویژه‌ی سایت این آموزش ها رو هم قرار میدیم.

موفق باشید.

 

[shakibonline]

سلام . ممنون از زحمات شما .

یک سوال برای من پیش اومده ، چطوری میتونم برای پرستاشاپ قالب بنویسم؟ فرض بفرمایید من فایل psd رو دارم و فقط میخوام اونها رو به کد تبدیل کنم . پسوند tpl برای من ناآشناست . اگر امکانش هست کمی در مورد این فایل ها توضیح بدید .

ممنون.

[B.A.H.M.A.N]

فایل تی پی ال شبیه فایل php هست و تفاوت زیاد نداره باهاش ، این فایلها برای قالب به کار میرن .

 

برای طراحی قالب پرستاشاپ سریعترین و بهترین راه اینه که قالب دیفالت رو بردارید و رو اون تغییرات رو اعمال کنید تا به قالب مورد نظر خودتون برسین . همین

[Arash_a2k]

سلام من اين کار ها رو انجام دادم اما از کجا بايد تعيين کنم که کدام global.css بايد فراخوانی شود وقتی که زبان فارسی هست.

من از prestashop 1.5.3.1 استفاده می کنم نه ورژن فارسی

[Arash_a2k]

اين کد در کلاس frontcontroler و در تابع setMedia قرار دارد

 

if ($this->context->language->is_rtl)

$this->addCSS(_THEME_CSS_DIR_.'rtl.css');

 

 

من يک پوشه به اسم rtl در داخل css قالب قرار دادم و همه ی css ها را آن جا کپی کردم

ولی باژم global.css اي که در پوشه ی css وجود دارد فراخوانی می شود.!

چه کار بايد بکنم؟؟؟؟؟

لطفاً راهنمايی کنيد

[دانوش]

در هر قالبی که به صورت استاندارد برای پرستا شاپ 1.4 تهیه شده است در پوشه‌‌ی css آن یک فایل به نام rtl.css وجود دارد. اما پرستاشاپ دارای cssهای زیادی است و این فایل کاربرد خود را از دست می‌دهد. پس به آن نیازی نداریم و می‌توانید آن را حذف کنید. انجمن پشتیبانی پرستا شاپ این مشکل را برطرف کرده و قابلیتی به پرستاشاپ افزودیم که قالب‌ها به طور کامل از راست چین پشتیبانی کنند.

 

.

روش کار:

 

 

در پوشه‌ی css قالب از تمام محتویات پوشه‌ی css قالب (تمام فایل‌های css و پوشه‌ها) یک کپی تهیه کرده و در پوشه‌ی rtl که در همانجا می‌سازید قرار دهید. با این کار تمام cssهای اصلی دست نخورده باقی می‌مانند.

[good_boy1]

آموزش خوبیه ازتون ممنونم ولی در مورد بعضی چیزا صحبت نشده و این باعث میشه مبتدی هایی مث من دچار ابهام بشن. به همین خاطر چند سوال ازتون می پرسم:

 

1. آیا این راست چین کردن با پرستا 1.5 هم سازگاره یا تفاوت هایی هست؟

 

2. در مورد بعضی چیزا سوال برام پیش اومده. مثلا:

 

2-یک:در مورد border-right حرف زدید ولی نگفتید آیا border-right-width هم می بایست تبدیل بشه؟ border-right-color چی؟ text-align:right چی؟

 

2-دو: آیا left در خط های زیر باید تغییر کنه؟

background: url("../img/form_bg.jpg") repeat-x scroll left top #D0D1D5;

repeat-x left center;}

background: url(../img/prettyCheckable-blue.png) top left no-repeat;

 

2-سه: وقتی right یا left بدون پسوند و پیشوندی اومده باشه چه باید کرد؟ مثلا:

#tri_top_bar { right:0; top:0; text-align:center; z-index:99; }

position:absolute; right:0

#footer .row .span12 .opener {right: 10px;}

 

2-چهار: اگه backgroung-position اینطوری باشه باید تغییر کنه؟

.aui_w { background-position:left top; }

.aui_e { background-position: right bottom; }

 

2-پنج: در مورد margin و padding گفتید اگه 4تایی باشه باید دوم و چهارم عوض بشه. آیا این در مورد shodow یا مورد زیر هم صدق می کنه؟

border-radius:0 0 0 5px;

 

3- مث اینکه در مورد ماژول ها مطلبی نوشته بودید و حذف شده. در مورد ماژول ها به طور کلی چه طور باید انجام بشه راست چین کردن؟

[B.A.H.M.A.N]

این که هر left ای در راستچین کردن right میشه ، نه این مسئله وجود نداره . دستور العمل کلی هم وجود نداره ، فهمیدن اینکه کدوم right باید left بشه باید تجربی و از روی معلومات شخصی شما باشه . ممکنه اصلا در یک جا border-left نباید بشه border-right و بالعکس . و این تو قالب های مختلف و تو جاهای مختلف فرق میکنه و باید به تدریج و با بالا رفتن تجربه به این تشخیص برسین .

[دانوش]

در واقع این کار به تجربه و شگرد هرکس مربوط هست.

توجه کنید که راست چین سازی در عمل آینه کردن هست پس اگر روشی مطمئن دارید که چیزی رو جا نندازید و با کاربرد تمام صفت های CSS آشنا هستید باید تقریبا تمام right ها و left ها را جا به جا کنید مگر زمانی که نام یک کلاس یا شناسه باشه. اما در عمل ممکنه با این کار قدری دچار سردرگمی بشید و نتونید تمام مشکلات رو حل کنید.

 

جواب سوالات شما:

1. این روش برای 1.5 هم جوابگو هست اما در نسخه 1.6 پوشه rtl نداریم. این پوشه رو به دلیل جلوگیری از چک کردن های بی مورد و کاهش سرعت سایت انجام دادم و برای فارسی سازی نسخه 1.6 و حتی 1.5 کافیه به جای قرار دادن توی پوشه rtl یک فایل با همان نام و یک _rtl اضافه بسازید. مثلا global_rtl.css که کنار فایل global.css قرار میگیره.

 

2.یک: این ها css3 هستند. مدتی هست که پرکاربرد شده و این موارد هم بهتر هست که تغییر کنند. مطابق نکته ای که بالا گفتم عمل آینه را در نظر بگیرید.

2. دو: در مورد بکگراندها ممکنه بکگراند نیازی به آینه شدن نداشته باشه. بنابراین این کار معمولا تفاوتی در نتیجه ایجاد نمیکنه. اما در حالت کلی باید تغییر کنند.

2. سه: اگر با css آشنا باشید کاربرد آن را میدانید. صفت right یا left موقعیت را از گوشه صفحه مشخص میکند که باید تغییر کنند.

2. چهار: مطابق 2.دو هست.

3. تفاوتی در ماژول و قالب نیست. برای ماژول هم الگوی _rtl جواب میده.

[shirzad]

سلام دوست عزیز با عرض پوزش بابت بالا اوردن تایپک قدیمی

یه سوال داشتم من قبلا با جوملا کار میکردم و با نحوه فارسی کردن قالب های پرستاشاپ آشنا نیستم لطف بفرماید به صورت کلی بگید که برای فارسی کردن قالب پرستا شاپ به جز تغییر فایل های CSS چه کار دیگه ای باید انجام بدم یا اگر آموزش کامل یا کتابی وجود داره لطفا معرفی کنید

[admin]

آموزشش داخل انجمن بخش آموزش ها موجوده. بگردید پیدا میکنید

[shirzad]

گشتم بهترین تایپیک که موجود بود همین بود و اکثرا هم قدیمی بودن و ناقص

[دانوش]

به جز css عملا چیز دیگه ای نیاز نیست تغییر کنه

 

Sent from my Xperia using Tapatalk pro

[arnaak]

با تشکر از شما

چجوری متن ها رو ترجمه کنم؟

[Fahime1992]

از بخش بومی سازی > > ترجمه ها می تونید متون رو ترجمه کنید