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

[مصطفی قلیزاده 11]

قسمت اول

سلام ،

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

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

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

1- تمامی مرور گر ها (چون باید دائما قالب خود را با مرور گرهای خود تست کنید

2- یکی از اضافات firefox به نام ; cssviewerکه میتونید از اینجا دانلودش کنید: https://addons.mozilla.org/en-US/firefox/addon/2104

3- برنامه معروف photoshop هر ورژنی که بود

4- برنامه dreamviewer

5- ابزار webdeveloper مخصوص فایرفاکس

مقدمه در مورد دستورات css

i هر دستور css دارای سه بخش به ترتیب زیر است

selector {property:value}

مثال

body {color:black}

body نام بخشی است که قرار است خاصیت به آن مربوط شود در ایجا خاصیت رنگ است که ارزش سیاه را دارد . همچنین میتوان این تگ ها را گروهی بگار برد مثلا اگر بخواهید مثلا اگر بخواهید تمامی عناوین به رنگ سبز باسد میتوانید آن را گروهی بکار ببرید

مثال

h1,h2,h3,h4,h5,h6
{
color:green
}

عنی h1 تا 6 همگی سبز باشد

نکته در مورد نام بخش ها نگران نباشید . اگر همراه با آموزش جلو بیایید خود به خود همگی را حفظ خواهید شد

نکته : کسانی که کد نویسی html را میدانند این دروس برای آنان بسیار ساده خواهد شد چرا که css پیوستگی مشخصی با html دارد

به عنوان آموزش اول با دستور direction شروع میکنیم که خاصیت است

direction میتواند دارای 3 ارزش متفاوت باشد

direction: ltr(left to right) & rtl(right to left) & inherit

ltr به معنای چپ به راست

rtl یعنی راست به چپ

inherit به معنای ارث بری از بخش والد است

برای فارسی سازی قالب معمولا میگویند به تگ body که مربوط به کل قالب است دستور direction:rtl را اضافه کنید . نمیتوان گفت که این کار درست است یا غلط ! به دلیل این که هر قالب با قالب قبلی فرق دارد در بعضی از قالب ها اصلا نباید این کار را انجام داد و در بعضی دیگر این یک باید است .

اما اگر نخواهیم این دستور را در ابتدای قالب یا همان body قرار دهیم چه باید انجام دهیم . که البته خود من هم این کار را توصیه میکنم اما وقت گیر تر است .

ما باید در قسمت را جداگانه با این دستور بکار ببریم

direction به معنای جهت میباشد و وقتی میگوییم direction:rtl یعنی جهت از راست به چپ باشد

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

http://www.w3schools.com/Css/tryit.asp?filename=trycss_text_direction

انتشار با ذکر منبع بلا مانع است

[مصطفی قلیزاده 11]

آموزش دوم :

فعلا ما در قسمت مربوط به متن یا text هستیم لذا با دستور کاربردی دیگری آشنا میشویم به نام text-align به معنای تراز متن

کار این دستور دقیقا همانند گزینه مشابه آن در microsoftword است و دارای 3 ارزش میباشد به شرح زیر

{text-align:center}
{text-align:left}
{text-align:right}

center برای تراز وسط

left به معنای تراز به چپ

right برای تراز به راست

مثال :

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

یعنی عنوان h1 در مرکز موقعیت قرار گیرد و h2 در چپ و h3 در راست

به صورت پیش فرض برای تمامی قالب های انگلیسی با توجه به نحوه نگارش حروف انگلیسی direction: rtl; text-align:left است . بدلیل آنکه انگلیسی را از چپ به راست مینویسند و فارسی را از راست به چپ لذا ممکن است ما جهت را در قالب از راست به چپ کرده باشیم یعنی direction: rtl اما تراز نوشته ها را راست نکرده باشیم .

بر اساس ترجبه ناچیزی که من دارم در بیشتر مواق لازم است در قالب جستوجو کنید و text-align:left را به text-align:right تبدیل کنید این کار را میتوانید با فشار یک دکمه در dreamviewer و در قسمت find and replace انجام دهید .

نکته گاهی مواقع در قالب ها بین دو نقطه و ارزش (به عنوان مثالtext-align) فاصله نمیگذارند لذا با هر دو حالت جستجو کنید

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

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

http://www.w3schools.com/CSS/tryit.asp?filename=trycss_text-align

انتشار با ذکر منبع بلا مانع است

[m.rezaei 10]

سلام

ممنون از آموزش کاملتون

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

[محمد رزاقی 40]

یک فایل جدا با نام template_rtl.css بسازید و عملیات فارسی سازی رو روش انجام بدید.

بعد هم به فایل index.php لینکش کنید.یعنی این کد ها رو به فایل index تون اضافه کنید:

<?php if($this->direction == 'rtl') : ?>



<?php endif; ?>

بعدش هم به فایل template.xml تون فایل css جدیدتون رو اضافه کنید.

موفق باشید.

[vahid300 3]

یک فایل جدا با نام template_rtl.css بسازید و عملیات فارسی سازی رو روش انجام بدید.

بعد هم به فایل index.php لینکش کنید.یعنی این کد ها رو به فایل index تون اضافه کنید:

<?php if($this->direction == 'rtl') : ?>



<?php endif; ?>

بعدش هم به فایل template.xml تون فایل css جدیدتون رو اضافه کنید.

موفق باشید.

سلام

میشه بفرمایید این کد را در index.php بعد یا قبل از چه کدی اضافه کنیم؟

اگر برای فارسی سازی به غیر از template.css فایل دیگری هم داشتیم در این صورت چیکار باید بکنیم؟

:thankyou:

[محمد رزاقی 40]

باید تو تگ head اضافش کنید.

یعنی وقتی تگ head باز شد.حالا هر جاش که دوست داشتی.

ولی من خودم بعد از لینکی که به فایل css خود قالب داده میشه اضافه می کنم.

در مورد سوال دوم هم اگه دقت کنی ما تو مثالمون دوتا فایل css داریم.یکی template.css که ماله خود قالبه و دومی template_rtl.css که ما خودمون اضافش کردیم برای زبانهای راست به چپ.حالا شما هر چند تا فایل داری به همین روش اضافه کن.

[navibd 0]

سلام.

من کاری که گفتین و کردم. اما باز جواب نداد.

2تا css دارم

template.css

template_rtl.css

و کدی هم که دادین رو اضافه کردم تو هد Index.php

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

و روی انگلیسی هم کلیک میکنم هیچ اتفاقی نمیوفته.

کمک کنید لطفا کارم شدیدا گیره جبران میکنم!

یا علی

[محمد رزاقی 40]

چند تا چیز رو چک کنید:

1)فایل template_rtl.css تو پوشه css قالبتون موجود باشه.

2)کدی که وارد تگ هد کردین دقیقا همین باشهچون من بعدا پستم رو ویرایش کردم.یک slash تو کدم اضافه گذاشته بودم.)

<?php if($this->direction == 'rtl') : ?>



<?php endif; ?>

[rahnamafard 2]

آموزشتون تموم شد؟

[golbazi 31]

اموزش خوب هستش

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

[دفاعی 872]

دوستان به تاریخ ارسال ها دقت کنید بعد پست بدید

اسپم = اخطار :1::P

:thankyou:

[asrertebat 8]

سلام لطفا ادامه آموزش رو بگید