تعریف دستورات استایل متفاوت برای زبان های مختلف سایت

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-07-22 14:30:42

سایت های چند زبانه اگر به طور استاندارد طراحی شده باشند، در تگ html آنها خاصیتی مانند lang="en-US" وجود خواهد داشت که این خاصیت در هر نسخه زبان سایت متفاوت است. برای مثال کد زبان فرانسه fr-FR است و .. . اما آموزشی که در این تاپیک از تاکینا قصد دارم به شما ارائه کنم، امکان اعمال و تعریف استایل های متفاوت، مخصوص زبان های مختلف است. یعنی برای نسخه انگلیسی سایت دستورات استایل خاصی برای یک بخش اعمال کنیم، یا برای نسخه عربی یک استایل متفاوت دیگر!

همه ی چیزی که نیاز داریم وجود همین خاصیت lang="en-US" در تگ html سورس صفحات ماست. در وردپرس این خاصیت به صورت خودکار در سورس صفحات چندزبانه اضافه می شود. اما برای اختصاص دادن دستورات استایل به زبان موردنظر، باید خاصیت کد زبان مورد نظرمان را قبل از کلس یا آی دی دستورات استایل اضافه کنیم.

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

html[lang="en-US"] .talkina {text-align: left;}

ترفند اصلی کل این آموزش، اضافه کردن کد زبان مورد نظر یعنی html[lang="en-US"] (البته با کد زبان موردنظر خودتان)، پیش از هر دستور استایل است. یا مثلا یک بخش در سایت داریم که یک عنوان را نمایش می دهد و آی دی title برای آن تعریف شده و قصد داریم در زبان فرانسوی، رنگ این متن را قرمز کنیم. بنابراین چنین دستور استایلی را استفاده می کنیم:

html[lang="fr-FR"] #title {color: red;}