wptheme

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

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

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

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

بابای

درباره این نویسنده

مطالب مشابه

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

آموزش شماره پانزده از سری آموزشهای طراحی قالب وردپرس،
آموزش افزودن امکان ترجمه به قالب و فارسی سازی تم به صورت کامل+آموزش css در زمینه ی راست چین کردن نوشته ها

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

  1. محمد گفت:

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

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ خرداد ۳۰ام, ۱۳۸۸ ۱۱:۴۹ ب.ظ:

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

    [پاسخ]

    محمد پاسخ در تاريخ خرداد ۳۱ام, ۱۳۸۸ ۲:۱۹ ق.ظ:

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

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ خرداد ۳۱ام, ۱۳۸۸ ۱۰:۳۶ ب.ظ:

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

    محمد پاسخ در تاريخ خرداد ۳۱ام, ۱۳۸۸ ۱۱:۳۰ ب.ظ:

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

    سياوش پاسخ در تاريخ تیر ۱ام, ۱۳۸۸ ۶:۰۴ ب.ظ:

    چشم

  2. علی رضا گفت:

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

    [پاسخ]

    blogadmin پاسخ در تاريخ تیر ۲۲ام, ۱۳۹۰ ۱۲:۲۲ ب.ظ:

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

    [پاسخ]

    علی رضا پاسخ در تاريخ تیر ۲۳ام, ۱۳۹۰ ۷:۱۳ ق.ظ:

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

    [پاسخ]

    blogadmin پاسخ در تاريخ تیر ۲۳ام, ۱۳۹۰ ۷:۱۷ ق.ظ:

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

  3. امیر گفت:

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ آذر ۱۱ام, ۱۳۹۰ ۲:۵۴ ق.ظ:

    آرشیو سایت با استفاده از پلاگین smart archives درست شده، کار باهاش هم زیاد سخت نیست:)

    [پاسخ]

    امیر پاسخ در تاريخ آذر ۱۱ام, ۱۳۹۰ ۸:۵۱ ب.ظ:

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ آذر ۱۲ام, ۱۳۹۰ ۱۲:۵۹ ب.ظ:

    چه اتفاقی میفته مگه:)) منظورتون همین صفحه است دیگه؟ http://tenet.ir/archive/

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>