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

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

اول یک نکته بگم، من یک اشتباه بد کردم(هر چند نتیجه اش به این شدت بد نیست!) اما خیلی حالم گرفته شد! در درس آموزش طراحی قالب وردپرس #۱۲(تقسیم بندی فایلها۱) در مورد هدر یک اشتباهی کردم اگه شما اون درس رو بدون ویرایش خوندید باید یک تغییر کوچیک تو فایلهاتون بدین!

واقعا متاسفم امیدوارم دیگه تکرار نشه!

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

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

چون درس یکمی طولانی شد لطفا روی لینک ” دنباله ” کلیک کنید تا متن کامل رو ببینید

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

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

اگه یادتون باشه ما تابعی داشتیم به اسم “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

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

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

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

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

<?PHP _e ( ‘ Edit ‘ ) ?>

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

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

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

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

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

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

languages

دقت کنید میتونید از منوی 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’)); ?>

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

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

موفق باشید.

بابای باز!