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

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

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

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

راست چین کردن (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;
    }

    چند نکته:

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

    یادتان باشد وقتی مقدار ویژگیهای مکانی (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;
    دراینجا فاصله از راست و چپ برابر است.
    شما گفتیداول کد های استایل اصلی را وارد فایل استایل راستچین میکنیم و بعد قسمت های اضافی باید پاک بشن درسته؟ خب این قسمت که ذکر کردم اضافی محسوب میشه؟
    سوال 2:
    اگه اشتباه کنم سیستم و فایل استایل اصلی و هم هم فایل راستچین رو لود میکنه ولی خواصی که در فایل راستچین هست رو اولویت میده به استایل اصلی درست فهمیدم؟ به همین خاطره که فقط قسمت هایی که باید تغییر که فقط در rtl.css نوشته میشه؟

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

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

  3. طاها گفت:

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

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

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

  5. شادی گفت:

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

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

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

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

  6. مسعود گفت:

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

  7. جعفر گفت:

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

  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 جهت داده باشند. که فکر نمیکنم همچین پوسته وردپرسی وجود داشته باشه.

  11. جعفر گفت:

    سلام

    اگه text-decoration برابر با none بود نیازی نیست تغییری بدیم و از فایل ار تی ال پاکش کنیم ؟

    مرسی

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

      سلام،
      نه نیازی نداره تو فایل rtl باشه، میتونید پاکش کنید.
      چون این مشخصه به جهت ها ربطی نداره. و فقط برای ساده کردن ظاهر لینک ها به کار میره (مثلا خط زیر لینک و …)

  12. شاهرخ قائمی گفت:

    سلام . خوب هستین؟
    در قسمت انتهایی نوشتید که :

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

    تبدیل میشه به:

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

    ?? (تاکیدم روی اسم فولدر و نام تصویر هست.چون گفتید اسم فولدر رو به rtl-images بدیم ، ولی نگفتیم نام عکس رو با پسوند rtl ذخیره کنیم)
    البته خود وب سایت وردپرس هم همین کد رو نوشته ، اما اون نگفته بود که تصاویر رو به یک فولدر دیگه انتقال بدیم!
    ممنون

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

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

  13. اشکان کیانی گفت:

    سلام
    این خط چطور ترجمه میشه.

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

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

      1. اشکان کیانی گفت:

        منظورم خط 9 در کد زیر بود مربوط به نظرات است. کد صحیح اون خط رو برام ایمیل کنید یا اینجا بزارید

        http://www.faarsh.ir/ashkan.txt

        در پوست های که دارای پنل مدیریت هستند و وقتی اونها رو می خواهیم فارسی کنیم چکار کنیم.. رشته ها را فراخوانی می کنیم اما فای po ان باید داخل کدوم پوشه و مسیر باید باشه. چگونه برای مدیریت فراخوانی میشه که فارسی میشه.

        ببخشید از انجمن اصلا خوشم نمیاد
        ممنونم

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

        سلام،

      3.  < ?php comments_popup_link('No Comments.', '1 Comment.', '% Comments.'); ?>
      4. میشه این:

      5.  < ?php comments_popup_link('بدون دیدگاه.', '1 دیدگاه.', '% دیدگاه.'); ?>
      6. پوسته شما باید چند زبانه باشه. همچنین فریم ورکش. بخش سوم فارسی سازی در تمام موارد کاربرد داره و فرقی نمیکنه وردپرس یا قالب html باشه.
        در مورد انجمن هم مشکلی نداره هر طور مایلید. 🙂

      7. اشکان کیانی گفت:

        جناب طهماسبی عزیز اینو میدونم که فارسیشو بنویسم. در مورد ترجمه کردن به صورت e و __ منظورم بود باید چکارش کنیم. اگه قرار باشه فارسیشونو بنویسم خوب اول که برنامه poedit به درد نمی خوره سپس باید فرمت رو utf8 کنم که اصلا ارزش پوسته از بین میره و مشکلات خاص خودشو داره.

        منظور از Return کردن چیست؟؟ یعنی رشته ایی که باید ترجمه شود درون تگ php است؟؟ یا if??
        از پاسخگویتان متشکرم

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

        خب شما این کد و گذاشتی میگی چی میشه؟! من چه بدونم منظور شما اینه!!!! 🙂
        میشه این:

        < ?php comments_popup_link( __( 'No Comments.','slice' ), __('1 Comment.','slice' ), __('% Comments.','slice'); ?>
        

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

        واینکه یکم با آرامش برخورد کنید.

      9. اشکان کیانی گفت:

        سوال دومم اینه: کجاها از __ استفاده میکنیم. برای e- میدونم .

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

        دوباره سلام،
        خب،

        __()
        

        برای Return کردن یک ترجمه است ولی

        _e()
        

        برای echo کردن یک ترجمه است در واقع کد بالا خلاصه کد زیر هست.

        echo __();
        
  14. جلال گفت:

    با سلام و درود بر شما فؤاد طهماسبی.
    اول یه تشکر جانانه از مطالب خوب سایتتون واقعا محشره و دوم بایت آموزش های بی نظیرتون.

    آقا فؤاد من یه قالبی از سایت themforset گرفتم (وردپرسی) میخوام اونو بی زحمت اگه وقت دارین اونو برام فارسیش کنید. اگه مایل هستید من قالب رو براتون (ایمیل بدید) ارسال کنم . هر جوری که بخواین براتون
    جبران میکنم (پولی,نویسندگی,تبلیغات) من منتظر پاسخ شما هستم.امیدوارم که درخواست منو قبول کنید.

  15. Man گفت:

    خواهش میکنم دوست من

    واقعا ممنونم از جواب زیباتون

    خسته نباشید

  16. Man گفت:

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

    ممنون از آموزشه پر بارتان ، اما منظور از جمله بالا چیست ؟

    ممنونم

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

      ببخشید به خاطر دیرکرد در جواب سوالتون، میزبان وبسایت سرورهاشون رو انتقال دادن، و من با کلی خطا مواجه شدم. متوجه کامنت شما نبودم.
      منظور از ویژگی اصلی همان مولفه تغییر داده شده است برای مثال کد زیر را ببینید:

      .class{
          left:10px;
      }
      

      میشود:

      .class{
          left: auto;
          right: 10px;
      }
      
  17. حمید گفت:

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

    یاحق.

  18. کیاوش گفت:

    سلام مهندس طهماسبی
    متشکر از مطالب مفیدو کاربردیتون
    من دوتا مشکل دارم که فکر میکنم نیاز به کمی تغییر در کد اصلی افزونه ها داره
    1- می خوام چیدمان در tablepress به صورت random باشه موفق نمی شم فقط سطرها رو درست کردم ستون ها نمیشن.
    2- می خوام در ادامه ی باز شدن یه پنجره jquerry چند کد Flash و HTML اضافه کنم و موفق نمیشم

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

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

      سلام،
      به نظرم اگه از نویسنده این افزونه سوال کنید بهتر میتونه راهنمایی کنه. من آشنایی زیادی با این افزونه ندارم. اینم لینک پشتیبانی افزونه TablePress

  19. حمید گفت:

    بسیار متشکرم آقای طهماسبی. الان مستندات تم Sahifa رو چک میکنم میبینم چطور باید فارسی رو بهش بشناسونم اگه سوالی داشتم حتماً ازتون کمک میگیرم.
    ممنون

  20. حمید گفت:

    با سلام ، آقای طهماسبی لطف میکنید ایمیل خودتون بنویسید آخه روی یک قالب همه مراحلی که گفته بودید رو انجام دادم اما باز هم زبان فارسی رو بارگیری نمیکنه.
    من قالب رو آپلود کردم تا شما یه نگاهی بهش بندازید ببینید مشکل از کجاست.
    ممنون و با تشکر
    http://uplod.ir/rw4z38mo0waa/sahifa.zip.htm

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

      سلام،
      تم”Sahifa” یه تم خیلی معروفیه که از TIE Panel استفاده میکنه. در کل ورژن جدید این تم به صورت پیش فرض فارسی سازی شده و نیازی به فارسی کردن دوباره اون نیست! فقط باید از طریق مستندات پوسته، طریقه نصب و راه اندازی رو یاد بگیرید. من فایل آپلود شده شما رو هم تست کردم و مشکلی نداره و کاملا راست چین هست.
      در مورد ایمیل هم من براتون ایمیل فرستادم که میتونید از طریق ایمیل در ارتباط باشید.

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

*اگر پرسشی دارید که مربوط به این مطلب نیست لطفا در بخش پرسشها مطرح کنید. در غیر این صورت دیدگاه شما تایید نخواهد شد.


کد HTMLCSSJavaScriptPHP