قالب بندی پست ها و حواشی آن
نمی دانم که در این شرایط کشور، نوشتن یک پست آی تی جایز هست یا خیر …. به هر حال بعد از یک دقیقه سکوت بخاطر حوادث ناگوار اخیر درس را شروع می کنیم.
همانطور که از عنوان درس مشخص هست در این درس قرار است که پست ها یا مطالب پوسته را قالب بندی کنیم.
برای شروع رسمی درس به ادامه مطلب مراجعه کنید…
در این درس شما به فایل index.php نیازی ندارید.
موارد Xampp Control, فولدر پوسته, Firefox, و style.css را باز کنید.
• مرحله ی اول:
فایل style.css را باز کنید و در بالای کد body{} کد های زیر را وارد کنید:
body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}
• توجه کنید که عبارت margin: 0; دقیقاً همان عبارت margin: 0 0 0 0; است. در حقیقت وقتی که تمامی مقادیر یکسان باشند، شما می توانید برای خلاصه نویسی از یک شماره استفاده کنید که این یک شماره برای تمامی حالت ها استفاده می شود. همین کار را برای padding هم استفاده کردیم.
• فایل را save کرده و تغییرات را در مرورگر مورد نظر نگاه کنید.
نکته: من به شما گفتم که کد مورد نظر را بالا یا پایین کدهای دیگر قرار دهید. اما بدانید که این ها همگی اختیاری هستند. شما می توانید کدها را در هر کجا تایپ کنید و یا قرار دهید، این کار را تنها برای سازماندهی و مدیریت بهتر کدها به شما گفتم.
• مرحله ی دوم :
حال زمان آن رسیده که عنوان پست ها (H1) را استایل دهیم، پس کدهای زیر را در پایین body{} تاپپ کنید:
h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}
» font-family: Georgia, Sans-serif; – این کد عنوان پست ها را از فونت Arial به Georgia تغییر می دهد. و در صورت نبود فونت Georgia، از فونت Sans serif استفاده می کند.
» font-size: 24px; – این گزینه کاملاً واضح است. توجه کنید، شما اندازه ی فونت را در body{} مقدار ۱۲px تنظیم کردید، در صورتیکه تگ های H1 و H2 از این قانون یا این خط کد پیروی نمی کنند، بلکه تگ های heading از قانون خودشان پیروی می کنند. پس برای کنترل آنها، شما باید آنها را بصورت جداگانه قالب بندی کنید.
» padding: 0 0 10px 0; – این کد به معنی این است که از ناحیه ی پایین H1 ده پیکسل فاصله بیافتد. این فضای ۱۰ پیکسلی را برای فضای بین عنوان وبلاگ ها و توضیحات وبلاگ مورد استفاده قرار خواهد گرفت.
تغییرات را save کنید و آنرا مشاهده کنید.
• مرحله ی سوم:
کد های زیر را در زیر سلکتور #container{} تایپ کنید. (بعد از تغییر در هر بلاک و یا تایپ هر کد تغییرات را ثبت کرده و آنها را در مرورگر خود مشاهده کنید.)
.post{
padding: 10px 0 10px 0;
}
(شما با این کد ۱۰ پیکسل فاصله از ناحیه بالا و پایین به هر div برای هر پست اضافه کرده اید.)
.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}
(سلکتور post h2 به طور ویژه sub-headings های H2 را فقط برای پست ها هدف گیری می کند، به زبان خودمان این سلکتور تنها به عنوان پستها ویژگی می بخشد).
.entry{
line-height: 18px;
}
(کد line-height فاصله ی بین خطوط یک مطلب را معین می کند که در اینجا ما برای آن مقدار متوسط و مناسب ۱۸px را انتخاب کرده ایم. می توانید مقدار آنرا به اعداد مختلف تغییر دهید تا وظیفه ی این خط کد را بهتر متوجه شوید. ولی در پایان مقدار را به همان ۱۸ پیکسل بازگردانید.)
• مرحله چهارم:
کد پاینن را در زیر سلکتورa:hover{} تایپ کنید:
p{
padding: 10px 0 0 0;
}
(سلکتور p با پاراگراف های متن سروکار دارد و با توجه به مقدار padding داده شده، فاصله ی هر پاراگراف از دیگری ۱۰px پیکسل خواهد بود).
• مرحله ی پنچم:
کد زیر را در پایین سلکتور entry{} تایپ کنید:
p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}
اگر بیاد داشته باشید، تگ باکس مخفی postmetadata را درون تگ های پاراگراف (p) قرار داده اید (اگر بیاد ندارید یک نگاهی به فایل index.php بیاندازید). پس برای استایل دادن به آن می توانید به صورت p.postmetadata آدرس دهی کنید.
برای تگ باکس مخفی postmetadata ، شما یک حاشیه خاکستری با ضخامت یک پیکسل از سمت بالا و یک فاصله ی ۱۰ پیکسلی از طرف بالا را به postmetadata داده اید.
نکته: اگه بیاد داشته باشید بخش postmetadata برای این است که اطلاعات هر پست مانند دسته ی پست، تعداد نظرات پست و… را درون آن جای دهیم.
معنی عبارت border-top حاشیه از بالا (فقط از بالا) است. عبارت border-left معنی حاشیه از سمت چپ (فقط از سمت چپ) و به همین ترتیب برای border-bottom و border-right نیز معنی اش واضح است. برای مثال معنی عبارت border: 1px solid #ccc این است که: از هر چهار طرف حاشیه خاکستری با ضخامت یک پیکسل داده شود.
• مرحله ی ششم:
کدهای زیر را در پایین سلکتور p.postmetadata{} تایپ کنید:
.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}
در این کد شما برای بخش navigation یا همان قسمت صفحه ی بعدی و صفحه ی قبلی قالب بندی می کنید. در حقیقت شما:
• ۱۰ پیکسل حاشیه از بالا اضافه کردید.
• اندازه ی فونت را به ۱۴px تغییر دادید.
• پهنای فونت را به ضخیم عوض کردید
• ارتفاع خط را به ۱۸ پیکسل افزایش دادید.
خوب درس امروز ما که کار و قالب دهی به بخش پست ها بود به پایان رسید. دیگر چیزی به پایان کلی دروس نمانده است….
ای ول من اول شدم :)
مهدی جان من از امروز شروع کردم به پی گیری مقالات از اول(چون تازه اینجا رو پیدا کردم) امیدوارم که وقت داشته باشی تا بتونم در مشکلاتم ازت کمک بگیرم .
راستی تو فروم خاصی فعالیت نداری چون نمی دونم سئوالات احتمالی رو ازت بپرسم .
بازم از زحماتی که واسه جمع آوری این مطالب میکشی تشکر می کنم .
خوش باشی .
ایشالا تو همه چی اول باشی
نه مهدی جان تو فروم خاصی نیستم ولی می تونی علاوه بر اینجا مشکلاتت رو توی فروم وردپرس مطرح کنی که هم خیلی بهتره و هم حرفه ای تر…
موفق باشی..
سلام:
ممنون از این اطلاعات.من یه سوال خارج از این مقوله دارم.چقدر مهمه که ای تی رو تو یه دانشگاه خوب بخونیم؟چقدر کار خود آدم مهمه؟!؟
ستاره جان اگه از من بپرسی ، ۸۰ درصد تلاش خود آدمه، ۲۰ درصد شرایط…..
تازه آی تی خوشبختانه از جمله مقولاتی هست که بدون داشتن تحصیلات دانشگاهی هم میشه در این رشته پیشرفت کرد….
خیلی ممنون از جوابتون :)
لطفاً به سوالات مطرح شده در صفحه پوسته مورد نظر شما پاسخ بدین.
http://themes.wp-persian.com/yahoo/
متشکرم
چشم به این مشکل هم رسیدگی می کنم، مشتکرم که گفتی…
ولی الان یکم سرم شلوغه ولی حلش می کنم….
من منتظرم ها :)
لطفاً زودتر
با عذر خواهی. جمله ام امری نبوده بلکه درخواستی بوده.
یه زمانی سوء تفاهم پیش نیاد
بازم مرسی :)
:)
سلا مهدی جان
چند تا قسمت دیگه مونده؟ :D
راستی تو لینکستان سایت من با عنوان مرجع قالب میهن بلاگ و ادرس yazd-net.com لینکه اگه برات مقدوره به عنوان “قالب وبلاگــ ” و آدرس p30temp.com تغییرش بده ممنون
سلام
چیز دیگه این باقی نموده ۳ یا ۴ درس دیگه
این آدرس سایتت هم عوض شد…
موفق باشی…
سلام آقا مهدی.
به خاطر آماده کردن این سری آموزشی واقعا دست درد نکنه، خیلی آقایی که این همه وقت گذاشتی.
من امروز صبح شروع به خوندن این سری آموزشی کردم و الان تموم شده خیلی عالی بود . چند تا سوال هم دارم که امیدوارم وقت داشته باشید که جواب بدید .
۱٫ چطوری میتونم به اطلاعات که از ابزارک ها میگیرم یه نظم خاص بدم منظورم اینکه مثلا این که میره لینک ها رو ور میداره میاد خوش اینا رو توی یه لیست قرار میده . حالا اگه من بخوام اینا رو تو یه جدول مدیریت کنم چطوریاست ؟ یعنی مثل همین طوری که مطلب ها رو از وی پی میگیرم میشه اونا رو هم از یه لوپ گرفت که بشه براشون یه قالب تعریف کرد . دقیقا همین طوری که شما لینک ها را در قالب این سایت گذاشته اید .
۲٫ اگه میشه یه مرجع کامل که همه ی کد های مربوط به طراحی قالب را دارند بهم آدرس بدید .
۳٫ نظرت در مورد اکستنشن TAGStension تو دریم ویر چیه ؟ فک کنم آخر آموزشات اون رو هم به آموزشهات وصل کنی خیلی بازدهی بیشتر شه .
۴٫ چطوری به آخر یه مطلب امکان دادن نظر را اضافه کنم یا اینکه چطوری لیست کامنتهای گذاشته شده برای اون پست را بیارم .
از این که شجره نامه شد متاسفم ;)
ممنون از آموزشاتون، عالین.
بروز رسانی هارو یکم سریع تر کنید. ممنون
جملم امری نبود، پیشنهادی بود!
سلام مهدی جان
۱- والا مدیریت اینها توی یک جدول زیاد خوب نیست، چون معمولاً جدول مشکلات زیادی رو داره والا پیشنهاد من به شما برای یادگیری این بخش اینه که برید بخش سایدبار قالب های من یا دیگران رو مشاهده کنید تا متوجه بشید که چطوری کار می کنه این سیستم….
۲- به آدرس زیر برو و تمامی چیزهایی رو که نیاز داری رو مشاهده کن
http://codex.wordpress.org/Main_Page
۳- والا من با دریم ویور کار نکردم نمی تونم در این مورد نظر بدم….
۴- هنوز این سری آموزش تموم نشده و حدود ۳ الی ۴ درس دیگه داره که در اون درسها نحوه ی اینکار ها رو می گم
ممنون. استفاده کردیم. در ضمن در کد زیر
post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}
یه دونه نقطه (.) قبل از p جا انداختی. تصحیحش کن
مجتبی جان کاملاً درست گفتی…
ایراد رفع شد…
باز هم ممنون……
سلام
از اینکه این آموزش های حرفه ای رو در اختیار همه گذاشتید ممنونم. هر چی درباره پوسته ها بلدم رو مدیون شما هستم
از اینکه دیدم چند جا این مطالب رو کپی کردن واقعا….
فقط یه چیزی، یادتون رفت ساخت استایل برای ie و روش اضافه کردن اون به پوسته رو بگید(می دونم که دیگه وقتش نیست)
باز هم ممنون از شما
ممنونم یاسر جان . روش ساخت استایل مخصوص IE جزو بحث های متفرقه وردپرس محسوب می شه بخاطر همین چیزی ازش نگفتم ولی همین آموزش الان براحتی در اینترنت پیدا میشه
با سلام ببخشید یه سوال داشتم اینکه باید حتما همین که داریم این سری آموزشی رو میخونیم کل کدها ها رو فول باشیم(حفظ باشیم) اخه خیلی سخته که.
یا نه باید یه بار خوند و کار کرد و طی زمان خوب یاد گرفت با تشکر.
طی زمان باید یاد گرفت
هیچ چیزی رو نمیشه با حفظ کردن محض بطور دائم به حافظه سپرد
سلام بزرگوار، من صفحات رو دخیره کردم اما اگه مطالب مربوط به چگونه در وردپرس رو بصورت یه پی.دی.اف بتونی برای دانلود بذاری که همشو بشه یکجا داشت خیلی باحال میشد با اینحال بازم ممنون از کار ارزشمندت، شاد باشی و پایدار