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

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

 

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

راستچین کردن قالب وردپرس به این مفهوم است که کاری کنیم که قالب مورد نظرمان، در سایت هایی که از زبانهای راست به چپ مانند فارسی استفاده میکنند، به درستی به نمایش در بیاید. راستچین کردن به مفهوم مجهز کردن قالب به استایلهای RTL است. عبارت RTL مخفف Right To Left بوده و به مفهوم  راست به چپ است. تقریبا میتوان گفت که این کار همیشه از اصول یکسانی پیروی میکند و جدا از چند نکته کوچک، همواره میتوانید با پیروی از چند اصل، به سادگی قالب دلخواهتان را راستچین کنید. به طور کلی هدف ما این است که همه عناصر قالب، در زبان فارسی به صورت کاملا قرینه با زبان انگلیسی به نمایش گذاشته شوند. برای این کار به ابزارهای اندکی نیاز دارید که در ادامه به شرح آنها میپردازیم.

 

مهارت ها و ابزارهای مورد نیاز برای RTL کردن قالب وردپرس

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

 

هرچند در حال حاضر از کروم و فایر فاکس گرفته تا اپرا و edge همگی از امکان inspect کردن عناصر صفحه پشتیبانی میکنند اما در این میان استفاده از مرورگهای گوگل کروم و فایرفاکس را به شما توصیه میکنیم. (در این زمینه همه چیز به این بستگی دارد که شما با کدام یک از این مرورگرها راحت تر هستید)

 

 

ایجاد فایل rtl.css در قالب وردپرس

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

 

پس برای شروع لازم است که فایلی با نام rtl.css در فولدر مربوط به قالب وردپرس خود ایجاد نمایید. سپس فایل مربوطه را با اطلاعاتی از قبیل نام قالب، نام نویسنده، لینک نویسنده و توضیحات لازم پر کنید. مثلا:

/*
Theme Name:     MyThemeName
Theme URI:      http://www.20script.ir
Author:         20script.ir
Author URI:     http://www.20script.ir
Version:        1.0.0
*/

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

 

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

برای راستچین کردن یک قالب، میبایست ابتدا آن را روی وردپرس، نصب و فعال کنید. سپس صفحه سایت را باز کرده و عناصری که موقعیت و نوع نمایش آنها اشتباه است را با ابزار توسعه مرورگر مورد بررسی قرار دهید. یعنی مثلا اگر قرار است موقعیت لوگوی قالب را تصحیح کنید، روی آن راست کلیک کرده و گزینه Inspect Element را انتخاب میکنید تا استایلهای مربوط به این عنصر در اختیار شما قرار بگیرند. پس از یافتن استایلهای مربوطه، آنها را بر اساس اصولی که در ادامه ذکر میشود، ویرایش کرده و یک به یک در فایل rtl.css قرار میدهید.

 

 

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

 

اضافه کردن direction:rtl به عناصر قالب

عموما در راستچین کردن ، به تمام تگ بدنه قالب ویژگی direction:rtl را می افزاییم. مثلا:

body {
    direction: rtl;
}

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

 

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

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

text-align:left;

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

text-align:right;

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

 

تغییر حالت شناوری عناصر

تغییر حالت شناوری یا float عناصر بیشتر در مواردی مثل سایدبار ها، ناحیه محتوا و همچنین جهت نمایش آیتم های منو و موارد مشابه کاربرد دارد. در این حالت برای تغییر موقعیت یک عنصر از سمت چپ به راست، در صورتی که مقدار زیر را مشاهده کردید:

 

float: left;

آن را به حالت زیر تغییر دهید:

float: right;

مجددا در این مورد نیز بالعکس این نکته هم صادق است. همچنین باید توجه داشته باشید که عناصری که دارای float:none هستند، نیاز به اعمال چنین تغییری نخواهند داشت.

 

تغییر جهت کادر ها

مورد دیگری که شاید نتوان آن را جزو اصول کلی و اجباری راستچین کردن پوسته وردپرس قرار داد ولی رعایت و توجه به آن خالی از لطف نیست، تغییر جهت کادر هاست. (اگر ocd داشته باشید، همین مسئله را میتوان بر روی سایه ها هم پیاده سازی کرد که البته شاید کمی زیاده روی به نظر برسد!) تغییر جهت کادر ها شاید به خودی خود فاقد اهمیت ویژه باشد اما اگر به عنصری در حالت شناوری ماوس روی آن، کادر اضافه شود، اصلاح جهت کادر، اهمیت بیشتری پیدا میکند. یک نمونه از تغییر جهت کادر را در زیر مشاهده میکنید.

 

پیش از تغییر:

border-left:1px solid black;
border-right : none;

پس از تغییر:

border-right:1px solid black;
border-left : none;

البته استایل فوق به صورت نمونه درج شده و ممکن است شیوه تعریف کادر در قالب شما با حالت فوق متفاوت باشد.

 

تغییر موقعیت های ثابت

اگر در جایی از قالب موقعیت های ثابت مانند زیر مشاهده میکنید:

left:0;

باید آنها را به حالت برعکس خود تبدیل کنید. مانند زیر:

right:0;

این حالت را خصوصا در جهت باز شدن منو ها، یا دکمه بازگشت به بالا و … خیلی مشاهده خواهید کرد.

 

تغییر padding ها و margin ها

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

 

به عنوان مثال:

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.css یک تصویر جایگزین را با جهت مناسب جایگزین آن کنید. اگر هم آیکن با استفاه از آیکن فونت ها مثل font Awesome در قالب قرار گرفته است، میبایست آیکن جایگزین مناسبی را از سری آیکن های این فونت برای آن در فایل rtl.css در نظر بگیرید. مثلا حالت زیر را در نظر بگیرید:

content: "\f105";

در حالت راستچین، کد فوق به شکل زیر تغییر میکند:

content: "\f104";

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

 

 

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

رعایت نکات زیر در راستچین کردن قالب وردپرس میتواند به حصول نتیجه ای بهتر و کامل تر در rtl کردن قالب های وردپرس منجر شود :

• نکته اول: در راستچین کردن، media query ها و استایلهای مربوط به حالت واکنش گرایی قالب را فراموش نکنید.
• نکته دوم: در محل های مناسب، اندازه فونت ها را با توجه به فونتی که در زبان فارسی برای قالب استفاده میکنید، تغییر دهید.
• نکته سوم: در برخی مواقع، اعمال ویژگی direction:rtl منجر به بروز اختلال در کارکرد برخی از اسلایدر ها و carousel ها میشود. در چنین شرایطی برای این نوع عناصر در فایل rtl.css جهت ltr را تعریف کنید و سپس اگر نوشته یا محتوایی در آنها موجود است که نیازمند استایلهای راست به چپ است، استایل مربوطه را مستقیما روی عنصری اعمال کنید که به آن احتیاج دارد و نه روی کل اسلایدر یا carousel.
• نکته چهارم: برخی از استایلها توسط فایل های جاوااسکریپت یا برخی توابع بر روی عناصر اعمال میشوند. در چنین شرایطی اگر اضافه کردن استایلهای راست به چپ به فایل rtl.css روی عناصر مربوطه، بی تاثیر بود، بهتر است رفتار تابع یا فایل استایل مورد نظر را مطابق نیازهای محیط راست به چپ خود تغییر دهید. (مثلا اگر امکان صدا کردن یک تابع با پارامتر rtl وجود دارد، میتوانید شرطی را به قالب اضافه کنید که انجام این کار را به عهده بگیرد.)
• نکته پنجم: از کپی کردن همه محتوای فایل استایل اصلی قالب و قرار دادن آن در فایل rtl.css خودداری کنید. تنها بخش هایی از استایل های قالب را به فایل rtl.css اضافه کنید که به آنها نیاز دارید.
• نکته ششم: حتی الامکان از درج استایلها های مربوط به رنگ و مواردی که به راستچین کردن قالب مرتبط نیستند در فایل rtl.css خودداری کنید.
• نکته هفتم: فراموش نکنید که بلاک های code و pre بهتر است همواره نمایش ltr و چپ به راست داشته باشند و نوشته را در سمت چپ تراز کنند.

 

همچنین یک نکته دیگر وجو دارد که نیازمند کمی توضیح است. فرض کنید که کد زیر را در فایل استایل اصلی قالب داشته باشیم:

margin-left:10px;

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

margin-right:10px;

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

 

در چنین حالتی کافی است استایل را به صورت زیر در فایل rtl.css اعمال کنیم:

margin-right:10px;
margin-left:0;

حالا چون margin-left تعریف شده در فایل rtl.css به استایل های اصلی قالب اولویت دارد، دیگر فاصله اضافه ای در سمت چپ عنصر مورد نظر مشاهده نخواهید کرد. این مسئله تقریبا در تمامی حالات، چه برای فاصله ها و چه برای کادر ها، صادق خواهد بود.

 

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

 

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