آموزش راستچین کردن قالب وردپرس

راستچین کردن قالب وردپرس به این مفهوم است که کاری کنیم که قالب مورد نظرمان، در سایت هایی که از زبانهای راست به چپ مانند فارسی استفاده می کنند، به درستی به نمایش در بیاید.
راستچین کردن قالب وردپرس
راستچین کردن به مفهوم مجهز کردن قالب به استایلهای RTL است یعنی استایل راست به چپ است. به طور کلی هدف ما این است که همه عناصر قالب، در زبان فارسی به صورت کاملاً قرینه با زبان انگلیسی به نمایش گذاشته شوند. برای این کار به ابزارهای اندکی نیاز دارید که آنها را به شما معرفی خواهیم کرد.
مهارت ها و ابزارهای مورد نیاز برای RTL کردن قالب وردپرس
برای راستچین کردن قالب وردپرس نیاز به آشنایی مختصری با CSS خواهید داشت. علاوه بر این به یک ویرایشگر متنی مانند notepad++ نیز جهت اضافه کردن و ویرایش استایلهای css احتیاج دارید. هرچند این کار را با هر ویرایشگر متنی میتوان انجام داد اما انتخاب یک ویرایشگر مخصوص کدنویسی می تواند در ساده تر شدن کار به شما کمک کند. آخرین ابزار مورد نیاز شما، یک مرورگر است که در آن قابلیت inspect کردن عناصر به شکلی مناسب در اختیار شما قرار بگیرد.
هرچند در حال حاضر از کروم و فایر فاکس گرفته تا اپرا و edge همگی از امکان inspect کردن عناصر صفحه پشتیبانی می کنند اما در این میان استفاده از مرورگهای گوگل کروم و فایرفاکس را به شما توصیه می کنیم.
ایجاد فایل rtl.css در قالب وردپرس
به طور استاندارد و پیشفرض، در وردپرس کلیه استایل های مربوط به نمایش راست به چپ قالب را در فایلی با نام rtl.css قرار می دهیم. این فایل پس از ایجاد شدن، در صورتی که سایت در محیط فارسی زبان (یا هر زبان دیگری که نیازمند استایلهای راست به چپ باشد) بارگذاری شود، توسط وردپرس در قالب فراخوانی شده و استایلهای آن بر روی قالب اعمال می شوند. بنابراین برای راستچین کردن قالب وردپرس، ما همه استایلهای مورد نیاز خود را در این فایل قرار می دهیم.
پس برای شروع لازم است که فایلی با نام rtl.css در فولدر مربوط به قالب وردپرس خود ایجاد کنید. سپس فایل مربوطه را با اطلاعاتی از قبیل نام قالب، نام نویسنده، لینک نویسنده و توضیحات لازم پر کنید. برای مثال:
/*
Theme Name: MyThemeName
Theme URI: https://sitename.com
Author: sitename
Author URI: https://sitename.com
Version: 1.0.0
*/
توجه: پر کردن اطلاعات بالا ضروری نیست چرا که وردپرس اطلاعات مربوط به نام قالب و … را از فایل style.css خواهد خواند ولی به هر حال جهت خوانایی بهتر و خصوصاً برای مشخص بودن نسخه ای که استایلها را برای آن نوشته ایم، بهتر است این اطلاعات را در فایل rtl.css درج کنید. استایل های مورد نیاز جهت نمایش راست به چپ قالب را می توانید در ادامه به همین فایل اضافه کنید.
اصول راستچین کردن قالب وردپرس
برای راستچین کردن یک قالب، باید ابتدا آن را روی وردپرس، نصب و فعال کنید. سپس صفحه سایت را باز کرده و عناصری که موقعیت و نوع نمایش آنها اشتباه است را با ابزار توسعه مرورگر مورد بررسی قرار دهید. یعنی مثلاً اگر قرار است موقعیت لوگوی قالب را تصحیح کنید، روی آن راست کلیک کرده و گزینه Inspect Element را انتخاب می کنید تا استایلهای مربوط به این عنصر در اختیار شما قرار بگیرند. پس از یافتن استایلهای مربوطه، آنها را بر اساس اصولی که در ادامه ذکر می شود، ویرایش کرده و یک به یک در فایل rtl.css قرار می دهید.
راستچین کردن قالب وردپرس، جدا از چند نکته کوچک، تقریباً همیشه از اصول یکسانی پیروی می کند که عبارتند از :
اضافه کردن direction:rtl به عناصر قالب
در راستچین کردن، به تمام تگ بدنه قالب ویژگی direction:rtl را اضافه می کنیم. مثلاً:
body {
direction: rtl;
}
این مسئله از نمایش اشتباه جهت کلمات فارسی در ترکیب با کلمات انگلیسی، نمایش اشتباه محل نقطه ها و علامت ها و به طور کلی تمامی مواردی که به نمایش راست به چپ متون مربوط می شوند جلوگیری می کند. باید توجه داشته باشید که نمایش راستچین یک نوشته، با نمایش نوشته در سمت راست متفاوت است.
تغییر جهت چینش نوشته ها
مرحله بعدی تغییر جهت چینش نوشته ها خواهد بود. یعنی اگر در نسخه انگلیسی نوشته ای در سمت چپ سایت نشان داده می شود، در نسخه فارسی باید در سمت راست نشان داده شود و بالعکس. مثلاً فرض کنیم عنصری دارای ویژگی زیر باشد:
text-align:left;
برای تغییر جهت نوشته مورد نظر و نمایش آن در سمت راست، عبارت فوق را به شکل زیر تغییر می دهیم:
بالعکس حالت فوق نیز صادق است. یعنی اگر نوشته ای در سمت راست باشد و بخواهید که موقعیت آن را به سمت چپ تغییر دهید، کافی است بالعکس شیوه فوق را انجام دهید.
تغییر حالت شناوری عناصر
تغییر حالت شناوری یا float عناصر بیشتر در مواردی مثل سایدبار ها، ناحیه محتوا و همچنین جهت نمایش گزینه های منو و موارد مشابه کاربرد دارد. در این حالت برای تغییر موقعیت یک عنصر از سمت چپ به راست، در صورتی که مقدار زیر را مشاهده کردید:
float: left;
آن را به حالت زیر تغییر دهید:
تغییر padding ها و margin ها
فاصله های داخلی و بیرونی عناصر نیز با تغییر جهت قالب، نیازمند اعمال تغییراتی خواهند بود. در اینجا نیز فاصله های اعمال شده روی سمت چپ عناصر باید با فاصله های اعمال شده روی سمت راست عناصر جایگزین شوند. (و بالعکس) این حالت را خصوصاً در دیدگاه های تو در تو در قالب های وردپرس به وفور خواهید دید.
به عنوان مثال:
margin-left: 15px;
margin-right: 0;
padding-left: 5px;
padding-right: 0;
تبدیل می شود به:
margin-right: 15px;
padding-left: 0;
padding-right: 5px;
نکات مهم در در راستچین کردن قالب وردپرس
۱: در راستچین کردن، media query ها و استایلهای مربوط به حالت واکنش گرایی قالب را فراموش نکنید.
۲: در محل های مناسب، اندازه فونت ها را با توجه به فونتی که در زبان فارسی برای قالب استفاده می کنید، تغییر دهید.
۳: در برخی مواقع، اعمال ویژگی direction:rtl منجر به بروز اختلال در کارکرد برخی از اسلایدر ها و carousel ها می شود. در چنین شرایطی برای این نوع عناصر در فایل rtl.css جهت ltr را تعریف کنید و سپس اگر نوشته یا محتوایی در آنها موجود است که نیازمند استایلهای راست به چپ است، استایل مربوطه را مستقیماً روی عنصری اعمال کنید.
۴: برخی از استایلها توسط فایل های جاوااسکریپت یا برخی توابع بر روی عناصر اعمال می شوند. در چنین شرایطی اگر اضافه کردن استایلهای راست به چپ به فایل rtl.css روی عناصر مربوطه، بی تاثیر بود، بهتر است رفتار تابع یا فایل استایل مورد نظر را مطابق نیازهای محیط راست به چپ خود تغییر دهید.
۵: از کپی کردن همه محتوای فایل استایل اصلی قالب و قرار دادن آن در فایل rtl.css خودداری کنید. تنها بخش هایی از استایل های قالب را به فایل rtl.css اضافه کنید که به آنها نیاز دارید.
۶: در صورت امکان از درج استایلها های مربوط به رنگ و مواردی که به راستچین کردن قالب مرتبط نیستند در فایل rtl.css خودداری کنید.
۷: فراموش نکنید که بلاک های code و pre بهتر است همواره نمایش ltr و چپ به راست داشته باشند و نوشته را در سمت چپ تراز کنند.
لازم به ذکر است که مرورگر ابتدا استایل اول را می بیند و ۱۰ پیکسل فاصله از سمت چپ روی عنصر مورد نظر اعمال می کند و سپس استایل درج شده در فایل rtl.css را می بیند و ۱۰ پیکسل هم فاصله از سمت راست روی عنصر مورد نظر درج می کند. در نتیجه عنصر مورد نظر از دو طرف فاصله پیدا می کند. این در حالی است که ما فقط می خواستیم فاصله راست را جایگزین فاصله چپ کنیم.
در چنین حالتی کافی است استایل را به صورت زیر در فایل rtl.css اعمال کنیم:
margin-right:10px;
margin-left:0;
حالا چون margin-left تعریف شده در فایل rtl.css به استایل های اصلی قالب اولویت دارد، دیگر فاصله اضافه ای در سمت چپ عنصر مورد نظر مشاهده نخواهید کرد. این مسئله تقریباً در تمامی حالات، چه برای فاصله ها و چه برای کادر ها، صادق خواهد بود.
تغییر جهت کادر ها
تغییر جهت کادر ها و راستچین کردن شاید به خودی خود فاقد اهمیت ویژه باشد اما اگر به عنصری در حالت شناوری ماوس روی آن، کادر اضافه شود، اصلاح جهت کادر، اهمیت بیشتری پیدا می کند. یک نمونه از تغییر جهت کادر را در زیر مشاهده می کنید.پیش از تغییر:
border-left:1px solid black;
border-right : none;
پس از تغییر:
border-left : none;
البته استایل فوق به صورت نمونه درج شده و ممکن است شیوه تعریف کادر در قالب شما با حالت فوق متفاوت باشد.
تغییر جهت آیکن ها
در برخی موارد در قسمت هایی مانند لیست ها یا منو ها، از آیکن های جهتی استفاده می شود که پس از RTL کردن قالب، با توجه به تغییر جهت نوشته ها، تناسبی با محل قرار گرفته در آن ندارند. در این حالت در صورتی که آیکن استفاده شده به حالت تصویری باشد، باید در فایل rtl.css یک تصویر جایگزین را با جهت مناسب جایگزین آن کنید.
اگر هم آیکن با استفاه از آیکن فونت ها مثل font Awesome در قالب قرار گرفته است، باید آیکن جایگزین مناسبی را از سری آیکن های این فونت برای آن در فایل rtl.css در نظر بگیرید. مثلاً حالت زیر را در نظر بگیرید:
content: “\f105”;
در حالت راستچین، کد فوق به شکل زیر تغییر می کند:
اگر در جایی از قالب موقعیت های ثابت مانند زیر مشاهده می کنید:
باید آنها را به حالت برعکس خود تبدیل کنید:
درباره Mostafa Shoa
مدیر تیم پارس نویس، کارشناس مهندسی نرم افزار، مدرس دوره های برنامه نویسی و طراحی سایت در مدارس تیزهوشان، مشاور تبلیغات و بازاریابی استارتاپ ها و کسب و کارهای اینترنتی
نوشته های بیشتر از Mostafa Shoa
دیدگاهتان را بنویسید