آموزش طراحی قالب وردپرس #۱۵(فارسی سازی)

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

خوب، امروز سراغ فارسی کردن تمی میریم که خودمون درست کردیم!

اما با یاد گرفتن درس امروز میتونیم تم های انگلیسی که تو خود سایت وردپرس هستند هم فارسی کنیم.

برای تغییر دادن زبان یک تم باید خود قالب این قابلیت رو داشته باشه!

یعنی کسی که داشته درستش میکرده یک سری چیزها رو رعایت کرده باشه!

اگه یادتون باشه ما تابعی داشتیم به اسم “e_” که گفتم کاربردش مثل echo هست و جمله ی نوشته شده رو عینن چاپ میکنه!

اما یک فرقی هم گفتم داره که بعدن میگم! اون بعدن یعنی الان!

فرقش اینه که ما چیزهایی رو که با این تابع نوشته باشیم رو میتونیم ترجمه کنیم! یعنی این تابعی در وردپرس هست که کار echo رو به همراه امکان translate یا ترجمه برای ما انجام میده!

البته یک تابع دیگه که ۲تا underline در کنار هم هست ( __ ) که همین کار رو انجام میده، تقریبن!

خوب اول باید تشکر کنم از wp-persian.com که تو فارسی سازی وردپرس و امکانات فارسی برای این سیستم خیلی زحمت میکشن، و بعد بریم سراغ سازگار کردن تم با translate یا به عبارتی اضافه کردن امکان ترجمه به اون.

برای شروع باید یک توضیح کوچیک بدم که وردپرس چه میکنه!

میدونیم که موقع نصب وردپرس میتونیم بسته ی فارسی نرم افزار رو دانلود و نصب کنیم.

وقتی وردپرس ما فارسی است تمام تم ها و پلاگین هایی که ما دانلود میکنیم (آنهایی که زبان فارسی دارن) تبدیل به فارسی میشن و ما میتونیم از این امکان لذت ببریم!

فایلهای زبان وردپرس دو فایل با فرمت های mo و po هستن که ما برای ویرایش po که مدنظرمون هست به برنامه ی poedit نیاز داریم که از لینک زیر قابل دریافت هست.

لینک دانلود poedit برای ویندوز(غیر مستقیم)

لینک صفحه دانلود poedit برای mac os  و linux

حالا ما با این برنامه و یک خط کد میتونیم شروع کنیم به ترجمه ی تم مورد نظرمون.

اول کد زیر رو در header.php در هر جا خواستیم(ترجیحن بالا باشه مثلا زیر تگ title ) مینویسیم.

<?php load_theme_textdomain( ‘ tenet ‘ , get_template_directory() . ‘ / languages ‘ ) ; ?>

این تابعی است برای افزودن قابلیت ترجمه به قالب و languages/ فولدری است به نام languages که در amoozesh قرار داره و فایل های mo و po زبان های مختلف در این فولدر قرار میگیرن.

توضیح اینکه اگه بخواهیم فایلهای زبان تو خود فولدر amoozesh قرار بگیرن میتونیم از کد زیر استفاده کنیم:

<?php load_theme_textdomain( ‘tenet ‘ , get_template_directory () ) ; ?>

به همین راحتی!

حالا اون tenet که نوشتم یعنی چی؟

اگه دقت کرده باشین بعضی از توابع e_ که نوشتم به صورت

<?PHP _e ( ‘ neveshteye morede nazar ‘ , ‘ tenet ‘ ) ?>

هستن.(در فایل comment.php به این صورته چون فایل شلوغی بود خودم اینکارو کردم)

این tenet همون tenet هست! یعنی باید این نوشته ها یکی باشن تا ترجمه به درستی انجام بشه!( به رنگها توجه کنید)

خوب حالا وارد برنامه ی poedit میشیم که نصبش کردیم!

میتونید این فیلم رو برای راهنمای نصب ببینید:

TeneT-Tutorial-Poedit-Setup (1067 دانلود ها)

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

بعد از ذخیره کردن فایل وقتی میریم به صفحه ی اصلی سایت ترجمه ها انجام شده!(البته اگه وردپرس فارسی رو نصب کرده باشین)

اما یک سری هم ترجمه نمیشن!

دلیلش اینه که من توابع رو کامل ننوشتم بعنی مثلا فقط نوشتم :

<?PHP _e ( ‘ Edit ‘ ) ?>

در صورتی که باید به صورت زیر مینوشتم:

<?PHP _e ( ‘ Edit ‘ , ‘ tenet ‘ ) ?>

پس فهمیدیم که اون عبارت یا آرگومان دوم چقدر اهمیت داره!

تنبلی هم نکنید کاری نداره عوضش یاد میگیرید حسابی!

یک نکته، ترجمه ی F jS, Y رو j F y قرار بدید( این برای بهتر نشون دادن تاریخه)

خوب از اونجایی که من هم طبق این آموزش دارم جلو میرم و هر کاری از شما میخوام خودم هم انجام میدم این کار رو هم کردم و حدود ۵ دقیقه طول کشید همه اش (البته با دوپینگ ++notepad) که بدون اون احتمالا میشد ۱۰ دقیقه پس لطفا فحش ندید که چرا این رو از اول نگفتم! من فولدر languages خودم رو میزارم اگه خواستین دانلود کنید:

languages (1042 دانلود ها)

دقت کنید میتونید از منوی catalog منابع رو به روز رسانی کنید.

البته از فایل من استفاده نکنید بهتره چون امکان خطا هست.

خوب کار اصلی فارسی سازی این بود و فقط میمونه درست کردن صفحه!

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

برای اینکار وردپرس با پیگیری های wp-persian یک امکان قرار داده که ما بدون دستکاری فایل اصلی style.css بتونیم کار خودمون رو راه بندازیم!

چون اگه قرار بود اینو خراب کنیم دیگه زبونهای دیگه مشکل دار میشدن و با ایرانیها از اینی که هستن بهتر میشدن!

بنابراین توضیحات بیخود میریم سراغ rtl.css که باید در فولدر amoozesh بسازیم و شروع کنیم

قبل اینکه کدنویسی رو شروع کنیم اینو بگم که rtl.css بعد از style.css لود میشه و حرف آخر رو rtl میزنه

بنابر این اگه ما مثلا در style.css و در تگ body فونت رو Arial قرار داده باشیم و در rtl.css فونت رو tahoma بزاریم در صفحه ی اصلی فونت tahoma خواهد بود!

پس ما اگه بخواهیم یک ویژگی در style رو در زبان فارسی نداشته باشیم و یا به صورت دیگه ای داشته باشیم کافیه در rtl اون رو عوض کنیم!

وارد صفحه ی اصلی سایت بشید و ببینید که نوشته ها از چپ به راست هستند و علامت ها و پرانتز ها در جای خودشون نیستن!

بدون اینکه صفحه رو ببندید وارد rtl.css بشید و کد زیر رو بنویسید:

body{
direction:rtl;
}

فایل رو ذخیره کنید و به صفحه برگردین و F5 رو بزنید، میبینید که با همین یک خط نوشته ها از چپ به راست شد!

این مهمترین مساله ی ما بود!

حالا برای اینکه نوشته ها از سمت راست (سر خط!!) شروع بشن باید از کد زیر استفاده کنیم:

body{
direction:rtl;
text-align:right;
}

ذخیره و بعد reload یا همون F5

میبینید که نوشته ها به سمت راست رفتن!

چقدر زیباست!

حالا فونت رو هم تغییر بدیم بد نیست! چون مناسب ترین فونت برای زبان فارسی tahoma است از اون استفاده میکنم:

body{
direction:rtl;
text-align:right;

font-family:Tahoma, Geneva, sans-serif;
}

از این راحت تر نمیشه!

حالا کم کم سایتمون داره زیبا میشه، واقعا زیبا!

چون underline یا خط زیر فونت در فارسی نه تنها زیبا نیست که بسیار هم زشت است! اون رو بر میدارم:

a:link, a:visited{
text-decoration:none;
}

ما هر جای سایت که بزنه تو ذوقمون و اونو کور کنه میتونیم عوض کنیم، اگه یادتون رفت یا سختتون بود که تگی که هدفتون هست رو پیدا کنید بهترین راه حل بی شک google chrome یا افزونه ی firebug فایرفاکس هستند که از ویژگی inspect elements استفاده میکنن و قبلا راجع به نحوهی کار توضیح دادم.

.sidebar ul li h2{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:600;

}

#commentform p{
direction:rtl;
}

#comment .textfield {
text-align:right;
}

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

من تا فردا صبح هم میتونم کد اضافه کنم اما دیگه باید اومدن به سایت منو فراموش کنید! دیگه باید خودتون دستاتونو کثیف کنید و وارد کار بشید(البته اگه تا حالا نشدید!) شما از این به بعد میتونین حتی سیستم هایی به جز وردپرس هم تغییر بدین.

الان دید شما نسبت به قالب ها و سیستم های تحت وب عوض شده و فکر میکنید که میتونید همه چیز رو شخصی کنید!

شما باید از سلیقه و ابتکار خودتون استفاده کنید و با رنگها، بردارها، فونتها و لوگوها و غیره و غیره استفاده کنید تا یک قالب شخصی بسازید و لذت به اشتراک گذاشتن اون رو بچشید!!

فکر میکنم یک پست دیگه بنویسم که کار رو تموم کنم و یک سری ریزه کاری رو توضیح بدم و دیگر هیچ!

اگه سوالی، جوابی چیزی بود مثل همیشه در خدمتم!

مراقبت کنید از تن و روح با ارزشتون!

بابای

آپدیت:

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

به کد زیر دقت کنید:

<? php comments_popup_link (‘No Comments’, ‘1 Comment ‘, ‘% Comments’);  ? >

ما میخواهیم ۳ آرگومان این تابع هم مثل توابع e_ آماده ی ترجمه بشن برای اینکار و با توجه به اینکه اطراف این آرگومان ها ‘ ‘ هست از __ استفاده میکنیم!

و در نهایت باید چیزی شبیه به این داشته باشیم:

<?php comments_popup_link(__(‘No comments’, ‘tenet’), __(‘one comment’, ‘tenet’), __(‘% comments’, ‘tenet’)); ?>

دقت کنید که __ عبارت ترجمه شده رو با ‘ ‘ در تابع قرار میده و به این صورت تعداد نظرات به فارسی نمایش داده میشن.

به همین راحتی…

موفق باشید.

بابای باز!

‏45 دیدگاه برای ”آموزش طراحی قالب وردپرس #۱۵(فارسی سازی)

  1. سلام آقا سیاوش من هر کاری کردم نشد ببینم اگه تمامی جملات و نام هایی که می خواهیم فارسی کنیم ، به فارسی بنویسم و Encoding ها رو UTF-8 کنیم با کاری که شما کردید (و رو مال من جواب نداد)
    چه فرقی می کنند ؟ آیا گناه دارد ؟

    1. بیخود کرده جواب نده!
      سعی کنید حتمن درست میشه.
      نه چه گناهی؟! فقط مشکل اینه که اون استاندارد تره و میتونین public کنین ملت فرنگی هم بتونن استفاده کنن! اما اگه واسه خودتون درست میکنین مشکل خاصی نداره

      1. ببینین آقا سیاوش مشکل من wp فارسی هست من نسخه ۳و۸و۲ از خود سایتش دانلود کردم اما تا میرم که نصبش کنم می گه wp-config.php پیدا نشد ما به این احتیاج داریم ، در صورتی که که اون انگلیسی ای که من از سایت شما دانلود کردم شروع به ساختن یکی از این فایل ها کرد . حالا راهی هست که من ورد پرس فارسی نصب کنم ؟

  2. سلام خوبی پسر خاله 😀
    می گم اولا چندتا اشکال داشتم
    ۱- اون درسی که در مورد اتایل . سی اس اس بود اونجا که
    sidebar
    float:left
    فکر نمی کنی باید right باشه ؟؟؟
    دوما پس چرا دو تا ساید بار رو یاد ندادی ؟
    سوما من یه مشکل پیش اومده واسم صفحه اینجوری شده :
    http://sefaresh2.persiangig.com/other/test.JPG
    اینم لینک فولدر آموزش یه نگاه بنداز ببین اشکال از کجاست؟؟؟؟
    http://sefaresh2.persiangig.com/other/amoozesh.zip

    ممنون
    خیلی آقایی

  3. جیمیل کردی یا ایمیل ؟!!
    آخه یک ایمیل ( جیمیل ) از طرفت بود که فکر کنم منو با یکی دیگه اشتباه گرفتی سیاوش …. نمی دونم

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

  5. سلام آقا سیاوش
    من تمام کارهایی که گفته بودین رو مو به مو انجام دادم ولی
    قسمت نظرات فارسی نمیشن.
    وقتی که آرگومان ‘tenet’رو در قسمت ساید بار برای تقویم و بقیه وارد
    میکنم ترجمه نمیشن در حالی که قبل از این که آرگومان رو وارد کنم
    فارسی هستش!!
    در ضمن فیلم آموزش ‘poedit’رو نمیشه دانلود کرد.
    لطفا کمکم کنید.

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

  7. اون مشکل رو حل کردم نفهمیدم چیشد! :دی حالا وقتی این کد رو در قالب میزارم این ارور رو میده
    ارور میده که در خطی که کد رو گزاشتی مشکل داره مثلا۱۱

  8. سلام، سیاوش جان! من دریم ویور ۸ رو نصب کردم (اون موقع که واسه مکرومیدیا بود بنده خدا) اما کلن نمی دونم چطوری باید استفاده کنم ازش واسه ویرایش ویژوالِ تمی که می خوام بسازم. وقتی فایل ایندکس رو باهاش باز می کنم صفحه ی دیزاین اصلاً بدرد نمی خوره!

    1. سلام
      اولن جان بچه ات یه جدیدش رو نصب کن، بعدم فقط تو قسمت کد میتونی استفاده کنی ازش، انتظار درست نشون دادن رو نداشته باش چون ما صفحه استاتیک اچ تی ام ال نمیسازیم که اون بتونه نشونش بده، فقط میتونه تو نشون دادن کدها کمکمون کنه یکم

  9. سلام خسته نباشید یه راهنمایی در زمینه فارسی سازی میخواستم

    میخواستم بدونم من وقتی فارسی سازی قالب رو انجام میدم وقتی در داخل قالب ها رو ویرایش میکنم و مثلا همین بخش نظرات رو name رو فارسی میزنم نام مربع مربع میشه و همین طور جاهای دیگه باید چیکار کنم که به این شکل نشه ممنون اگه همیجا پپاسخ بدین

    1. نمیدونم مشکل از چیه، ولی دو تا مشکل میتونه باشه، یکی اینکه باید unicode باشه که احتمالش کمه مشکل این باشه، بیشتر فکر میکنم به این خاطره که فونتش چیزیه که فارسی نداره، سعی کنین تغییرش بدین به Tahoma

  10. سلام ممنون از پاسخگویی تون

    من از این روش فارسی سازی استفاده نمیکنم یعنی کامل متوجه نشدم
    و روشه خودم را انجام میدم از طریق سی اس اس راست چین کردن و تغییر فونت ها به tahoma رو انجام میدم

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

    در مورد روش فارسی سازی که در این سایت توضیح داده شده من انجام دادم فقط یک کلمه پیدا میکنه و در قسمتی که گفته شده باید خودمون _e __ را خودمون قرار بدهیم باید در کجا و به چه شکل باشه

    اگه کمی بیشتر توضیح بدهید ممنون میشم تا از این روش هم انجام بدم

    ممنون از شما

    1. باید unicode, utf-8 سیو کنید فایلهارو حتمن، اگه مشکلش این نباشه نمیدونم چیه دیگه، برای ترجمه هم، باید متن هایی که عینن نوشته میشن تو قالب رو تبدیل به این فانکشن ها کنین مثلن اگه نوشته wordpress باید تبدیل کنید به

      _e ('wordpress','tenet')

  11. سلام مرسی از پاسخ گویی تون

    فایل php رو نودپد پلاس ادیت میکنم و یک سیو میزنم میشه راهنمایی کنید چطور سیو با یونیکد یا utf بزنم

    ممنون

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

  12. صبح تا حالا دارم می‌خونم رسیدم به اینجا!

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

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

    فقط یک چیز رو بگم سیاوش، چون می‌دونی که من خیلی دوستت دارم!… چیزه، می‌گم یک قالب تر تمیز و آماده نداری؟!!!
    اسمایلی (بچه پُر رو!)

  14. سلام سیاوش؛ خوبی؟
    من هنوز اینجام! سیاوش من فایل po درست کردم همونجوری که گفته بودی. ترجمه‌اش کردم سیو نمی‌کنه!
    یک پیام خطا می‌ده روی خط ۸۶ ام.
    گوگل کردم می‌گن ظاهرا بخاطر علامت % یا همچین چیزی باید باشه.

    فایلش ایناهاش:
    http://pastebin.com/Qju0B9SB

    اصل پیام خطایی که می‌ده هم اینه:
    fa_IR.po:86: a format specification for argument 1 doesn’t exist in ‘msgstr’
    msgfmt: found 1 fatal error

  15. سیاوش حل شد!
    ببین حدسم درست بود از همون علامت درصد بود. گذاشتمش بین یک جفت پرانتز درست شد.

    گفتم بگم که خوشحال بشی.

  16. سلام . آقا سیاوش ۳ تا سوال داشتم. من نفهمیدم این تابع هایی که با e_ بود رو باید تبدیل به __ کنیم؟
    این کارو رو باید تو همه فایلها انجام بدیم؟
    منظور از اون tenet چیه؟

    1. نه قرار نیست تبدیل کنین، بعضی جاها _e کاربرد داره بعضی جاها (یعنی تو آرگومان ها ) باید از __ استفاده کنید tenet هم کلیده، هرچی میتونه باشه فقط باید یک کلمه واحد باشه

  17. سلام به همگی
    آقا سیاوش من یک قالب فارسی کردم ولی یه مشکل اساسی داره تقریبا اکثر قال بها این مشکل رو دارد و اون هم عبارت ادامه مطلب هست که به صورت continue reading نشون داده می شه من می خوام که این عبارت رو همراه با یه دکمه و یا حداقل فارسی با نام ادامه مطلب نمایش بدم لطفا اگه میشه راهنمایی کنید و بگید که کد ها رو چجوری بزارم متشکر!

  18. با سلام
    بنده فایل ترجمه رو اکی کردم اما فقط صفحه اول ترجمه میشه و پنل کاربری که ترجمه شده رو فراخوانی نمیکنه چیکار کنم؟

    1. وردپرسی که نصب کردین فارسی هست؟ اگه بله مشکل رو بیشتر توضیح بدین، اگر وردپرس انگلیسی نصب کردین وارد فایل wp-config بشین و مقدار wplang رو فارسی قرار بدین به این صورت:
      define('WPLANG', 'fa_IR');
      و وردپرس فارسی رو از wp-persian.com دانلود کنین و فولدر languages رو از wp-content توی سایت خودتون در همین فولدر کپی کنین

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.