آموزش فارسی سازی قالب وردپرس
با توجه به رشد روز افزون قالب‌های وردپرس و تنوع قابل توجه قالب‌ها؛ ضروری است که با فارسی سازی قالب‌ها از این تنوع بهره‌مند شویم.
اولین قدم برای فارسی سازی قالب وردپرس تسلط بر CSS است. اگر با این زبان آشنایی ندارید یا تسلط کافی ندارید؛ می‌توانید از سایت w3schools مهارت کافی را کسب کنید. برای فارسی سازی لازم است کدهای مرتبط با left,right,padding,margin.direction,text-align,float را تغییر دهید. تمامی کدهای مربوط به CSS را در فایل rtl.css باید بنویسیم. اگر قالبی این فایل را نداشت آن را در ریشه‌ی قالب اضافه کنید. لازم است برای راست چین شدن متن و ترکیب قرارگیری صحیح اعداد و متن در کنار هم به تگ body؛ direction: ltr و text-align: right می‌دهیم. در html به طور پیش فرض تمام اِلمان‌ها از بالا سمت چپ پشت سر هم قرار می‌گیرند. اِلمان‌هایی که inline-block هستند در کنار هم و از سمت چپ قرار می‌گیرند که در فارسی‌سازی با دادن float:right به selector مربوطه اِلمان‌ها از سمت راست در کنار یکدیگر قرار می‌گیرند. به تمام عناصر و باکس‌هایی که در کنار هم در یک ردیف هستند نیز float: right می‌دهیم تا از راست در کنار هم قرار گیرند. در عناصری که padding و margin دارند باید مقادیر مربوط به راست و چپ را با هم تعویض کنیم؛ برای مثال مقدار padding-left را باید برای padding-right قرار دهیم. اِلمان‌هایی که موقعیت absolute دارند باید مقادیر right و left آن‌ها با هم تعویض شوند. توجه کنید که اگر اِلمانی مقداری برای right فقط دارد آن مقدار را به left دهید و right: auto قرار دهید. در فهرست‌های انگلیسی جهت پیکان به سمت راست است که در فارسی باید جهت به سمت چپ تغییر کند. برای این منظور از کد زیر در selector مربوطه استفاده کنید:
مورد بعدی که باید تغییر دهیم فونت است تا حروف فارسی به درستی نمایش داده شوند. فرمت‌های فونت دلخواه خود را در هاست آپلود کنید. معمولا فونت‌ها در مسیر your theme/assets/fonts قرار دارند. پیشنهاد می‌شود از فرمت woff2 استفاده کنید که تمام مرورگرها آن را تشخیص می‌دهند. برای تبدیل فرمت فونت به فرمت وب می‌توانید از اینجا استفاده کنید. پس از افزودن فونت به هاست؛ کد زیر را در فایل rtl.css اضافه کنید:
font-family: 'your font name';
src: url('fonts/1.eot?#') format('eot'), /* IE6–8 */
url('fonts/3.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('fonts/2.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
سپس به selectorهای مربوطه نام فونتی که وارد کرده‌اید را نسبت دهید. هم‌چنین در کنار فونت خودتان فونت اصلی قالب را نیز به selectorهای مربوطه نسبت دهید تا حروف انگلیسی با ظاهر اصلی قالب نمایش داده شوند.
هر قالب عباراتی دارد که مربوط به خود قالب است و ارتباطی با محتوای وارد شده در پنل وردپرس ندارد. قالب‌ها فایلی با پسوند pot دارند که حاوی این عبارات است. این فایل در مسیر your theme/languages قرار دارد. پس از دانلود این فایل را با نرم‌افزار POEDIT ویرایش کنید. در نرم‌افزار روی دکمه‌ی create new translation کلیک کنید و زبان فارسی را انتخاب کنید و جلوی هر عبارت معادل فارسی آن را یادداشت نمایید. پس از ذخیره دو فایل با پسوندهای po و mo ایجاد می‌شوند که باید در کنار فایل pot آن‌ها را آپلود کنید. در برخی قالب‌ها پس از این کار عبارات هم‌چنان انگلیسی می‌مانند و باید این دو فایل را در مسیر /wp-content/languages/themes/your theme نیز آپلود کنید.
قالب اصلی حاوی محتوای انگلیسی است که باید تمام آن‌ها را با محتوای فارسی جایگزین کنید. سعی کنید حتما محتوای اصلی قالب را ترجمه کنید و محتوای دیگری را جایگزین نکنید تا بازدیدکننده تصور نکند این قالب با قالب اصلی متفاوت است.
خلاصه‌ای از عملیات مورد نیاز برای فارسی سازی قالب وردپرس:
inline-block elements -> float: right;
padding-left: x; padding-right: y; -> padding-left: y; padding-right: x;
margin-left: x; margin-right: y; -> margin-left: y; margin-right: x;
Arrows -> transform:rotate(180deg);
Fonts
Pot
Data Entry
نکته: در قالب‌ها اسلایدرهای carousel پس از دادن direction:rtl به تگ body به درستی کار نمی‌کنند که برای رفع این مسئله باید به selector اِلمان مربوطه direction:ltr دهید.
شما عزیزان می‌توانید تمامی سوالات خود را از طریق ارسال نظر مطرح کنید.
امیر درخشان‌پور
