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

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

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

در درس امروز سراغ سایدبار میریم تا محتوای اون بهتر نمایش داده بشن و با 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 کاری کردیم که در وسط قرار بگیره.

خسته نباشید دیگه! پلیز!

بابای

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

  1. یه سوال!
    یه div داریم که با سی اس اس یه عکس رو گذاشتیم توش, چطور میشه به اون عکس لینک داد؟
    ببخشید که کامنت ربطی به پست نداره, اگه خواستی پاکش کن

    1. اگه عکس رو با html گذاشتین که میشه اون رو یک لینک هم بهش بدین یعنی با تگ IMG و ویژگی src میشه یک عکس رو قرار داد و اون رو با استفاده از تگ a به لینک تبدیل کنید مثلا اما اگه با css عکس رو مثلا background قرار دادین ربطی نداره به html و باز هم با a باید آدرس عکس رو دوباره بهش بدین!
      نمیدونم چی گفتم اصلا!!
      اما مثلا در ورد پرس باید مثل فایل زیر عمل کنید:(البته من تست نکردم دقیقا اما تقریبا یه همچین چیزیه !:دی)
      http://files.myopera.com/tenet/comments/image%20link.txt

      1. تو یه تم وردپرس‌ه / مثلا:
        تو پی اچ پی:
         
        و تو سی اس اس:
        #home{
        background:url(img/home.png);
        height: 24px;
        width: 24px;
        margin: 15px;
        }
        حالا من میخوام به عکس لینک بدم ولی نمیدونم چه‌جوری:ی
        ممنون میشم کمکم کنی

        1. منم همینو مثال زدم دیگه! شما باید در فایل php اول با به صفحه ی تم بری (توابع بهتری هم هست برای اینکار البته!) بعد آدرس بعدی رو که img/home.png هست رو بدی! اگه درست نشد حتما بپرس

          1. نمیشه، آدرس رو نمیشناسه، من فک میکنم اینجا جای خوبی برای سوال و جواب نیست، بهتره از ایمیل بهم جواب بدید / ممنون

  2. سلام..بهتون خسته نباشید میگم.آموزشتون تا الآن خیلی خوب بوده و واضح هست.اما یه سوالی داشتم..
    در قسمتی که گفتید:((حالا با دقیق تر شدن میتونیم به آدرس sidebar-ul بریم و بعد هرچه li مربوط به ul میشه رو هدف قرار بدیم))و کدی که زیر اون نوشته شده،منظورتون از ((آدرس sidebar-ul)) دقیقا چیه و چرا توی کد دوتا ulگذاشتید؟آیا ul دوم و li زیر مجموعه ul اول هستن؟لطفا کامل توضیح بدید.خیلی متشکرم و ببخشید که طولانی شد.

    1. خب ما دو مرحله رفتیم تو UL UL یعنی همه ی تگ های UL که زیر مجموعه تگ UL هستن، چون ما اگه یادتون باشه کل سایدبارمون رو داخل یک تگ UL قرار دادیم و هر ویدجت خودش یک LI شد، الان میخوایم یه مرحله دیگه وارد شیم و LI های داخل UL های داخل ویدجت ها رو هدف بگیریم

      1. ببخشید که بازم سوال میکنم،ul اولی که مال کل ساید بار هست،li ها هم که مال ویجدت ها،اما li ها فقط داخل ul کل ساید بار هستن و داخل ul دیگری قرار ندارن.من کدم را با مال شما چک کردم..؟؟ul های دیگری هم داخل ساید بار هستن ولی داخل اونها li نداره!ممنونم

        1. خب توی کد نداره ولی بعد از اینکه شما وارد سایت میشین ، فانکشنهایی که نوشتین اونهارو تولید میکنن که باید با inspect elements ببینینشون دیگه

  3. آقا واقعا متشکرم که با حوصله جواب دادید،خیلی ذهنم را مشغول کرده بود..بازم تشکر میکنم.موفق باشید.

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

      1. منظورم خود آرشیو نبود، منظور حالتی که بعد از نگه داشتن موس روی لینک ها پیدا میکنه و نحوه طراحیش بود.

پاسخ دادن به علی رضا لغو پاسخ

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