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

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

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

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

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

به طور کلی هدف ما این است که همه عناصر قالب، در زبان فارسی به صورت کاملا قرینه با زبان انگلیسی به نمایش گذاشته شوند. برای این کار به ابزارهای اندکی نیاز دارید که آنها را به شما معرفی خواهیم کرد.

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

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

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

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

[php]/*
Theme Name: MyThemeName
Theme URI: https://tiktheme.ir
Author: tiktheme
Author URI: https://tiktheme.ir
Version: 1.0.0
*/[/php]

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

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

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

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

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

[php]body {
direction: rtl;
}[/php]

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

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

[php]text-align:left;[/php]

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

[php]text-align:right;[/php]

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

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

[php]float: left;[/php]

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

[php]float: right;[/php]

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

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

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

[php]margin-left: 15px;
margin-right: 0;
padding-left: 5px;
padding-right: 0;[/php]

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

[php]margin-left: 0;
margin-right: 15px;
padding-left: 0;
padding-right: 5px;[/php]

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

نکته اول: در راستچین کردن، media query ها و استایلهای مربوط به حالت واکنش گرایی قالب را فراموش نکنید.

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

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

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

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

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

نکته هفتم: فراموش نکنید که بلاک های code و pre بهتر است همواره نمایش ltr و چپ به راست داشته باشند و نوشته را در سمت چپ تراز کنند.

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

[php]margin-left:10px;[/php]

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

[php]margin-right:10px;[/php]

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

[php]margin-right:10px;
margin-left:0;[/php]

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

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

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

[php]border-left:1px solid black;
border-right : none;[/php]

پس از تغییر:

[php]border-right:1px solid black;
border-left : none;[/php]

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

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

اگر هم آیکن با استفاه از آیکن فونت ها مثل font Awesome در قالب قرار گرفته است، میبایست آیکن جایگزین مناسبی را از سری آیکن های این فونت برای آن در فایل rtl.css در نظر بگیرید. مثلا حالت زیر را در نظر بگیرید:

[php]content: “\f105”;[/php]

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

[php]content: “\f104”;[/php]

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

[php]left:0;[/php]

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

[php]right:0;[/php]

مطالب مرتبط:

فشرده سازی عکس ها در وردپرس

آموزش جستجوی تمام صفحه در وردپرس

کاهش دادن حجم تصاویر در وردپرس توسط افزونه Optimus

افزونه‌ای برای چک کردن دامین در وردپرس

منبع: تیک‌تم – ارائه دهنده مقالات: جلوگیری از هک وردپرس – آموزش وردپرس – خطاهای وردپرس