آموزش طراحی قالب وردپرس۱۰(زیباسازی۲)

مثل همیشه wamp رو باز میکنیم و style.css هم با برنامه ای که داریم اوپن(open)!!

امروز میخواهیم هر چیزی رو بزاریم سر جای خودش!

یعنی جای هدر،فوتر،سایدبار و نوشته ها رو مشخص کنیم و از هم متمایزشون کنیم.

کار بسیار آسون و بدون درد است!

یادتون باشه در در هر مرورگری که آزمایش میکنید کار رو آزمایش کنید اما IE هم نگاه کنید که بعضی وقتها چپ رو راست میشنوه و راست رو راشت!

میدونیم که همه ی مانیتور ها اندازه ی هم نیستند و همه ی افراد هم از یک رزولوشن استفاده نمیکنند! برای همین باید صفحه رو جوری درست کنیم که برای همه مناسب باشه!

من به جای اینکه ازpx یا پیکسل استفاده کنم(که در مانیتورها و رزولوشنهای مختلف متفاوته) از درصد % استفاده میکنم که یا نصف صفحه نپره(در رزولوشن های افتضاح مثل ۸۰۰ در ۶۰۰) یا نصفش سفید نشه در مانیتورهای بزرگ و wide

ما برای اینکه بتونیم همه ی div هایی که ساختیم ( و در واقع تمام صفحه رو کنترل کنیم و بتونیم اون رو از body جدا کنیم تا بتونیم استایل متفاوتی برای هر کدوم داشته باشیم) یک div دیگه در index.php میسازیم که از زیر <body> شروع میشه و تا بالای <body/> ادامه داره:

<body>

<div id=”wrapper”>

</div>

</body>

حالا ما کل body رو در یک تگ جدا کننده قرار دادیم!

میریو با firebug و یا chrome و از طریق inspect elements نگاهی به سایت میندازیم تا مطمئن شیم کارمون رو درست انجام دادیم!

 

حالا اگه بخواهیم که اندازه ی wrapper درصدی از کل عرض صفحه باشه میریم به style و کد زیر رو مینویسیم:

#wrapper{

width:85%;

}

اینکار باعث میشه عرض صفحه ای که ما داریم ۸۵ درصد کل عرض مانیتور و در واقع مرورگر بشه!

سیو میکنیم و میریم صفحه ی صایت رو میبینیم.

حالا برای اینکه فرق px دادن و % رو ببینین %۸۵ رو به یک عدد مثل ۷۵۰px تبدیل میکنیم و با عوض کردن عرض مرورگر تفاوت رو میبینیم:

زمانی که از px استفاده میکنیم با تغییر اندازه و همچنین تغییر رزولوشن ممکنه قسمتی از مطالب نمایش داده نشن که زیاد جالب نیست!

اما با استفاده از % همیشه همه ی مطالب نمایش داده میشن:

حالا میریم سراغ این مساله که صفحه ی ما الان وسط نیست! یعنی فاصله ی wrapper از سمت چپ و راست برابر نیست، برای اینکار از margin استفاده میکنیم و اون رو روی auto قرار میدیم تا خودش کارشو انجام بده:

#wrapper{

width:85%;

margin:auto;

}

 

نکته دیگه اینکه مثل قبل میتونیم مثلا margin از بالا یعنی فاصله از بالای صفحه رو خودمون تعیین کنیم یا مثلا از راست فاصله رو بیشتر کنیم یا هرچی برای اینکه تک تک این کار رو انجام بدیم از ۴ عدد یا درصد یا auto استفاده میکنیم:

#wrapper{

width:85%;

margin: 10px auto 0 auto;

}

یعنی اینکه از بالا ۱۰px و از راست auto از پایین ۰px و از چپ هم auto فاصله داشته باشه!

به همین راحتی!

حالا میریم وارد wrapper بشیم و هدر و غیره رو بنشونیم سر جاشون!

float یک ویژگی در css است که باعث میشه تگ ما در واقع شناور بشه! مثل آب که جای خودش رو پیدا میکنه و هیچ وقت نمیبینیم که توی یک ظرف آب، ته ظرف خالی باشه و بالای ظرف پر!

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

فعلا هدر رو تنظیم میکنیم:

#header{

float:left;

width: 100%;

}

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

#content{

width:70%;

}

دقت کنید با این کار ما عرض content رو ۷۰ درصد wrapper میکنیم که تگ مادر است، نه ۷۰ درصد کل صفحه!

اما باز هم با سیو کردن و دیدن صفحه میبینیم که سایدبار در زیر content قرار داره و نه در کنارش!

اما ویژگی مورد علاقه ی من کارمون رو درست خواهد کرد:

#content{

width:70%;

float:left;

}

حالا سیو کنید و ببینید با یک کلمه چه کارها که نمیشه کرد!

الان با inspect element میتونید دقیقا مرزها رو ببینید و لذت ببرید!

حالا میریم سراغ sidebar و ۳۰ درصد بقیه رو هم میبخشیم به اون و شناورش هم میکنیم!:

.sidebar{

width:30%;

float:left;

}

اگه قبل از اینکه اینکار رو انجام میدادیم با inspect element میرفتیم روی ساید بار میدیدیم که کل صفحه رو مشخص میکنه یعنی فاجعه! اما الان درست جایی رو که باید،متعلق به sidebar است!

علت این هم که قبل از کلمه ی sidebar به جای # نقطه گذاشتیم اینه که اگه یادتون باشه در index ما به sidebar کلاس (class) دادیم نه ID ! اکی؟

حالا مونده footer که بندازیمش پایین صفحه! برای اینکار اولا باید ۱۰۰ درصد عرض داشته باشیم و اینکه کاری کنیم که در اطرافش هیچ چیزی قرار نگیره!

برای اینکار (یعنی دو طرف رو پاک کردن از هر گونه مزاحم) از clear استفاده میکنیم:

#footer{

clear: both;

width: 100%;

float: left;

}

حالا ذخیره میکنیم و میریم یک سایت شکیل تر و قابل تحمل تر میبینیم!

 

شما هم میدونید که برای اینکه این رنگها رو به هر قسمت بدین باید از چه کدهایی استفاده کنید و background رو تغییر بدین، من سریع و به ترتیب این کدها رو میدم:

background:#c6c6c6; /* for header */

background:#828282; /* for content */

background:#a1a1a1; /* for sidebar */

background:#c6c6c6/* for footer */

البته اینها رو میدیم که دقیقا قسمتها مشخص بشن و تسلط بیشتری داشته باشیم، همین.

اگه دقت کنید میبینید که در قسمت content نوشته ها خیلی به مرز ها نزدیکند و یه کمی بده! برای اینکه در داخل یک تگ یک فاصله بدیم وکاری به بیرونش نداشته باشیم (یعنی دقیقا بر عکس margin که با خارج کار داره!) از padding استفاده میکنیم، به content میریم و زیر اون برای اینکه به div های زیر مجموعه ی contentارجاع بدیم کد زیر رو مینویسیم:

#content div{

padding:1%;

}

میدونین چی کار کردیم؟

بریم یک نگاهی به index بندازیم، میبینیم که در content 3 تا تگ div داریم یعنی posttitle و entry و همینطور postmetadata که ما به این سه اشاره کردیم!

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

برای sidebar هم از padding استفاده میکنیم تا یک کمی از بالا فاصله بگیره تا خوشگل تر شه!

.sidebar{

width:30%;

float:left;

background:#a1a1a1;

padding:10px 0 0 0 ;

}

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

چون ما الان داریم یک پوسته یا theme انگلیسی میسازیم باید از چپ قرار بدیمش



  • 204 بازدید
  • بهنام نجاتی
  • 16 آوریل 2016

آخرین دیدگاه های آموزش طراحی قالب وردپرس۱۰(زیباسازی۲)

نظرات بسته
اگر نياز به پشتيباني داريد همين حالا با ما تماس بگيريد . تيم پشتيباني رهجو نت بصورت 24 ساعته در خدمت شماست...