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

در درس امروز سراغ سایدبار میریم تا محتوای اون بهتر نمایش داده بشن و با widget یا همون ابزارکهای مختلف سازگارتر باشه تا بهتر نمایش داده بشن.

در حالت استاندارد در ابزارک ها از تگ های ul و li استفاده میشه (مثل آنهایی که خودمون دستی وارد کردیم در بخش سایدبار) به همین دلیل کافیه که این تگ ها رو به همراه تگهای هدینگ (Hn) هدف قرار بدیم.

برای اشاره به تگهای ul موجود در sidebar باید به صورت زیر عمل کنیم و کدهای زیر رو بنویسیم (کدهای زیر رو بعد از .sidebar و قبل از footer در فایل style.css بنویسید):

.sidebar ul{
margin: 0;
padding: 0 10px 0 10px;

}

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

حالا در حالی که مثل همیشه wamp باز است با دو مرورگر FF و IE صفحه ی اول سایت رو میبینیم.

برای برداشتن نقطه های توپر و تو خالی باید یک راهی پیدا کنیم چون خیلی زشتن

.sidebar ul{
margin: 0;
padding: 0 10px 0 10px;
list-style:none;
}

این کار باعث میشه اون نقاط زشت پاک بشن، با دوباره دیدن سایت از این عمل مطمئن میشیم.

اگر با inspect element در chrome یا firebug به سایدبار بریم و نگاهی به شکل ابزارها بندازیم میفهمیم که تگ ها به چه صورتی هستند:

 

حالا برای هدف قرار دادن li های درون ul های sidebar به صورت زیر عمل میکنیم:

.sidebar ul li{

padding: 5px 0 5px 0;

}

این کد باعث میشه یک فاصله ی ۵ پیکسلی از بالا و یکی هم از پایین ایجاد بشه.

برای هدف قرار دادن هر تگ برای اینکه بدونین دقیقا چه آدرسی باید بدین بهترین راه inspect element است و بس! ب

حالا بریم سراغ عناوین هر ابزار موجود در سایدبار!

اگه یادتون باشه ما از تگ h3 استفاده کردیم برای اینکار!

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

.sidebar h2{

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

}

ما با این کار باعث میشیم که همه ی مرورگر های سایز فونت رو ۱۴ پیکسل قرار بدهند.

حالا با دقیق تر شدن میتونیم به آدرس sidebar-ul بریم و بعد هرچه li مربوط به ul میشه رو هدف قرار بدیم:

.sidebar ul ul li{

padding:0;

}

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

.sidebar ul ul li{

padding:0;

line-height:22px;

}

پیشنهاد میکنم line-height رو اول یک عدد کوچک مثل ۱۰ قرار بدین و بعد از دیدن سایت با اون حالت اون رو به هر عددی دوست داشتین تغییر بدین، اینکار رو انجام میدیم که بفهمیم دقیقن چه کاری میکنیم.

حالا شاید این سوال پیش بیاد که برای هدف قرار دادن یک ابزار خاص چیکار باید کرد!

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

این کار رو هم با دیدن source که سخت تر خواهد بود و یا با استفاده از inspect elements میشه انجام داد.

مثلا برای تغییر دادن Calendar(فقط Calendar و نه چیز دیگه ای) باید بریم و آیدی اش رو پیدا کنیم:

 

بعد از پیدا کردن آی دی مورد نظر میتونیم به صورت زیر تغییراتی انجام بدیم مثلا :

#wp-calendar{

width:80%;

margin:auto;

}

این کار باعث میشه سالنامه یا تقویم نوشته های ما به اندازه ی ۸۰ درصد اندازه ی سایدبار کشیده بشه و با margin کاری کردیم که در وسط قرار بگیره.



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

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

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