آموزش طراحی قالب وردپرس #۱
۲۹ فروردین ۸۸
از امروز شروع میکنیم به طراحی قالب برای وردپرس
بسیار آروم و نم نم میریم جلو تا همه با هر سطحی از آشنایی که از کد نویسی دارن بتونن دقیقا بفهمن چیکار میکنن نه اینکه یه چیزی رو یاد بگیریم و یک هفته بعد یادمون بره.
امروز یک سری توضیحات میدم که امیدوارم دقیقا انجام بدین تا به نتیجه ی مطلوب برسیم
یک اینکه لطفا هر موقع گفتم این کد رو بنویسین دقیقا منظورم اینه که کد رو بنویسین!
یعنی کپی پیست نداریم! البته بعضی وقت ها مهم نیست که خواهم گفت.
نکته ی دیگه در مورد کد نویسیه که حتما باید بهش توجه کنین!
هر تگی که باز میشه بالاخره باید بسته شه! اما دقیقا به صورت زیر
<tag1>
<tag2>
<tag2/>
<tag1/>
به شکل زیر نگاه کنید که کاملا و دقیقا غلط میباشد!!!
<tag1>
<tag2>
<tag1/>
<tag2/>
این نظریه یا اطلاعیه نیست یک قانون است. یعنی ما تگ هایی رو که باز میکنیم به ترتیب میبندیم!
اگر دقت کرده باشین (اگه نکردین دقت کنین!!!) احتمالا فهمیدین که شروع کننده ی هر تگ به صورت <> است، و برای بستن هر تگ باید یک اسلش قبل از تگ مربوطه بزاریم یعنی اینجوری! : </>
نگران نباشین بعدا میفهمیم که کاربرد هر تگ چیه و چه میکنه!
نکته ی دیگه در مورد ساختار قالب های وردپرسه که برای کسی که نمیشناستش بسیار سخت و عجیبه اما وقتی بفهمیم که جریان چیه به هوش طراحان پی میبریم و کم کم میفهمیم که چقدر خوب و دقیق و مناسبه!
در زیر لیست فایلهای که یک قالب کامل رو تشکیل میدن رو میبینیم
index.php
home.php
single.php
page.php
archive.php
category.php
search.php
404.php
comments.php
comments-popup.php
author.php
date.php
style.css
نگران نباشین اونقدر که به نظر میرسه سخت نیست!
فایل index.php قسمت اصلی قالب ماست که وجودش ضروری و لازمه! همینطور style.css که از اسمش معلومه نقش استایل کردن و شکل دادن به تم یا همون قالب مارو داره!
شما وقتی در یک سایت بر پایه ی وردپرس هستین در یکی از صفحات زیر هستین
index.php
single.php
page.php
archive.php
search.php
404.php
از اسم هر کدومم معلومه که جریان چیه!
اگر هنوز نفهمیدین دلیل بر خنگی شما نیست! مطمئن باشین تعارف نمیکنم!
index صفحه اصلی سایت ، single صفحه ی یک نوشته به خصوص ، page یک صفحه از سایت ، archive صفحه آرشیو هفته ای ، ماهانه و … سایت ، search صفحه ای که برای جستجوی سایت استفاده میشه و بالاخره ۴۰۴ صفحه ای برای ارور (error) سایت!
البته هیچ کدوم از اینها لازم نیستن یعنی ساخت index در اولویته !!
با ساخت همین یک صفحه (یعنی index) وردپرس اکثر کارهارو انجام میده!
امروز هم که چیز زیادی نگفتم،اما سعی کنید هرچی گفتم دقیق بخونین که کم کم با هم بریم جلو
سعی کنید مواظب خودتون باشین!
بای
دوست عزیز سلام
با تشکر از مطالب مفیدتون
من اگر بخواهم مطالب سایتم ۲ ستونه ویا بیشتر بشه بایدچیکار کنم؟
لطفا زیاد تخصصی نگید تا بفهمم چی به چیه!
[پاسخ]
سياوش کشميري
پاسخ در تاريخ شهریور ۱۸م, ۱۳۸۸ ۳:۲۶ ب.ظ:
اولین و بهترین راه اینه که تقلب کنید! یعنی یک تم که اینجوری هست رو ببینید چه کرده!
اما کوتاه بخوام بگم باید توی functions.php عدد ۲ رو بدین و همون کاری که با یک sidebar کردید با یکی دیگه هم انجام بدین و یکم هم با css کار کنید
[پاسخ]
سلام
خیلی ممنون من گشتم و تونستم با کمک از مطالب شما درمورد کلاس و آیدی ۴ ستونه هم بکنم!
اما یه سوال دیگه؟!
اول سایت روبرو را ببینید: mob20.org
خوب حالا اگر دقت کنید واسه هر مطلب یه کادر هست و زمانیکه ماوس رو وارد محدوده کادر اون مطلب می کنید پیش زمینه اون مطلب تغییر میکنه و یه کادر پررنگ هم دور تصویرش ایجاد میشه!
اینو من چه جوری تو فایل استایل ثبت کنم؟!
[پاسخ]
سياوش کشميري
پاسخ در تاريخ شهریور ۱۹م, ۱۳۸۸ ۱۰:۱۸ ب.ظ:
من که توی این سایت چیزی ندیدم! اما برای اینکه وقتی روی یک تگ میرین استایلش تغییر کنه باید به صورت زیر عمل کنید.
مثلا میخواهیم تگ p در داخل یک تگ با آی دی myid وقتی موس روش میره رو هدف قرار بدی:
(کد درست نمایش داده نمیشه لطف کن کپی کن یه جای دیگه ببینش)
#myid p:hover
{
border:2px solid #000
}
[پاسخ]
محسن
پاسخ در تاريخ شهریور ۲۰م, ۱۳۸۸ ۱۱:۳۹ ق.ظ:
اقا ممنون اما تگ من کلاس داره وتا وقتی کلاس باشه این کار انجام نمیشه! وقتی کلاس تگ را پاک کردم درست شد حالا چیکار کنم؟
[پاسخ]
محسن
پاسخ در تاريخ شهریور ۲۰م, ۱۳۸۸ ۱۱:۵۹ ق.ظ:
دوست عزیز این مشکل حل شد اما این کد شما فقط یه کادر ایجاد میکنه. من میخوام همزمان با ایجاد کادر پس زمینه داخلش هم تغییر رنگ بده!
[پاسخ]
سياوش کشميري
پاسخ در تاريخ شهریور ۲۰م, ۱۳۸۸ ۱:۵۵ ب.ظ:
خوب میتونی هر کاری با اون hover انجام بدی background عوض کنی یا مثلا رنگ فونت رو تغییر بدی!
[پاسخ]
اما من وقتی background براش تعریف می کنم دیگه همون کار قبلیشم انجام نمیده!!
میشه مثل همون اول. ساده ساده!
کد من:
#myid p:hover
{
border:1px solid #C0C0C0
background: #C0C0C0
}
[پاسخ]
سياوش کشميري
پاسخ در تاريخ شهریور ۲۱م, ۱۳۸۸ ۹:۵۸ ق.ظ:
آخر هر خط کد باید ; بزنی دادا
[پاسخ]
محسن
پاسخ در تاريخ شهریور ۲۱م, ۱۳۸۸ ۱۰:۵۹ ق.ظ:
دمت گرم
اصلا حواسم به این نکته یا همون نقطه کوچیک نبود!
آقا من نمیخوام لینک ادامه مطلب تو صفحه اول باشه! یکارش کنم
از تو فایل ایندکس حذف کردم اما بازم خود بخود با اسم ( دنباله) ظاهر میشه!
در ضمن الان تو صفحه من ۲تا کادر دور مطلب من باز میشه!
http://www.test.118clip.com
[پاسخ]
سياوش کشميري
پاسخ در تاريخ شهریور ۲۱م, ۱۳۸۸ ۶:۴۴ ب.ظ:
یعنی چی نمیخوای باشه؟ اگه میخوای چیزی ننویسه کد زیر رو جایگزین the_content بکن
the_content(' ');من توی صفحه ای که دادی کادر دومی نمیبینم!
در ضمن خواهش میکنم سوالات خارج از مطلب رو بهم ایمیل کن یا از فروم های موجود استفاده کن، ممنون
[پاسخ]
سلام دوست عزیز
من دارم واسه خودم قالب میسازم ولی به یه مشکل برخوردم! درانجمن وردپرس مطرح کردم کسی جواب نداد
من میخوام کادر مطالب سایت در وسط صفحه قرار بگیره ولی فقط در اکسپلورر درست عمل میکنه و در فایرفاکس و کروم می افته سمت راست!
کد ساده قالب: paste2.org/p/523576
کد استایل: paste2.org/p/523579
ممنون میشم راهنمایی کنید
[پاسخ]
سياوش کشميري
پاسخ در تاريخ آبان ۲۹م, ۱۳۸۸ ۲:۲۱ ق.ظ:
margin راست و چپ رو باید auto کنید مثل کد زیر:
margin:0 auto 0 auto
[پاسخ]
واقعا سپاس گذارم!
[پاسخ]
سلام ، من دارم میخونم ببینم چیزی میفهمم ؟ اینجاشو که فهمیدم ، یعنی خوب توضیح دادی که فهمیدم . دوست دارم یاد بگیرم ، امیدوارم تا تهش رو که خوندم یه چیز کوچولو یاد بگیرم .
[پاسخ]
سياوش کشميري
پاسخ در تاريخ بهمن ۱۳م, ۱۳۸۸ ۱:۴۹ ق.ظ:
حتمن میفهمی، سوال سرچ کن پیدا نکردی حتمن بپرس، سعی میکنم کمکت کنم
[پاسخ]
خیلی عالی هست
——————————
بالا خره یکی رو دیدیم که به ما تازه کار ها دل گرمی و آموزش بده !!!
————————————
اقا یه دنیا ممـــــنوووووون
[پاسخ]