دهکده آی تی » فارسی سازی قالب با CSS



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

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

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

body {
text-align: center;
direction: rtl;
font-family:tahoma;
margin-top:10px;
margin-bottom:10px;
color:#666666;
background-color: #E0E0E0;
{

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

#content {
margin-top: 20px;
margin-bottom: 0px;
direction:rtl;
text-align:right;
margin-left: 180px;
margin-right: 180px;
font-family: tahoma, arial, sans-serif;
font-size: 11px;
line-height: 15px;
color: #333333;
{

به قسمتی که پر رنگ شده است دقت کنید. منظور از id همین است. در این مثال، تمام دستوراتی که در داخل علامت } قرار گرفته اند، نحوه ی چیدمان مطالب بلاگ بنده را مخشص می کنند.

دقت کنید هر جایی که از direction: rtl استفاده کردید، باید از text-align:right نیز استفاده کنید تا مطالب را راست چین کند. با انجام این کار ها، لااقل محتوای سایت شما به درستی به نمایش در خواهد آمد.
کار دیگری که باید بکنید، این است که فونت ها را به Tahoma تغییر دهید. علت این امر هم که کاملا واضح است! برای اینکه منو ی سایت نیز به سمت راست بیاید، می توانید در قسمت مربوطه که معمولا با عناوینی مانند side# مشخص می شود، از تگ float: right استفاده نمایید. به احتمال زیاد جواب خواهید گرفت.

همچنین ممکن است بخواهید که در قسمت نظرات، وقت کسی مشغول نوشتن نظر است، مطالب از راست به چپ تنظیم شوند و مشکلی برای نویسنده به وجود نیاید. این کار نیز به راحتی صورت می پذرید:

input, textarea {
direction: rtl;
text-align: right;
font-family:tahoma;
margin: 1px;
{

با افزودن این چند خط به CSS خود، نه تنها تمام فیلد های متنی، از راست به چپ و با فونت تاهوما تنظیم می شوند، بلکه این تغییرات بر روی دکمه هایی مانند ارسال نظر نیز اعمال می شود که مسلما جلوه ی قالب شما را عوض می کنند.

حال یک سوال پیش میاید و آن اینکه ما چگونه بفهمیم هر قسمت از قالب که قصد انجام تغییر در آن را داریم، با چه id مشخص شده است؟ این سوال دو جواب دارد. اول اینکه اگر کمی وارد باشید و با قالب ور بروید، خودتان می توانید id مربوطه را پیدا می کنید! اما علاوه بر اینکه این راه وقت گیر است، ممکن است عده ای، زیاد به این کار وارد نباشد. راه حل بهتر در استفاده از مرورگر فایرفاکس و استفاده از افزونه ی Web Developer نهفته است. شما می توانید با استفاده از این افزونه مدت ها ذوق زده باشید! البته من نحوه ی استفاده از قسمت های مختلف این افزونه را به خودتان واگذار می کنم اما یک توضیح برای پیدا کردن id ها بدهم. بعد از نصب این افزونه، از طریق گزینه ی information و انتخاب Display ID & Class Dtails می توانید به هدف خود برسید!

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


از این مطلب پرینت بگیرید | لینک بازتاب | نظرات این مطلب را از طریق فید دنبال کنید.

مطالب مرتبط:

۱۷ نظر

  1. keshvary گفته:

    جالبه ولی فکر نکنم روی ورد پرس کار کنه .

  2. admin گفته:

    وردپرس دات کام. نه وردپرس

  3. بی خدا گفته:

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

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

  4. صبحونه گفته:

    سلام من جاش رو پیدا کردم فقط نمی دونم چطور می تونم به قسمت پنل مدیریتش برم وگرنه می تونم مثل کسایی که عضو شدن به طور عادی مطلب پست کنم این لینک رو نگاه کن
    http://it.parsbb.com

  5. صبحونه گفته:

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

  6. صبحونه گفته:

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

  7. صبحونه گفته:

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

  8. صبحونه گفته:

    ببخشید که مزاحمت شدم ها

  9. صبحونه گفته:

    درسته حق با آی تی نگار است که گفت بعضی ها فکر کردن شما به بازدید کننده نیاز دارید همین الان یک نفر هم برای من همین رو نوشت راجع به دسکتاب هم بگم که بدرد نمی خوره همون یاهو بهتره

  10. صبحونه گفته:

    من این نسخه رو دانلود کردم ولی هیچ فایده ای نداره و بدرد کار ما نمی خوره یعنی هیچ راه دیگه ای نیست

  11. صبحونه گفته:

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

  12. صبحونه گفته:

    فقط جلسه رو کی می خوایم بذاریم

  13. شایا گفته:

    ایول! داری به رشد صنعت IT در کشور کمک می‌کنی‌آ!
    من فقط یه چیز رو بگم : بگو که قبل از اضافه کردن به طور مثال float: right; باید ببینن float: left; هست که پاک کنن یا نه! :دی!
    این مشکل گاهی وقت‌ها واسه خود من هم پیش میاد! از بس مردم بد CSS می‌نویسن!

  14. صبحونه گفته:

    من صفحه رو گذاشتم

  15. Mmahdi گفته:

    به این سادگی که توضیح دادی هم نیست.

  16. بهارک گفته:

    در مورد استفاده از direction باید بگم که بهتر توی body استفاده نشه، در این صورت با مشکلاتی روبرو خواهید شد مثلا افتادن یک اسکرول بار زیر وب سایت مورد نظر می باشد
    البته اگر ساختار شما با div صورت گرفته باشد نه با table.

  17. علی جان گفته:

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

نظر شما