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

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

لیست آموزشهای قالب وردپرس

مثل همیشه 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;

}

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

این یک نمای کلی از سایت ماست. خوشگل شد نه؟:D

شما هم میدونید که برای اینکه این رنگها رو به هر قسمت بدین باید از چه کدهایی استفاده کنید و 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 انگلیسی میسازیم باید از چپ قرار بدیمش

من دیگه واقعا خسته شدم!

بقیه باشه برای بعد!

بابای بای بای

‏32 دیدگاه برای ”آموزش طراحی قالب وردپرس #۱۰(زیباسازی۲)

  1. سلام
    من هر کار می کنم قالبم دربه داغون هست. برای من در قسمت ذخیغ در کروم فقط header و content را نشان می دهد و sidebar و footer را نشان نمی دهد.
    اگر می شود به من کمک کنید.
    از زحمتان و آموزش های شما ممنون هستم. 🙂

    1. ۱-اصلا ناراحت یا نگران نشو ممکنه یک مشکل کوچیک باشه!و کاملن هم طبیعیه!
      ۲- شما برو validator رو امتحان کن طبق آموزشی که دادم اگه درست نشد فایل رو برای من ایمیل کن ببینم چشه!

        1. آقا یکی ۲ تا div رو جا انداختید یا سر جاش ننوشتین!
          به خاطر اینکه کدها رو خیلی تو هم تو هم مینویسین و فواصل رو رعایت نمیکنین برای همین گیج کننده است یه کم توی css هم ۲ ، ۳ تا اشکال بود که براتون نوشتم همونجا!
          موفق باشید
          در ضمن ۱۰۰ دفعه گفتم کدها رو کپی نکنید! میدونم یک خط رو کپی کردین! که اشتباه شد به همین خاطر!
          http://tinyurl.com/lb9ckt

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

          2. بهادر جان آموزشها رو ادامه بده درست میشه!
            مشکل اینه که اون نقطه های کنار تگهای ul و li رو پاک نکردی یکی دو درس دیگه دست میشه!

          3. مشکل یه چیز دیگست. یه جا که کپی کردین آقا سیاوش خودش اشتباه نوشته بود و ۲ تا & گذاشته بود و شما هم همون اشتباه رو تکرار کردی. این خطو میگم:

          4. من که نفهمیدم! این خطی هم که نوشتین احتمالا اجازه ندارین بنویسین!!! حذف شده!!

          5. شما با && امتحان کردی؟!
            تم سایت من هم با همین کد داره کار میکنه و مشکلی نداره!
            درسته;)

  2. سلام سیاوش . شرمنده خیلی بهت زحمت دادم .
    من همه این کارا رو کردم ولی یکم بد شد و هنوز سایدبار پایین پست ها قرار داره
    من عکس و فایل ها رو واست به میلت می فرستم ببین مشکل چیه !! شرمنده
    اوکی؟؟؟

  3. سلام
    کد زیر در IE6 نمایش داده نمیشه! راه حلش چیه؟ چه کدی به جاش به کار ببرم؟

    border-bottom:14px solid #FF0677;

    در ضمن از margin-bottom هم استفاده کردم فایده ای نداشت 🙁

    بسیار ممنون از راهنمایی های شما

    1. اگه میخوای واسه iE6 درست نشون بدی سایتتو یه جوری کاری کنی که برای بقیه خراب نشون بده!
      اینو امتحان کن به جای اون ببین جواب میده؟

      border-bottom-style: solid;
      border-bottom-width: 14px;
      border-bottom-color: #FF0677;

  4. salam siavash jan

    man vasaton file idex va style ro frestadam ke bebinid oshkele man kojast chon dar inja digeh stop shodam va hame kara ra kardam vali javab nemideh… vali dige shoma be man mail nazadin ke moshkelam kojast… khahesh mikonam file haye man ra negah konid.
    Merci

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

  6. حالا یا کپی کردین که احتمالا همینه مشکل یا اینکه utf-8 سیو نکردین فایلتون رو، الان خیلی کدتون بی نظمه، اگه من بخوام درست کنم هم فایده نداره، سعی کنین کد رو تمیز کنین، فاصله های تگ های مادر و فرزند رو درست کنید میفهمید اشکالاتتون رو، مثلا تگ ul سایدبار که بسته نشده رو!

  7. سلام و خسته نباشید

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

    صفحه من تو فایرفاکس، کروم و اپرا خیلی خوب و درست نشون میده ولی به آی ایی که میرسه یه دفعه فوتر رفته وسط کانتنت. خیلی عجیبه… چطور میشه این مشکل رو هم حل کرد؟

    با سپاس

  8. استاد من قالبم کلّا چپ چینه … 🙁
    چیکار کنم که حتی اطلاعات هر پست مثل تاریخ و نویسنده و چیزای زیرش هم راست چین بشن؟

پاسخ دادن به sajjadm لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد.