آموزش فارسی سازی قالب [بایگانی] - انجمن تخصصی وب هاستینگ ایران

ورود

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

Hippo

September 17th, 2012, 16:13

قسمت مقدماتی :

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

این آموزشها کدوم بخشها رو پوشش میده ؟
کلا برای فارسی سازی دانش Html CSS و بندرت PHP و Jquery )اگر هم لازم بشن بقدری موردی و راحت هستن که نیازی به آموزش ندارن) وهمچنین زبان فارسی لازمه به عبارتی اموزشهای ما شامل دو مورد اول
میشه.

لوازم مورد نیاز برای آموزشها :
1 - مقداری حوصله و حرص به یاد گرفتن
2- یه ادیتور خوب من خودم از rapidcss استفاده میکنم ولی توصیه نمیشه می تونید از Notepad ++ و یا Edit Plus استفاده کنید.
3 – یه مرورگر خوب خودم یکی از طرفداران تعصبی Opera هستم ولی از هر مرورگری بجز IE میتونید استفاده کنید :دی
4 – پلاگین و اضافات مورد نیاز :
برای Opera از DragonFly
برای FireFox از FireBug
برای IE و Chorme از Developer Tools و پلاگین های مشابه می تونید استفاده کنید
5- بستر مورد نیاز برای بالا آوردن قالب
6- دنبال کردن هر آموزش که هر جا می بینید

مقدمه ای بر HTML /CSS
این قسمت می تونه خیلی بسط پیدا کنه واسه همین یه کوچولو توضیح میدم از روش رد می شم .

<P> سلام </p> <a href=”#” > لینک آموزش </a> <div class=”amozesh”> آموزش </div> <div id=”farsisazi”> فارسی سازی </div> <div class=”madar”> <div class=”bache”> </div> </div>

خب تو قسمت بالا یه سری کد اچ تی امل متداول آورده شده هر المنت توی این Html میتونه یه استایل مخصوص خودش توی CSS داشته باشه .
حالا CSS چی هست ؟ css هم مثل اچ تی ام ال یه زبان کد نویسی میتونه بحساب بیاد حتما فایل های Style.css یا فایلهای مشابه با پسوند .css رو کنار فایلهای قالب ها تون دیدین اینها همون استایل ها هستند در زیر یکی از استایلهای که میشه برای html بالا نوشت رو میارم .

P } Color :#000; } A { Color : red; } .amozesh { Font-size:12px; } # farsisazi{ Font-size:18px; } .madar .bache { Font-size:20px; }

توی استایل ما به هر المانی که ما بین دو تا تگ <body></body> هستند و بعد از > شروع میشن می تونیم استایل بدیم
می تونیم مثل استایل تعریف شده برای p و a استایل عمومی تعریف کنیم یا مثل استایل های که به کلاس ها و آی دی ها دادیم استایل خصوصی
نکته : کلاس های تعریف شده در HTML در CSS با نکته (.) و آی دی های تعریف شده در HTML در CSS با شارپ (#) معرفی میشن
مثال: در کدهای بالا amozesh یک کلاس بوده و farsisazi یک آی دی میباشد نمونه استایل هر دو رو مقایسه کنید.
نکته 2 : از هر آی دی در هر صفحه فقط باید یکبار استفاده کرد.

کد های CSS مورد نیاز برای فارسی سازی :

Text-align:left; Float:right; Direction:rtl;

تقریبا میشه گفت هر قالبی رو فقط با استفاده از این سه تا میشه فارسی کرد .
خط اول مربوط به چینیش متن یا محتوی هست که دارای خصوصیت های Left , Right , Center, Justify, Inherit
خط دوم مربوط به محل قرار گرفتن و یا چسبیدن یک المان هست که دارای خصوصیت های Left, Right , None
خط سوم مربوط به راست به چپ کردن یا برعکس یک المان هست و دارای خصوصیت های Rtl,Ltr, Inherit
هستند.
قسمت اول آموزش تموم شد :دی
فقط به این نکته توجه کنید که قرار نیست نسخه همگانی بپیچیم و اشتباهات رایجی که کل قالب رو با استایل زیر فارسی می کنن استفاده کنیم .

Body { Text-align:right; Direction:rtl; }

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

Hippo

September 17th, 2012, 16:15

قسمت دوم :

نکات مربوط با inspect element:
این قابلیت بسیار مفید هست و کارش این هست که تو همون صفحه سورس صفحه و استایل های اون صفحه رو لود میکنه و مهم تر از اون اینکه شما می تونید با بردن موس بروی دیو ها و المانها کد html و css مربوط به اون المان رو مشاهده کنید و همون لحظه اونو تغییر بدین و تغییرات رو مشاهد کنید .
تقریبا اکثر مرورگر های این قابلیت رو دارن که اگه تو صفحه کلیک راست کنید گزینه Inspect Element رو خواهید دید
اگر هم نداشته باشه بعد از نصب پلاگین firebug یا هرپلاگینی مشابه اون این گزینه ظاهر میشه
اگر روی این گزینه کلیک کنید در پایین صفحه قسمتی مشابه عکس زیر باز میشه

http://forum.persiantools.com/attachments/f28/attachment-103300d1327687142-inspect_element.jpg

شماره 1 : اگر رو این ایکون کلیک کنید و موس رو سایت ببرین موس رو رو هر قسمتی که ببرین با هاله آبی اون قسمت رو جدا میکنه و کدهای مربوط به اون رو لود میکنه
شماره 2 : استایلی که به المان انتخاب شده داده شده رو نشون میده در عکس بالا استایل داده شده به h1 که داخل دیو با آی دی pagetitle قرار داره رو لود کرده
خط های سبز کدهای سی اس اس هست که به h1 مزبور داده شده و شما می تونید با دبل کلیک بروی خاصیت داده شده با زدن کلید های بالا و پایین اون رو تغییر بدین
با دوبار کلیک کردن تو قسمت سفید یک خط جدید باز می شه و می تونید هر استایلی که می خواین رو اونجا وارد کنید
اگر روی خط ها موس رو نگر دارین آیکون ویا چک باکسی نشون داده میشه که می تونید اون خط رو غیرفعال یا فعال کنید.
شماره 3 : نشون میده که استایل لود شده تو کدوم فایل و کدوم خط اون فایل قرار داره
اگر روش کلیک کنید فایل استایل رو براتون باز میکنه
شماره 4 : المان انتخاب شده رو با اولویت اینکه بترتیب تو کدوم دیو ها و المان ها قرار داره نشون میده و می تونید با کلیک روی هر کدوم بین اونها حرکت کنید .
شماره 5 : کد html مربوط به المان رو نشون میده و میتونید با دبل کلیک تو این قسمت کد رو تغییر بدین .

نحوه اتصال استایل به Html :
خب گفتیم که برای شکل دادن به المنت های html باید استایل تعریف کنیم حالا روشهای شناسوندن استایل به html رو بررسی میکنیم:
اگر سورس هر سایتی رو باز کنید می تونید خطهایی مشابه خط پایین رو داخل تگ <head></head> پیدا کنید

<link rel="stylesheet" type="text/css" href="style.css" />

این روش روش اکسترنال نامیده میشه که سرو کار ما هم با این هست و فایل style.css رو به html وصل میکنه در قسمت href باید آدرس دقیق فایل داده بشه .
روش پایین هم روش اینترنال هست که بدرد ما نمی خوره

<style type="text/css"> body { color:red; } </style>

تو این روش هم استایل همونجا مابین تگ های <style> </style> نوشته میشه .

Hippo

September 17th, 2012, 16:18

قسمت سوم :

خب مثالی که می خوایم روش کار کنیم به پیشنهاد دوست خوبمون TehranNet معرفی شدن

لینک قالب:
دمو:MagPress Demo | Just The Demo Site For MagPress.com (http://demo.magpress.com/?wptheme=Convine)
دانلود:http://www.magpress.com/download/285/

فایل های html: که قراره روشون کار کنیم هم براتون پیوست کردم حتما دانلود کنید روش کار کنیم آخر سر می چسبونیمش به قالب

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

نکته 2 : استایل ها از بالا به پایین لود می شن یعنی برای اینکه تغییراتی که تو فایل rtl.css خودمون می دیم اعمال بشن باید زیر فایل استایل اصلی لود بشه مثل زیر

<head> <link href="main_style.css" rel="stylesheet" type="text/css"> <link href="rtl.css" rel="stylesheet" type="text/css"> </head>

خب یه قالب 3 ستونه داریم که باید فارسی بشه .
گام اول : فایلهای پیوست شده رو دانلود کنید و فایل RTL.html رو باز کنید اگه راحت نیستین رو خود سایت دمو کار کنید
اولین قسمتی که تو اکثر قالبا باید فارسی بشه منو هست اگه بعد از فعال کردن inspect element (طبق درس قبل و زدن گزینه 1) و رفتن روی قسمتهای مختلف منو می تونید حالتهای عکس پایین رو مشاهده کنید :

http://forum.persiantools.com/attachments/f28/attachment-106077d1328289971-menu_rtl.jpg

تو قسمت 1 همونطور که می بینید موس رو روی منو بردیم و کل منو با آی دی navigation انتخاب شده
اگه موس رو به قسمت چپ جایی که با علامت بنفش رنگ مشخص کردم ببرین دیو یا قسمتی که تب های منو رو تو خودش قرار داده انتخاب میشه این قسمت یک لیست هست و توی استایل همون قسمت هم همونطور که می بینید با استایل UL کار می کنیم حالا میخوایم که این قسمت بره سمت راست یا بچسبه به راست پس گزینه Float باید بجای چپ , راست (Right) باشه
پس فایل rtl.css که ساختیم و به html وصل کردیم رو باز می کنیم و خط زیر رو بهش اضافه می کنیم و بعد سیو و ریلود.

#dropmenu, #dropmenu ul { float: right; {

همونطور که دیدین منو به سمت راست چسبید .

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

#topsearch #searchform #s { Text-align:right; }

خب تو قسمت 4 بعد از کلیک روی جای که علامت زدم استایل Li داخل UL رو لود می کنه یعنی تک تک منو های تنها کاری که باید بکنیم اینه که منو ها رو ببریم سمت راست پس :

#dropmenu li { float: right; border-right: 0px solid #D9D3C4; border-left: 1px solid #D9D3C4; }

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

#dropmenu, #dropmenu ul { float: right; } #topsearch #searchform #s { Text-align:right; } #dropmenu li { float: right; border-right: 0px solid #D9D3C4; border-left: 1px solid #D9D3C4; }

Hippo

September 17th, 2012, 16:20

قسمت متوسط – حرفه ای این درس :

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

#dropmenu ul { background-color: #F0EADF; border-color: #D9D3C4; border-style: solid solid none; border-width: 1px; left: -999em; {

یعنی مقدار left موقعیت منوی چایلد رو مشخص میکرد حالا ما باید موقعیت جدید رو با کد پایین بهش بدیم .

#dropmenu ul { right:-36px; left:0em; }

این زیر منو یه زیر منوی دیگه هم میتونه داشته باشه که استایل زیر بهش داده شده :

#dropmenu ul ul { margin: -2.2em 0 0 10em; }

کد marginهم بشکل margin:Top Right Bottom Left; بجای هر موقعیت مقدار متناظر اون نوشته میشه یا مثل کد پایین که جدا جدا نوشته بشه و کارش اینه که به اندازه عدد نوشته شده او المان رو جابجا کنه
به هر حال لازمه که موقعیت چپ (10em) رو پاک کنیم و موقعیت جدید از سمت راست بهش بدیم. مثل کد پایین

#dropmenu ul ul { margin-bottom: 0px; margin-left: 0em; margin-right: 12.2em; margin-top: -2.2em; }

و در آخر باید متن زیر منو ها رو راست چین کنیم :

#dropmenu li li { text-align:right; }

Hippo

September 17th, 2012, 16:25

قسمت چهارم آموزش :

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

http://forum.persiantools.com/attachments/f28/attachment-111990d1329702020-inspect_element.jpg

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

#breadcrumbs { text-align: right; }

خب سایت ما دارای 3 تا ستون هست و می تونیم به دلخواه جاشون رو عوض کنیم یا همونجور بذاریم باشه برا اینکه تمرین ها بیشتر بشه کلا جاشون رو عوض می کنیم و کتگوری رو می بریم سمت چپ و اسلاید رو میاریم سمت راست .

Html این قست به این شکلیه

<div id="main"> <div id="breadcrumbs"> <div id="content"> <div id="sidebar">

دیو با آی دی content شامل اسلایدر و پست های زیرینش میشه
Div با آی دی sidebar شامل دو ستون کتگوری و لاست نیوز اینا میشه
پس ما اول باید دیو content رو بچسبونیم به سمت راست و دیو sidebar رو به سمت چپ
بعد از انتخاب دیو با آیدی content به وسیله inspect element استایل اون که کد پایین هست لود میشه :

#content { float: left; height: auto; margin: 0px; padding: 0px 0px 3em; width: 550px; }

تو این کد float:left; این قسمت رو به سمت راست چسبونده که باید با right عوض کنید

پس کد زیر رو به فایل rtl.css اضافه می کنیم :

#content { float: right; }

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

Padding: azBala azRast azPayin azChap;

این برای margin هم صادقه اینجا کد ما

padding: 0px 0px 3em;

نکته : em واحد اندازه گیری بر اساس اندازه فونت هست (هر em معادل اندازۀ فونت عنصر مادر اون المان هست. مثلا اگه دو div تو در تو داشته باشیم و font-size اون رو 2em بدیم، و همین خصوصیت رو در در div داخلی برابر 2.1em بزاریم، فونت ها در div داخلی 10% بزرگتر از div بیرونی نمایش داده میشن و مثل همون مقدار دهی درصدی هست. یعنی میشه به جای 2.1 مقدار 110% رو نوشت.)
زیر دیو content یه دیو دیگه هست با آیدی contentinner این دیو از این نظر اهمیت داره که بهش مارجین داده شده و این باعث میشه که از سمت راست 10 پیکسل فاصله بگیره وقتی که ما این ستون رو می بریم به سمت راست پس باید این مقدار 10 پیکسل رو بجای چپ از راست فاصله بخوره

#contentinner { height: auto; margin: 0px 10px 0px 0px; padding: 0px; width: auto; }

پس کد زیر رو به rtl.css اضافه می کنیم

#contentinner { margin: 0px 0px 0px 10px; }

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

#sidebar-left { float: left; margin: 0px 10px 0px 0px; padding: 0px; width: 312px; }

باید float رو عوض کنیم مقدارش رو و به right تغییر بدیم
ولی یه مشکلی که هست فاصله 10 پیکسل هست که از سمت راست گرفته و باعث میشه که این ستون بره تو ستون کتگوری اینا

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

#sidebar-left { float: right; margin: 0px 0px 0px 10px; }

خب همونطور که دیدن فارسی سازی موقعیت المانها تموم شد .
و فقط باید متن ها رو راست چین کنیم .
خب تمامی پست های ما تو دیو post-meta لیست میشن برای اینکه متن داخلش رو راست چین کنیم کافی کد زیر رو به فایل rtl.css امون اضافه کنیم .
تمام متن راست چین شد یدونه عکس هم با کلاس thumb داره توش که اگه بخواین می تونید اینم ببرین سمت راست .

پس کد پایین رو هم به rtl.css اضافه می کنیم :

#post-entry .post-meta .thumb { float: right; padding: 0px 0px 0px 10px; }

پدینگ داده شده واسه اینه که متن ها به عکس نچسبن.
خب حالا متن ساید بار رو هم راست چین می کنیم

یعنی کد زیر رو به فایل rtl.css اضافه می کنیم .

#sidebar { Text-align:right; Direction:rtl; }

تو ساید بار همون طور که می بینید یه پست ها دارای thumb هستن شاید بخوایین که اینارم بیارین سمت راست با inspect element باز کلاس یا آیدی شون رو پیدا می کنیم و بهشون استایل میدیم
اما این عکسها کلاس خاصی ندارن و ناچارا از دیو مادرشون کمک می گیریم

پس کد زیر رو به rtl.css اضافه می کنیم :

ul.sidebar_list .featured-category .feat-cat-entry .feat-cat-meta img { margin: 3px 0px 6px 10px !important; float:right; }

نکته : وقتی یه استایلی داره بهتون زور میگه یا از یجایی دیگه فراخونی میشه و شما نمیدونید کجاست یعنی در کل هر کاری می کنید تغییرات شما رو اعمال نمی کنه می تونید خط استایلتون با واژه جادویی !important; ببندین این میگه که این خط مهمه و فقط اینو بخون .
و در آخر Headline ها و فوتر رو هم راست چین می کنیم و تمام
واسه فوتر بعد از پیدا کردن کلاس یا آیدی اون بوسیله inspect element کافیه بهش text-align:right; بدین

پس به فایل rtl.css این خط رو هم اضافه می کنیم :

#footer-widget-area { Text-align:right; Direction:rtl; }

خوب در آخر به تمامی مواردی که نیازی به حساسیت زیادی ندارن یه نسخه کلی می پیچیم
این موارد می تونه تگ های p یا همون پاراگراف و تگ های H یا همون سرتیتر ها باشن

پس خط زیر رو هم به اول فایل rtl.css اضافه می کنیم

p,h2,h3,h4,h5,h6{ text-align: right !important; direction:rtl !important; }

تصویر پایان درس 4 :

http://forum.persiantools.com/attachments/f28/attachment-111989d1329700961-less4.jpg

خب این درس هم تموم شد http://f.ptcdn.org/images/smilies2/wacsmiley.gif. امید وارم مفید واقع شده باشه
فایل اصلی بصورت Html و فایلهای پایان هر درس پیوست میشن و می تونید ازشون استفاده کنید .