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

راست چین کردن قالب وردپرس

راست چین کردن قالب وردپرس

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

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

 

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

• برای این کار ابتدا فایل style.css را با یک ادیتور (مثلا ++N) باز کنید.
• فایل باز شده را با نام جدید rtl.css ذخیره کنید. الان شما دو فایل style.css و rtl.css دارید.
• آنگاه در صفحه وب سایت id یا class المان هایی را که می خواهیم راست چین کنیم را با مراجعه به کد HTML صفحه ( با استفاده از امکان inspect element موجود در مرورگرها ) بدست می آوریم.

 

• سپس در فایل style.css ، class یا id مورد نظر را جست جو کرده خصوصیاتی را که مربوط به قرار گرفتن در سمت چپ می باشد را به همراه id یا class در فایل rtl.css کپی می کنیم.

آنگاه چند مورد را در فایل rtl.css باید تغییر دهیم:

1. تمام خصوصیاتی را که به صورت left : X می باشد به left : auto و right : X تغییر می دهیم.
2. اگر خصوصیتی به صورت text-align : left آن را به text-align : right تغییر می دهیم.
3. اگر خصوصیتی به شکل float : left بود را به float : right تغییر می دهیم.

این کار را برای تمام المان های موجود در صفحه وب سایت انجام می دهیم ( خصوصیات المان ها را از style.css به rtl.css منتقل کرده و ویرایش می کنیم ) در پایان فایل rtl.css را ذخیره می کنیم.

 

اصول راست چین کردن

کد زیر را به تمام تگ بدنه قالب ویژگی direction:rtl را می افزاییم تا از نمایش اشتباه جهت کلمات فارسی در ترکیب با کلمات انگلیسی، نمایش اشتباه محل نقطه ها و علامات و به طور کلی تمامی مواردی که به نمایش راست به چپ متون مربوط میشوند جلوگیری کند:

body {
direction: rtl;
}

font-family:Tahoma, Arial; : با استفاده از این دستور شما می‌توانید برای شی ء مورد نظر از فونت‌های مناسب تری استفاده کنید.

Body{font-family: Tahoma, Arial;direction:rlt’}

تغییر جهت چینش نوشته ها

این سه خاصیت را تغییر میدهیم : text-direction ( جهت متن ) ، float ( تعیین موقعیت قرار گیری یک عنصر ) ،clear ( برای پاکسازی اطراف یک عنصر)

اگر خاصیت نوشته چپ چین باشد مثلا:

text-align: left;
float: right;
clear: left;

برای تغییر جهت نوشته مورد نظر و نمایش آن در سمت راست، عبارت فوق را به شکل زیر تغییر میدهیم :

text-align: right;
float: left;
clear: right;

تغییر جهت عناصر padding ها و margin ها

بعضی از تصاویر فقط برای یک جهت کاملا واضح هستند. حال یک نسخه افقی معکوس برای این تصاویر با استفاده از وردپرس rtl ایجاد می کنیم.برای معکوس کردن تصویر باید از ویژگی های ( attributes ) زیر استفاده کنید:

margin: حاشیه خارجی
padding: لایه داخلی. در واقع فاصله بین متن و borders ( خط مرزی ) را تعیین می کند.

فاصله های داخلی و بیرونی عناصر نیز با تغییر جهت قالب، نیازمند اعمال تغییراتی خواهند بود. در اینجا نیز فاصله های اعمال شده روی سمت چپ عناصر باید با فاصله های اعمال شده روی سمت راست عناصر جایگزین شوند. (و بالعکس)مثلا :

margin-left: 15px;
margin-right: 0;
padding-left: 5px;
padding-right: 0;

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

margin-left: 0;
margin-right: 15px;
padding-left: 0;
padding-right: 5px;

برای قسمت‌های مختلف قالب که شامل: منو‌ها.زیر منوها.جستجوی سایت.لوگو و… می‌شود نیز به صورت بالا عمل راست چین کردن را انجام دهید.

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

 

ابزارهای وردپرس RTL

افزونه RTL Tester این امکان را می دهد تا به راحتی با وردپرس rtl جهت متن خود را تغییر دهید. پس از نصب این افزونه محتوای سایت شما به صورت راست چین می شود.از افزونه WP-RTL برای افزودن قابلیت وردپرس rtl به نوشته ها وبسایت استفاده کنید.

 

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

 

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