ارمغان فائزی

راست چین کردن قالب مجنتو

rtl_you_car_the_right_way

به تازگی تجربه راست‌چین کردن دو قالب مجنتو را داشته‌ام. یکی از آنها تم مجنتو سارینا و دیگری فروشگاهی بود که یکی از مشتری‌های سارینا از ما خواسته بود تا آن را راست‌چین کنیم. شاید در میان کسانی که تجربه این کار را ندارند، این تصور وجود داشته باشد که با یک استایل ;direction:right به body همه چیز بدون مشکل راست‌چین می‌شود. ولی ماجرا به این سادگی‌ها نیست. باید تمام صفحات و ماژول های مختلف سایت بررسی شود و در صورت لزوم به صورت دستی CSS هر قسمت را تغییر داد.

RTL چیست؟

راست‌چین کردن یا همان RTL مخفف Right To Left است. قالب RTL برای زبان‌های راست به چپ مانند فارسی و عربی استفاده می‌شود.

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

RTL کردن قالب، بازی با CSS هاست و شما نیاز به دانش CSS دارید. نکته پیچیده، پیدا کردن کلاس‌های مورد نظرتان برای تغییر CSS در مجنتو است که در پست قبلی درباره نحوه پیدا کردن آن صحبت کردم. من برای ویرایش CSSهای قالب مجنتو از ویرایشگر متن سابلایم (Sublime Text) استفاده می‌کنم.

در شروع کار ممکن است اینطور به نظر برسد که حجم کار زیاد است و از خودتان بپرسید چگونه می‌شود همه صفحات یک قالب را که هرکدام از بخش‌های زیادی تشکیل شده است را راست‌چین کرد. این کار به کمی دقت و حوصله نیاز دارد تا تمام صفحات را بررسی کنید ولی اینگونه نیست که لازم باشد CSS همه قسمت‌ها را ویرایش کنید. وقتی بخشی از یک صفحه را راست چین می‌کنید، قسمت‌های زیادی در صفحات دیگر که همان کلاس مشابه را داشته‌اند نیز راست‌چین می‌شوند. برای مثال اگر شما به label، استایل text-align:right بدهید، همه labelها در تمامی صفحات، متنشان از سمت راست آغاز می شود.

قبل از اینکه راست‌چین کردن را آغاز کنید، وقت بگذارید و در همه صفحات سایت، بگردید. بعضی صفحات هستند که خیلی توی چشم نیستند و ممکن است آنها را فراموش کنید. مانند صفحات: ۴۰۴، جستجو یا پیغام های اخطار، خطا و موفقیت.

وقتی صفحات سایت را بررسی می‌کنید، دقت کنید تا نقاط مشترک میان آنها را پیدا کنید، تا لازم نباشد یکی یکی هر قسمت را تغییر دهید.

تغییرات را کجا اعمال کنیم؟

برای راست‌چین کردن می‌توانید CSSهای قالب را پیدا کنید و هر کجا که لازم شد دستوری به آن اضافه یا آن را ویرایش کنید. همچنین می توانید یک فایل CSS جدید اضافه کنید و همه تغییرات مربوط به نسخه فارسی را روی آن انجام دهید. مثلا اگر CSS اصلی قالب، ultimo.css نام دارد، یک CSS جدید با نام ultimo-rlt.css بسازید و آن را ویرایش کنید. دقت داشته باشید وقتی در CSS ،  local.xml جدیداضافه می کنید، آن را آخرین action بگذارید تا الویت آن از CSSهای قبلی بالاتر باشد و آخرین تغییراتی که می دهید، اعمال شود.

به شخصه در هر دو تجربه‌ام در این زمینه یک فایل CSS جدید اضافه کردم و تغییرات لازم را آنجا دادم.

چه دستوراتی برای RTL کردن لازم است؟

  • جهت (Direction)

دستور direction:rtl را به یک DIV پدر مانند Wrapper یا Container که همه DIV های دیگر را شامل می شود می‌دهیم تا مشخص شود جهت از راست به چپ می‌باشد. این دستور برای راست‌چین کردن متن به کار می‌رود. اگر در متنی به زبان فارسی از کلمه‌ای انگلیسی استفاده شود، ترتیب به هم می‌خورد ولی با دادن این دستور مشکل حل می‌شود.

wrapper, Container {
	direction: rtl;
}
  • چیدمان متن (Text-align)

با فایر باگ (Firebug) یا Developer Tools، در هر صفحه هر کدام از المان های هدر، فوتر، عنوان، متن، فیلدهای نوشتاری، لیبل و … را انتخاب کنید، اگر دستور text-align:left دارند، مقدار آن را به جای left به right تغییر دهید. و اگر این دستور به آن ها اعمال نشده و لازم است که آنرا داشته باشد، text-align:right را به استایل‌اش اضافه کنید. با این دستور، متن را از سمت چپ به راست هدایت می‌کنید.

  • حاشیه و لایی گذاری (Margin و Padding)

در فایل های CSS جستجو کنید و هرکجا margin-right ،padding-left ،padding-right  و margin-left پیدا کردید، جای left و right آنها را عوض کنید. مثلا اگر margin-right:20px دارید در نسخه راست‌چین margin-left:20px درست است.

عبارات padding و margin را هم به صورت جداگانه جستجو کنید، فرض کنید جستجو شما نتیجه زیر را در بر گیرد:

padding: 20px 10px 30px 15px;

که هر کدام از این اعداد به ترتیب از سمت چپ، padding-left ،padding-bottom ،padding-right ،padding-top را نشان می‌دهند:

padding: top right bottom left;

برای راست‌چین کردن، فقط باید جای padding-right و padding-left را عوض کنید:

padding: 20px 15px 30px 10px;
  • المان های شناور (Float)

در CSS(ها) ویژگی float را جستجو کنید و هر کجا float:right وجود داشت، آنرا float:left کنید و بالعکس.

همچنین در CSS(ها) دنبال left و right نیز باشید، برای مثال اگر left:50px بود، آنرا تبدیل به right:50px کنید.

  • قلم وب (Font-face)

وب فونت مناسب انتخاب کنید و اندازه فونت‌ها را در صورت نیاز تغییر دهید. مخصوصا اندازه‌هایی که به تگ h1 تا h6 داده می‌شود برای فونت انگلیسی مناسب است و با دادن فونت فارسی به آنها، اندازه فونتشان خیلی بزرگ یا خیلی کوچک می‌شود که نیاز به ویرایش font-size دارید.

پس از انجام مراحل بالا، عکس‌ها را نیز بررسی کنید، ممکن است بعضی از عکس‌ها نیاز به تغییر جهت در فتوشاپ داشته باشند.

به جهت حرکت اسلایدر هم دقت کنید تا با توجه به نسخه فارسی، در جهت صحیح حرکت کنند. ممکن است لازم شود تغییراتی هم در جاوااسکریپت بدهید.

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

ارمغان فائزی

طراح رابط کاربری و گرافیست شرکت سارینا و همچنین عضو تیم فنی فروشگاه اینترنتی ورچین است. درحال حاضر در سارینا با Magento کار می‌کند. او لیسانس نرم افزار است و به نقاشی علاقه دارد.

  1. دوشنبه، ۳ شهریور ۱۳۹۳ عماد ع
    مطلب خوبى بود اما آن قسمت كه ميگويد راست به چپ كردن مانند قرار دادن تم مقابل آينه است را قبول ندارم. چيزهايى هستند كه در صورت تغيير جهتشان در تجربه كاربرى خلل ايجاد مينمايند. مناسب سازى قالب براى زبانهاى راست به چپ بايد با دقت و مراقبت زيادى انجام شود و بايد همواره تجربه كاربرى مد نظر باشد.
    • ارمغان فائزی
      چهارشنبه، ۵ شهریور ۱۳۹۳ ارمغان فائزی
      عماد جان من به طور کلی گفتم و منظورم مقایسه یک صفحه چپ چین با همان صغحه در حالت راست چین بود که اگه هر دو صفحه رو کنار هم ببنیم، به طور کلی جاها طوری عوض شده که انگار صفحه جلو آینه است. و با نظرت در مورد اینکه لزوما جای همه چیز عوض نمی شه موافقم. ممنون از اشاره خوبی که کردی.
  2. جمعه، ۴ مهر ۱۳۹۳ شاهین کلانتر
    شما راست چین کردن رو - روی هاست انجام میدهید یا لوکال؟
    اینکه بخواهیم CSS ها رو با style داخل تگ های div بنویسیم نطرتون چیه؟ حرفه ایی به نطر نمیرسه نه؟! ولی سریعتره اینطور نیست؟
    بی زحمت یه مثال روشن تر از نوع حرکت اسلایدر بزنید (انقدر دقت تو جهت حرکت اسلایدر فقط از دید یه طراح میتونه باشه )
    متچکرم
    • یکشنبه، ۴ آبان ۱۳۹۳ عثمان
      نوشتن دستورات css در داخل تگ ها اصلا توصیه نمیشه هر چند شاید باعث افزایش سرعت بشه ولی فکر کنید که بعد از شما بخوان پروزه رو تغییر بدین باید تک تک style ها inline رو پیدا و تغییر بدن که طاقت فرساست . در ضمن با این کار باعث ادغام لایه نمایش با لایه محتوا میشید و از نظر سئو اصلا خوب نیست .
      • ارمغان فائزی
        دوشنبه، ۵ آبان ۱۳۹۳ ارمغان فائزی
        دوست عزیز اگه متن رو با دقت خوانده باشید در قسمت "تغییرات را کجا اعمل کنیم" اشاره کردم که یا فایل CSS قالب را ویرایش کنید یا فایل CSS جدید اضافه کنید، و در هیچ کدام، نیاز به اضافه کردن CSS Inline و ویرایش تک تک Style ها نیست.
  3. سه شنبه، ۱۴ بهمن ۱۳۹۳ حميد
    بسيار بلاگ مفيد ، بسيار وب سايت هاي زيبا ، بسيار تيم حرفه اي و بسيار بسيار ... سپاس بابت مطالب مفيد و پست هاي كار امد
  4. دوشنبه، ۱۱ اسفند ۱۳۹۳ محمدرضا
    ممنون. مطلب مفیدی بود.
  5. جمعه، ۲۱ فروردین ۱۳۹۴ امین زارعی
    با سلام وقت بخیر واقعا عالـــــی بود . خیلی خیلی ممنون.
  6. یکشنبه، ۸ آذر ۱۳۹۴ رضا احمدی
    سلام ، بسیار عالی و مفید بود .
    سوالی که مطرحه اینه که اگر پوسته ای فارسی شده داشته باشیم و فقط بخواهیم یک صفحه ی خاص رو با استایل کاملا چپ چیم داشته باشیم چه راه حلی میتونه داشته باشه ؟ با تشکر
  7. جمعه، ۹ بهمن ۱۳۹۴ افشین زد
    سلام
    ممنون بابت مطالب و وبلاگ خوبتون عالی و خیلی جذاب هست،آیا امکانش هست مطلبی هم راجع به طریقه ترجمه قالبهای مجنتویی بگذارید؟
    من واقعا نیاز دارم بهش!!اکثر راه و روشهایی که به زبان انگلیسی هست رو دنبال کردم ولی گیج کرده منو پکیجی ترجمه فارسی هم که توی مجنتو کانکت هست اصلا نتونستم نصب کنم و خطا میده!منتظر جوابتون هستم.
  8. جمعه، ۲۰ فروردین ۱۳۹۵ سام
    سلام خانم ارمغان
    من سوالی که داشتم که مدیریت مجنتو چرا به صورت خودکار وقتی زبان فارسی را انتخاب میکنیم راست چین نمیشود؟
  9. پنج شنبه، ۲۰ آبان ۱۳۹۵ p30money
    برای قالب های وبلاگ باید چیکار کنیم؟