اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.
مثل همیشه wamp رو باز میکنیم و style.css هم با برنامه ای که داریم اوپن(open)!!
امروز میخواهیم هر چیزی رو بزاریم سر جای خودش!
یعنی جای هدر،فوتر،سایدبار و نوشته ها رو مشخص کنیم و از هم متمایزشون کنیم.
کار بسیار آسون و بدون درد است! نگران نباشید فرزندانم.
یادتون باشه در در هر مرورگری که آزمایش میکنید کار رو آزمایش کنید اما IE هم نگاه کنید که بعضی وقتها چپ رو راست میشنوه و راست رو راشت!
میدونیم که همه ی مانیتور ها اندازه ی هم نیستند و همه ی افراد هم از یک رزولوشن استفاده نمیکنند! برای همین باید صفحه رو جوری درست کنیم که برای همه مناسب باشه!
من به جای اینکه ازpx یا پیکسل استفاده کنم(که در مانیتورها و رزولوشنهای مختلف متفاوته) از درصد % استفاده میکنم که یا نصف صفحه نپره(در رزولوشن های افتضاح مثل 800 در 600) یا نصفش سفید نشه در مانیتورهای بزرگ و wide
ما برای اینکه بتونیم همه ی div هایی که ساختیم ( و در واقع تمام صفحه رو کنترل کنیم و بتونیم اون رو از body جدا کنیم تا بتونیم استایل متفاوتی برای هر کدوم داشته باشیم) یک div دیگه در index.php میسازیم که از زیر <body> شروع میشه و تا بالای <body/> ادامه داره:
<body>
<div id=”wrapper”>
</div>
</body>
حالا ما کل body رو در یک تگ جدا کننده قرار دادیم!
میریو با firebug و یا chrome و از طریق inspect elements نگاهی به سایت میندازیم تا مطمئن شیم کارمون رو درست انجام دادیم!
حالا اگه بخواهیم که اندازه ی wrapper درصدی از کل عرض صفحه باشه میریم به style و کد زیر رو مینویسیم:
#wrapper{
width:85%;
}
اینکار باعث میشه عرض صفحه ای که ما داریم 85 درصد کل عرض مانیتور و در واقع مرورگر بشه!
سیو میکنیم و میریم صفحه ی صایت رو میبینیم.
حالا برای اینکه فرق px دادن و % رو ببینین %85 رو به یک عدد مثل 750px تبدیل میکنیم و با عوض کردن عرض مرورگر تفاوت رو میبینیم:
زمانی که از px استفاده میکنیم با تغییر اندازه و همچنین تغییر رزولوشن ممکنه قسمتی از مطالب نمایش داده نشن که زیاد جالب نیست!
اما با استفاده از % همیشه همه ی مطالب نمایش داده میشن:
حالا میریم سراغ این مساله که صفحه ی ما الان وسط نیست! یعنی فاصله ی wrapper از سمت چپ و راست برابر نیست، برای اینکار از margin استفاده میکنیم و اون رو روی auto قرار میدیم تا خودش کارشو انجام بده:
#wrapper{
width:85%;
margin:auto;
}
به سلامتی دیگه درست شد! باور ندارین سیو کنید و ببینید!
نکته دیگه اینکه مثل قبل میتونیم مثلا margin از بالا یعنی فاصله از بالای صفحه رو خودمون تعیین کنیم یا مثلا از راست فاصله رو بیشتر کنیم یا هرچی برای اینکه تک تک این کار رو انجام بدیم از 4 عدد یا درصد یا auto استفاده میکنیم:
#wrapper{
width:85%;
margin: 10px auto 0 auto;
}
یعنی اینکه از بالا 10px و از راست auto از پایین 0px و از چپ هم auto فاصله داشته باشه!
به همین راحتی!
حالا میریم وارد wrapper بشیم و هدر و غیره رو بنشونیم سر جاشون!
float یک ویژگی در css است که باعث میشه تگ ما در واقع شناور بشه! مثل آب که جای خودش رو پیدا میکنه و هیچ وقت نمیبینیم که توی یک ظرف آب، ته ظرف خالی باشه و بالای ظرف پر!
این ویژگی یکی از پر کاربردترین کارها در طراحی صفحات وب است که الان هم ما باهاش کلی کار داریم.
فعلا هدر رو تنظیم میکنیم:
#header{
float:left;
width: 100%;
}
و بعد به content که نوشته های وبلاگ رو در بر داره میرسیم:
#content{
width:70%;
}
دقت کنید با این کار ما عرض content رو 70 درصد wrapper میکنیم که تگ مادر است، نه 70 درصد کل صفحه!
اما باز هم با سیو کردن و دیدن صفحه میبینیم که سایدبار در زیر content قرار داره و نه در کنارش!
اما ویژگی مورد علاقه ی من کارمون رو درست خواهد کرد:
#content{
width:70%;
float:left;
}
حالا سیو کنید و ببینید با یک کلمه چه کارها که نمیشه کرد!
من اولین بار که این کار رو انجام دادم خیلی ذوق زده شدم و حتی الان هم حس خوبی دارم اینجوری 😀
الان با inspect element میتونید دقیقا مرزها رو ببینید و لذت ببرید!
حالا میریم سراغ sidebar و 30 درصد بقیه رو هم میبخشیم به اون و شناورش هم میکنیم!:
.sidebar{
width:30%;
float:left;
}
اگه قبل از اینکه اینکار رو انجام میدادیم با inspect element میرفتیم روی ساید بار میدیدیم که کل صفحه رو مشخص میکنه یعنی فاجعه! اما الان درست جایی رو که باید،متعلق به sidebar است!
علت این هم که قبل از کلمه ی sidebar به جای # نقطه گذاشتیم اینه که اگه یادتون باشه در index ما به sidebar کلاس (class) دادیم نه ID ! اکی؟
حالا مونده footer که بندازیمش پایین صفحه! برای اینکار اولا باید 100 درصد عرض داشته باشیم و اینکه کاری کنیم که در اطرافش هیچ چیزی قرار نگیره!
برای اینکار (یعنی دو طرف رو پاک کردن از هر گونه مزاحم) از 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 انگلیسی میسازیم باید از چپ قرار بدیمش
من دیگه واقعا خسته شدم!
بقیه باشه برای بعد!
بابای بای بای
خسته نباشي!
سلامت باشي
سلام
من هر کار مي کنم قالبم دربه داغون هست. براي من در قسمت ذخيغ در کروم فقط header و content را نشان مي دهد و sidebar و footer را نشان نمي دهد.
اگر مي شود به من کمک کنيد.
از زحمتان و آموزش هاي شما ممنون هستم. 🙂
1-اصلا ناراحت يا نگران نشو ممکنه يک مشکل کوچيک باشه!و کاملن هم طبيعيه!
2- شما برو validator رو امتحان کن طبق آموزشي که دادم اگه درست نشد فايل رو براي من ايميل کن ببينم چشه!
با سلام
من چک کردم ولي يک سري ارور چرت و پرت مي دهد.
لطفا من را راهنمايي کنيد.
ممنون.
http://bahadoreng.persiangig.com/theme.zip
چشم ميرم ببينيم چه چرتي ميگه!
آقا يکي 2 تا div رو جا انداختيد يا سر جاش ننوشتين!
به خاطر اينکه کدها رو خيلي تو هم تو هم مينويسين و فواصل رو رعايت نميکنين براي همين گيج کننده است يه کم توي css هم 2 ، 3 تا اشکال بود که براتون نوشتم همونجا!
موفق باشيد
در ضمن 100 دفعه گفتم کدها رو کپي نکنيد! ميدونم يک خط رو کپي کردين! که اشتباه شد به همين خاطر!
http://tinyurl.com/lb9ckt
با سلام
از شما به خاطر وقتي که براي من صرف کرديد. ممنون هستم.
من خط به خط کار خودم را با اصلاحات شما بررسي کردم. بهد از درست کردن مشکلات باز هم سايدبار زير محتوايات قرار مي گرفت. من حتي فايل هاي خودم را پاک کردم و فايل شما را قرار دادم ولي مشکل حل نشد.
امکان داره به خاطر فارسي بودن وردپرس من باشه؟
ممنون از زحمات شما 🙂
بهادر جان آموزشها رو ادامه بده درست ميشه!
مشکل اينه که اون نقطه هاي کنار تگهاي ul و li رو پاک نکردي يکي دو درس ديگه دست ميشه!
مشکل يه چيز ديگست. يه جا که کپي کردين آقا سياوش خودش اشتباه نوشته بود و 2 تا & گذاشته بود و شما هم همون اشتباه رو تکرار کردي. اين خطو ميگم:
من که نفهميدم! اين خطي هم که نوشتين احتمالا اجازه ندارين بنويسين!!! حذف شده!!
اينم اون کدي که گفتم مشکل داره:
http://roozbehrzv.persiangig.com/image/doubleand.JPG
شما با && امتحان کردي؟!
تم سايت من هم با همين کد داره کار ميکنه و مشکلي نداره!
درسته;)
نميدونم والا !
سلام سياوش . شرمنده خيلي بهت زحمت دادم .
من همه اين كارا رو كردم ولي يكم بد شد و هنوز سايدبار پايين پست ها قرار داره
من عكس و فايل ها رو واست به ميلت مي فرستم ببين مشكل چيه !! شرمنده
اوكي؟؟؟
سلام
کد زير در IE6 نمايش داده نميشه! راه حلش چيه؟ چه کدي به جاش به کار ببرم؟
border-bottom:14px solid #FF0677;
در ضمن از margin-bottom هم استفاده کردم فايده اي نداشت 🙁
بسيار ممنون از راهنمايي هاي شما
اگه ميخواي واسه iE6 درست نشون بدي سايتتو يه جوري کاري کني که براي بقيه خراب نشون بده!
اينو امتحان کن به جاي اون ببين جواب ميده؟
border-bottom-style: solid;
border-bottom-width: 14px;
border-bottom-color: #FF0677;
نه نميخوام اين کار رو کنم ولي وقتي 90 درصد از شاستفاده ميکنن چاره اي ندارم!
مشکل حل شد:
display:block; نذاشته بودم
خدا رو شکر توي سايت من که 12 درصد IE6 دارن، ولي براي سايتهاي عمومي اين مقدار حداقل 2 يا 3برابر ميشه
سلام.ببخشيد ميشه بپرسم برا چي به هدر فلوت دادي؟! تو uni که ميگفتي نبايد فلوت بدي!!!:d
وقتي عرض رو 100 درصد بگيريم فرقي نداره، فکر ميکنم نديم بهتره اما يادم نيست چرا دادم!!
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
سلام مستر کشمیری
اینم لینک ایندکس ما یه کاریش بکن :دی
http://altair-ac.persiangig.com/other/ghaleb/index.txt
بعضی جاها مثل خط کد calender کپی کردین که گفته بودم نکنید:دی
باور کن هیچ جاشو کپی نکردم تنها چیزایی که کپی کردم همون اول ایندکس و تابع های پوسته و اول استایل و اینا بود همشو خودم نوشتم
حالا نمیشه یه ترتیبی بدی بهش بزاری ما کارمون راه بیوفته؟؟؟
پس کجایی >>>؟؟؟؟؟؟؟؟؟ یکم من را راهی کن
حالا یا کپی کردین که احتمالا همینه مشکل یا اینکه utf-8 سیو نکردین فایلتون رو، الان خیلی کدتون بی نظمه، اگه من بخوام درست کنم هم فایده نداره، سعی کنین کد رو تمیز کنین، فاصله های تگ های مادر و فرزند رو درست کنید میفهمید اشکالاتتون رو، مثلا تگ ul سایدبار که بسته نشده رو!
باشه مرسی
سلام و خسته نباشید
خیلی خوبه کارتون. من تا اینجای کار پیش رفتم و همه چیز عالی بود فقط یه مشکل هست که خودتونم بارها بهش اشاره کردید: IE.
صفحه من تو فایرفاکس، کروم و اپرا خیلی خوب و درست نشون میده ولی به آی ایی که میرسه یه دفعه فوتر رفته وسط کانتنت. خیلی عجیبه… چطور میشه این مشکل رو هم حل کرد؟
با سپاس
معمولن با آزمون و خطا و صبر! بعضی وقتا هم سرچ کردن
مشکل من چیه که باز سایدبار میاد زیر پستا ؟؟
استاد من قالبم کلّا چپ چینه … 🙁
چیکار کنم که حتی اطلاعات هر پست مثل تاریخ و نویسنده و چیزای زیرش هم راست چین بشن؟