آموزش فارسی سازی پوسته های وردپرس – قسمت سوم

daskhatmin فواد طهماسبی
18,517 بازدید
آموزش فارسی سازی پوسته های وردپرس

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

پس در ادامه باهم به روش اشاره شده در وبسایت رسمی وردپرس میپردازیم:

راست چین کردن (Right-To-Left) یک پوسته خیلی راحته و فقط کافی تمام ویژگیهای افقی ( horizontal attribute ) را تغییر بدید، و تغییرات جدید رو در فایل دیگری با نام rtl.css ذخیره کنید.

مراحل زیر رو قدم به قدم دنبال کنید:

  1. فایل استایل مربوط به پوسته (معمولا style.css) را با یک ادیتور (مثلا ++N) باز کنید.
  2. فایل باز شده را با نام جدید rtl.css ذخیره کنید. الان شما دو فایل style.css و rtl.css دارید.
  3. کد زیر را در انتخابگر body اضافه کنید (body selector):
      direction: rtl;
      unicode-bidi: embed;
  4. از اولین سطر شروع کنید و کارهای زیر رو یک به یک بر روی هر انتخابگر (selector) انجام بدید:تمامی ویژگیهای بی ربط (attribute) مثل ارتفاع، عرض، موقعیت مکانی عمودی و … (width, height, margin-top ,…) را حذف کنید.مقدار ویژگیهای زیر را از right به left و برعکس تغییر دهید.
    • text-direction
    • float
    • clear
       text-align: left;
       float: right;
       clear: left;

    میشود:

      text-align: right;
      float: left;
      clear: right;
  5. یک پوشه با نام “rtl-images” ایجاد کنید و تمام عکسهایی که لازم هستند به صورت راست چین باشند را تغییر داده و با همان نام در این پوشه قراردهید. برای مثال یک علامت فلش مطمئنا مخصوص چیدمان ltr هست و باید این فایل رو تغییر بدید و نسخه rtl  رو قرار بدید. فقط یادتان باشد که کدهای مربوط به این تصاویر را از فایل “rtl.css” پاک نکنید. این پوشه و کدهای مربوطه در قسمت ایجاد پوسته فرزند به درد میخوره.
  6. ویژگیهای زیر را به صورت آینه ای تغییر دهید و مقدار ویژگی اصلی را صفر کنید:
    • margin
    • padding
    • borders
    • background-position
    • right/left positioning
    .commentslink{
    	background:url("./images/comments.gif") no-repeat 0 3px;
    	padding-left:15px;
            margin: 2px 4px 0px 12px;
            left: 10px;
    }

    میشود:

    .commentslink{
    	background:url("./rtl-images/comments.gif") no-repeat 100% 3px;
    	padding-left:0;
            padding-right:15px;
            margin: 2px 12px 0px 4px;
            left:auto;
            right:10px;
    }

    چند نکته:

    موقعیت تصویر زمینه رو باید به صورت دستی تصحیح کنید و نتیجه رو در مرورگر ببینید و دوباره تغییرات لازم رو ایجاد کنید. مثلا اگر مقدار اصلی “۰” است میتوانید از “%۱۰۰” استفاده کنید.

    یادتان باشد وقتی مقدار ویژگیهای مکانی (left, right) را تغییر میدهید، مقدار ویژگی اصلی را “auto” تعیین کنید.

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

تا اینجای کار شما به صورت کامل یک پوسته رو فارسی سازی کردید، ولی قسمت اصلی مسئله که هیچ وقت رعایت نمیشه اینه که چون پوسته از ابتدا rtl طراحی نشده در بروزرسانی های بعدی ، تمام تغییرات از بین خواهد رفت. بنابر این به نظر من بهتره یک پوسته اصلی داشته باشید و یک پوسته فرزند، که تغییرات رو روی پوسته فرزند ایجاد کنید و به فایلهای پوسته اصلی دست نزنید. این مرحله رو هم قسمت بعدی توضیح میدم. یادتون نره که شدیدا منتظر نظرات و پیشنهادات شما برای کامل شدن مطلب هستم.


منبع:

http://codex.wordpress.org/Right-to-Left_Language_Support


 قسمت اول – قسمت دوم – قسمت سوم – قسمت چهارم

daskhatmin

فواد طهماسبی

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

50 دیدگاه برای “آموزش فارسی سازی پوسته های وردپرس – قسمت سوم”

  1. محمد گفت:

    سلام محمد زارعی هستم,,,,
    سوالم اینه که چجور پنل تنظیمات پوسته های حرفه ای رو ویرایش کنیم ؟
    همونطور که میدونید poedit پنل رو ترجمه نمیکنه ….
    راهکار من اینه که در فایل های پوسته ctrl+f بگیریم و بخش بخش نوشته هایی که در تنظیمات پوسته هست کپی کنیم و توی فایل های پوسته سرچ کنیم…
    راهکار بهتری سراغ ندارین؟

  2. محمد گفت:

    سلام
    یه سوال:
    در واقع فایل rtl.css فقط شامل کدهایی میشه که باید تغییر کنن تا پوسته راست چین بشه درسته؟
    نباید کدهای بی که توی استایل هستن ولی بی تاثیرند را توی این فایل قرار داد؟
    مثلا margin: 20px 30px 20px 30px;
    دراینجا فاصله از راست و چپ برابر است.
    شما گفتیداول کد های استایل اصلی را وارد فایل استایل راستچین میکنیم و بعد قسمت های اضافی باید پاک بشن درسته؟ خب این قسمت که ذکر کردم اضافی محسوب میشه؟
    سوال ۲:
    اگه اشتباه کنم سیستم و فایل استایل اصلی و هم هم فایل راستچین رو لود میکنه ولی خواصی که در فایل راستچین هست رو اولویت میده به استایل اصلی درست فهمیدم؟ به همین خاطره که فقط قسمت هایی که باید تغییر که فقط در rtl.css نوشته میشه؟

    1. فؤاد طهماسبی گفت:

      بله کاملا درسته!

  3. طاها گفت:

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

  4. بانه وب گفت:

    ممنون من امروز با شما اشنا شدم
    و سعی میکنم ازتون درس بگیرم

  5. شادی گفت:

    سلام
    دستتون درد نکنه. خیلی آموزش عالی و کاملی بود. مرسی واقعا.
    من دارم با آموزش شما پیش میرم و قالبی رو فارسی میکنم. فقط به یه مشکل ساده خوردم که اعصابم رو خورد کرده. فوتر این قالب رو ببینید؟ نمیدونم تو کدوم فالیه؟! هرچی میگردم پیداش نمیکنم! یعنی تو Footer.php هم نیس!

    http://themes.devatic.com/daisho/blog/

    1. فؤاد طهماسبی گفت:

      سلام، بازم بگردید 😀
      ۱۰۰% تو فایلهای پوسته است، حالا شاید با روشی دیگه. مثلا شاید کد کرده باشه یا از فایل دیگه ای خونده باشه و …

  6. مسعود گفت:

    آقا دستتون درد نکنه.عالی بود.جواب داد

  7. جعفر گفت:

    ن پشت سر هم نبودن ، یکی تو خط ۶۰۰ مثلا و یکی دیگه هم تو خط ۲۰۰۰ مثلا
    بله فقط می خام راست چین می کنم ولی همه کارایی رو ک قرار بود انجام دادم ولی راست چینی کامل نمیشه !

  8. جعفر گفت:

    سلام
    میشه تو قالب دو تا body باشه
    تو استایل قالب من تو تا بادی هستش :

    body
    {
    background-color: #C8C8C8;
    margin: 0;
    }
    و
    body
    {
    font-size: 13px;
    font-family: Arial, Helvetica, Sans-Serif;
    color: #232323;
    }

    اینو یکی کنم یا چیکار کنم؟

    1. فؤاد طهماسبی گفت:

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

      ولی اگه فقط دارید راست چین میکنید، حدالممکن بجز کدهایی که لازمه، بقیه کدها رو دست نزنید.

  9. جعفر گفت:

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

  10. جعفر گفت:

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

    1. فؤاد طهماسبی گفت:

      نه، مگر اینکه به صورت اینلاین استایل خورده باشه.
      و یا با html جهت داده باشند. که فکر نمیکنم همچین پوسته وردپرسی وجود داشته باشه.

دیدگاه‌های بیشتر

کد HTMLCSSJavaScriptPHP