آموزش فارسی سازی قالب

imehrdad · 26 ژانویه 2012

قسمت مقدماتی :
فارسی سازی قالب چیست ؟
اصولا فارسی سازی تغییر موقیعیت المانهای قالب و تبدیل استایل انگلیسی یا همون چپ چین به راست چین یا همون فارسی ( عربی و ...) هست
فارسی سازی متن موجود در قالب شامل فارسی سازی نمیشه ولی خب بصورت قراردادی اینکار هم موقع فارسی انجام میشه.
این آموزشها کدوم بخشها رو پوشش میده ؟
کلا برای فارسی سازی دانش 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
این قسمت می تونه خیلی بسط پیدا کنه واسه همین یه کوچولو توضیح میدم از روش رد می شم .

HTML:

<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 بالا نوشت رو میارم .

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 مورد نیاز برای فارسی سازی :

HTML:

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

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

HTML:

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

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

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

شماره 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> نوشته میشه .

شروع قسمت سوم :
خب مثالی که می خوایم روش کار کنیم به پیشنهاد دوست خوبمون TehranNet معرفی شدن
لینک قالب:
دمو:MagPress Demo | Just The Demo Site For MagPress.com
دانلود:http://www.magpress.com/download/285/
فایل های html: که قراره روشون کار کنیم هم براتون پیوست کردم حتما دانلود کنید روش کار کنیم آخر سر می چسبونیمش به قالب
نکته : به هیچ وجه روی استایل اصلی تغییرات نمیدیم اگه می خواین کارتون حرفه ای باشه یک فایل استایل با نام rtl.css یا هر چیزی بسازید و کد های فارسی سازی رو توی اون بنویسید این فایل رو همونطور که تو درس قبل گفتیم باید به اچ تی ام ال وصل کنید .
نکته 2 : استایل ها از بالا به پایین لود می شن یعنی برای اینکه تغییراتی که تو فایل rtl.css خودمون می دیم اعمال بشن باید زیر فایل استایل اصلی لود بشه مثل زیر

HTML:

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

[COLOR="#FF0000"]<link href=[COLOR="#FF8C00"]"rtl.css"[/COLOR] rel="stylesheet" type="text/css">[/COLOR]

</head>

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

تو قسمت 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;
}

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

کد:

#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;
}

پایان درس سوم:

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

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

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

کد:

#breadcrumbs { 
text-align: right;
}

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

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 :

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

فایل تمرین پایان درس 3 :

مشاهده پیوست RTL-L03.zip

COLOR="#EE82EE"]
فایل تمرین پایان درس 4 :
[/COLOR]

مشاهده پیوست Lesson4.zip

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

cclboys · 26 ژانویه 2012

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

MihanV · 26 ژانویه 2012

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

imehrdad · 26 ژانویه 2012

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

امید وارم مفید واقع بشه اگه خدا بخواد سعی می کنم هر روز یه درس اضافه کنم

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

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

Web-Master · 27 ژانویه 2012

به نقل از mehrdadsafary :
امید وارم مفید واقع بشه اگه خدا بخواد سعی می کنم هر روز یه درس اضافه کنم

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

عزیز دمت گرم تاپیک خیلی خوبه زدی و امیدوارم چیز های خوبی از اینجا یاد بگیرم

تاپیک سئو توی انجمن وردپرس فارسی هست مطالبش رو کپی بزنم و سوالاتی که پرسیده میشه رو از خود آقای مطهری بپرسم؟

البته با ذکر منبع

imehrdad · 27 ژانویه 2012

به نقل از Web-Master :
عزیز دمت گرم تاپیک خیلی خوبه زدی و امیدوارم چیز های خوبی از اینجا یاد بگیرم
تاپیک سئو توی انجمن وردپرس فارسی هست مطالبش رو کپی بزنم و سوالاتی که پرسیده میشه رو از خود آقای مطهری بپرسم؟
البته با ذکر منبع

ممنون دوست عزیز
این مبحث سئو یکم خاص هست و تاپیکی با این منظور در کنار آموزش باید هدف شفاف سازی کاربر ها و شناسوندن ابعاد کلاهی که با نام سئو اکثر مواقع به سرشون میذارن باید باشه
قسمت دوم آموزش به پست اول اضافه شد.
در مورد آموزشهای عملی اگه کسی سایتی مد نظر داره اعلام کنه که روی اون کار کنیم در غیر اینصورت روی سایت یاهو کار خواهیم کرد و به فارسی سازی آدرس:
http://en-maktoob.yahoo.com/?p=us
خواهیم پرداخت .

Javacl · 27 ژانویه 2012

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

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

cclboys · 29 ژانویه 2012

به نقل از mehrdadsafary :
امید وارم مفید واقع بشه اگه خدا بخواد سعی می کنم هر روز یه درس اضافه کنم

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

imehrdad · 1 فوریه 2012

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

TehranNet · 1 فوریه 2012

دستت درد نکنه
به قول جوات :

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

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

شاید من هم آموزشهایی که گذاشته بودم رو ادامه بدم

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

دمو:MagPress Demo | Just The Demo Site For MagPress.com
دانلود:http://www.magpress.com/download/285/

دمو:MagPress Demo | Just The Demo Site For MagPress.com
دانلود:http://www.magpress.com/download/283/

imehrdad · 1 فوریه 2012

به نقل از TehranNet :
دستت درد نکنه
به قول جوات :

شاید من هم آموزشهایی که گذاشته بودم رو ادامه بدم

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

دمو:MagPress Demo | Just The Demo Site For MagPress.com
دانلود:http://www.magpress.com/download/285/

دمو:MagPress Demo | Just The Demo Site For MagPress.com
دانلود:http://www.magpress.com/download/283/

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

imehrdad · 3 فوریه 2012

قسمت سوم اضافه شد .

iranbetting · 5 فوریه 2012

بعدی کی میذارید

chinatown · 6 فوریه 2012

دستت درد نکنه !

امید وارم همین روند ادامه داشته باشه ،به بوک مارک ها پیوست !

MihanV · 14 فوریه 2012

به نقل از sadeghspiderman :
سلام و خسته نباشید

فایل rtl.css کاملا صحیح آمادست و rtl.css در کنار style.css در پوشه قالب هستند. فقط چطور به html متصلش کنم تا ازش استفاده کنه؟

دقیقا باید چه چیز اضافه کنم به تگ هدر؟

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

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

این رو اضافه میکنم از از اون خط که این روز اضافه کردم ارور میگیره : Parse error: parse error in ...

تشکر

درود
این کد رو اضافه کنید به هدر قالب

HTML:

<link rel="stylesheet"  href="<?php bloginfo('template_directory'); ?>/rtl.css" type="text/css" media="screen" />

sadeghspiderman · 14 فوریه 2012

به نقل از MihanV :
درود
این کد رو اضافه کنید به هدر قالب

HTML:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/rtl.css" type="text/css" media="screen" />

ممنون از پاسخ سریعتون (ببخشید پست رو پاک کردم چون اون مشکل حل شد ولی شما سریع پاسخ دادی

و البته قالب کمی بهم ریخته بود ولی از همین کدی که شما دادید استفاده کردم حل شد)

این قالب خودش rtl.css رو داره و کلا توی تگ هدر فایل header.php این style.css رو کلا فراخوانی نکرده و یکجا کد اینترنال زیر آورده شده (که البته php هم هست پسوندش! )

کد:

<style type="text/css">
<?php require CWZ_DIR.'/style.php'; ?>
</style>

1- من کد شما رو زیر این قرار دادم لازمه اون style.css رو به صورت اکسترنال فراخوانی کنم؟ (اگه بدون پاک کردن کده که دادم این کارو کنم ارور میده)

2- الان که این کار رو کردم یه سری تغییرات کمی ایجاد شده به صورت صحیح ولی قالب قشنگ راست به چپ نشده (مثلا text-align ها و ...). باید خودم دستی این قسمتارو درست کنم؟ یعنی توی rtl.css اینارو در نظر نگرفتند؟!

MihanV · 14 فوریه 2012

به نقل از sadeghspiderman :
ممنون از پاسخ سریعتون (ببخشید پست رو پاک کردم چون اون مشکل حل شد ولی شما سریع پاسخ دادی و البته قالب کمی بهم ریخته بود ولی از همین کدی که شما دادید استفاده کردم حل شد)

این قالب خودش rtl.css رو داره و کلا توی تگ هدر فایل header.php این style.css رو کلا فراخوانی نکرده و یکجا کد اینترنال زیر آورده شده (که البته php هم هست پسوندش! )

کد:

<style type="text/css"> <?php require CWZ_DIR.'/style.php'; ?> </style>

1- من کد شما رو زیر این قرار دادم لازمه اون style.css رو به صورت اکسترنال فراخوانی کنم؟ (اگه بدون پاک کردن کده که دادم این کارو کنم ارور میده)

2- الان که این کار رو کردم یه سری تغییرات کمی ایجاد شده به صورت صحیح ولی قالب قشنگ راست به چپ نشده (مثلا text-align ها و ...). باید خودم دستی این قسمتارو درست کنم؟ یعنی توی rtl.css اینارو در نظر نگرفتند؟!

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

mazyar123 · 17 فوریه 2012

درود
تشکر می کنم

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

imehrdad · 20 فوریه 2012

بابت تاخیر عذر می خوام
و از تمام دوستان کمال تشکر رو دارم

درس چهارم اضافه شد .

xmixx · 23 مارس 2012

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

آموزش فارسی سازی قالب

Registered User

فایل های ضمیمه

Registered User

مدیر بازنشسته

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

کاربر فعال فوتبال

Registered User

Registered User

Registered User

Registered User

مدیر بازنشسته

کاربر فعال نرم افزار موبایل

مدیر بازنشسته

Registered User

Registered User

Registered User

بک‌لینک