اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.
در درس امروز سراغ سایدبار میریم تا محتوای اون بهتر نمایش داده بشن و با 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;
}
این کد باعث میشه یک فاصله ی 5 پیکسلی از بالا و یکی هم از پایین ایجاد بشه.
برای هدف قرار دادن هر تگ برای اینکه بدونین دقیقا چه آدرسی باید بدین بهترین راه inspect element است و بس! با اینکار حتی میتونین در سایت ها و وبلاگهای دیگه هم فوزولی نموده و چیزهای جدید یاد بگیرین!
حالا بریم سراغ عناوین هر ابزار موجود در سایدبار!
اگه یادتون باشه ما از تگ h3 استفاده کردیم برای اینکار!
پس باید h2 ها رو هدف قرار بدیم تا در هر مرورگر یک جور ترجمه نشه و هر کدوم به میل خودشون اندازه ی فونت رو تعبیر نکنن:
.sidebar h2{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
ما با این کار باعث میشیم که همه ی مرورگر های سایز فونت رو 14 پیکسل قرار بدهند.
حالا با دقیق تر شدن میتونیم به آدرس sidebar-ul بریم و بعد هرچه li مربوط به ul میشه رو هدف قرار بدیم:
.sidebar ul ul li{
padding:0;
}
حالا سایدبار بهتر و شکیل تری داریم و میتونیم شکیل تر ترش کنیم!:
.sidebar ul ul li{
padding:0;
line-height:22px;
}
پیشنهاد میکنم line-height رو اول یک عدد کوچک مثل 10 قرار بدین و بعد از دیدن سایت با اون حالت اون رو به هر عددی دوست داشتین تغییر بدین، اینکار رو انجام میدیم که بفهمیم دقیقن چه کاری میکنیم.
حالا شاید این سوال پیش بیاد که برای هدف قرار دادن یک ابزار خاص چیکار باید کرد!
جواب اینه که باید دنبال ID طرف بگردیم!
این کار رو هم با دیدن source که سخت تر خواهد بود و یا با استفاده از inspect elements میشه انجام داد.
مثلا برای تغییر دادن Calendar(فقط Calendar و نه چیز دیگه ای) باید بریم و آیدی اش رو پیدا کنیم:
بعد از پیدا کردن آی دی مورد نظر میتونیم به صورت زیر تغییراتی انجام بدیم مثلا :
#wp-calendar{
width:80%;
margin:auto;
}
این کار باعث میشه سالنامه یا تقویم نوشته های ما به اندازه ی 80 درصد اندازه ی سایدبار کشیده بشه و با margin کاری کردیم که در وسط قرار بگیره.
خسته نباشید دیگه! پلیز!
بابای
اون نقاط زياد هم زشت نيستن! مثلا اينجا رو ببين: http://img.piqlet.com/captursrs.png
وجدانن راست ميگي برادر!
چه جوري اينجوري ميشه؟:دي
يه سوال!
يه 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 هست رو بدي! اگه درست نشد حتما بپرس
نميشه، آدرس رو نميشناسه، من فک ميکنم اينجا جاي خوبي براي سوال و جواب نيست، بهتره از ايميل بهم جواب بديد / ممنون
چشم
سلام..بهتون خسته نباشید میگم.آموزشتون تا الآن خیلی خوب بوده و واضح هست.اما یه سوالی داشتم..
در قسمتی که گفتید:((حالا با دقیق تر شدن میتونیم به آدرس sidebar-ul بریم و بعد هرچه li مربوط به ul میشه رو هدف قرار بدیم))و کدی که زیر اون نوشته شده،منظورتون از ((آدرس sidebar-ul)) دقیقا چیه و چرا توی کد دوتا ulگذاشتید؟آیا ul دوم و li زیر مجموعه ul اول هستن؟لطفا کامل توضیح بدید.خیلی متشکرم و ببخشید که طولانی شد.
خب ما دو مرحله رفتیم تو UL UL یعنی همه ی تگ های UL که زیر مجموعه تگ UL هستن، چون ما اگه یادتون باشه کل سایدبارمون رو داخل یک تگ UL قرار دادیم و هر ویدجت خودش یک LI شد، الان میخوایم یه مرحله دیگه وارد شیم و LI های داخل UL های داخل ویدجت ها رو هدف بگیریم
ببخشید که بازم سوال میکنم،ul اولی که مال کل ساید بار هست،li ها هم که مال ویجدت ها،اما li ها فقط داخل ul کل ساید بار هستن و داخل ul دیگری قرار ندارن.من کدم را با مال شما چک کردم..؟؟ul های دیگری هم داخل ساید بار هستن ولی داخل اونها li نداره!ممنونم
خب توی کد نداره ولی بعد از اینکه شما وارد سایت میشین ، فانکشنهایی که نوشتین اونهارو تولید میکنن که باید با inspect elements ببینینشون دیگه
آقا واقعا متشکرم که با حوصله جواب دادید،خیلی ذهنم را مشغول کرده بود..بازم تشکر میکنم.موفق باشید.
سلام
لطفا اگه میشه ایجاد حالت hover در دسته ها و آرشیو سایت خودتون رو آموزش بدین.
با تشکر
آرشیو سایت با استفاده از پلاگین smart archives درست شده، کار باهاش هم زیاد سخت نیست:)
منظورم خود آرشیو نبود، منظور حالتی که بعد از نگه داشتن موس روی لینک ها پیدا میکنه و نحوه طراحیش بود.
چه اتفاقی میفته مگه:)) منظورتون همین صفحه است دیگه؟ https://tenet.ir/archive/
در مورد تعریف ابزارک واسه قالب کجا توضیح دادید.؟
https://tenet.ir/1388/02/23/wp-design-6e-widgetize/