آموزش طراحی قالب وردپرس

[Cpanelcenter]

جلس هفتم :

سلام

یک مرور کوچیک میکنیم ببینیم تا حالا چی یاد گرفتیم

اول فهمیدیم وردپرس اصلا چی هست و چه میکند!

بعد مواد لازم رو تهیه کردیم و شروع کردیم به نصب وردپرس روی کامپیوتر شخصی برای تست سریع برنامه و قالب ها!

در درس شماره ۱ فهمیدیم تگ ها و قانون مهم اونها چیه و همچنین قالب وردپس از چی تشکیل شده!

درس شماره ۲ که خیلی هم ساده بود یک نمای کلی از یک قالب معمولی وردپرس به ما نشون داد.

در درس شماره ۳ یک قالب جدید با نام amoozesh ساختیم و فایل های index.php و style.css رو ساختیم.

درد درس شماره ۴ تونستیم نام وبلاگ رو در بالای صفحه بارگذاری کنیم. یعنی شروع ساخت header

درس ۴ باز هم ادامه پیدا کرد و توضیحات سایت هم در زیر اسمش اومد تا ساخت header به پایان برسه.

در درس ۵ یک کار مهم رو شروع کردیم و یک حلقه ساختیم که لیست مطالب رو فراخوانی میکرد.

و حالا میخواهیم درس مهم شماره ۵ رو ادامه بدیم:

مثل همیشه برنامه ها و فولدر های مورد نیازمون رو باز میکنیم.

در درس قبل به اینجا رسیدیم که وبلاگمون دارای اسم، توضیحات و لیست مطالب هست.

خوب میدونیم که مطالب ما الان دیده نمیشن

خوب برای اینکار باید در زیرعنوان نوشته در فایل index که در جلسه قبل با این کد:

<h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2>

نوشتیم کد زیر رو اضافه کنیم:

<?PHP the_content();?>

به همین راحتی content یا محتوای پست رو فراخوانی میکنیم، کار رو ذخیره کرده و میریم سایتمون رو ببینیم!

به این ترتیب متن نوشته ها هم در صفحه ظاهر میشه و صفحه ما شامل: عنوان سایت،توضیحات سایت،عنوان پست ها به همراه متن اونهاست!

ما در حال حاضر یک سایت نیمه کامل و البته بسیار بد شکل و قیافه داریم که اصلا ترس نداره!

بعدا با استایل کردن میتونیم بسیار زیبا و شکیلش کنیم.(با کمک فایل style.css )

میبینیم که یک خط کوتاه کد php که نوشتیم چه میکنههههه!!!

احتمالا میدونین که اگه خودتون میخواستین با html این مطالبی که نوشتین رو بعد از وقت گذاشتن بسیار زیاد بنویسین احتمالا از نوشتن پشیمون میشدین!

خوب بریم سر تمیز کاری!

یادتون میاد که در درس header کل کدهای مربوط به قسمت بالایی صفحه رو بین تگی نامرئی(div) با شناسه ی header گذاشتیم و در پایین اون یک تگ نامرئی دیگه ساختیم با نام content که کل محتوای صفحه رو در بر میگیره! حالا ما درمحدوده ی content قرار داریم و میخواهیم که محتوای عنوان نوشته ها و محتوای اونها رو از بقیه قسمت های صفحه متمایز کنیم و نامهایی مناسب براشون انتخاب کنیم.

برای اینکار پیشنهاد من این است که یک نام مناسب برای عنوان هر پست و همچنین یک نام برای متن پستها انتخاب کنیم!

برای اینکار ابتدا یک تگ div برای عنوان پست به این صورت:

<div class=”posttitle”>

<h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2>

</div>

و یک تگ هم برای محتوا به این صورت:

<div class=”entry”>

<?PHP the_content();?>

</div>

میسازیم، میدونیم که این دو تگ(یعنی posttitle و entry ) با هم تشکیل گروه بزرگتری رو میدن که همان پستهای ماست پس هر دوی تگ ها رو با نام post به هم مربوط میکنیم:

<div class=”post”>

<?PHP if(have_posts()): while(have_posts()):the_post();?>

<div class=”posttitle”>

<h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2>
</div>

<div class=”entry”>

<?PHP the_content();?>

</div>
</div>

احتمالا این سوال پیش اومده که چرا به جای id یه تگ ها class دادم!!؟

اصلا فرقشون چیه؟

جواب اینه که فرق زیادی ندارن فقط موضوع مورد توجه اینه که class در صفحه n بار تکرار میشه اما id یگانه است!

در واقع مثل اسم عام و اسم خاص میمونه! ما فقط یک برج ایفل داریم اما n تا برج داریم!! اوکی شد؟!

اوکی…

دیگه چیز خاصی برای این درس نمیمونه جز اینکه بگم حتمن حتمن حتمن گوگل کروم رو دانلود کنید!

کاری ندارم که مرورگر خوبی هست یا نه اما برای درک اینکه ما داریم چیکار میکنیم بسیار زیاد کمکمون میکنه!

هرچند یک افزونه برای فایرفاکسی ها هم بود(اسمش رو یادم نیست اما یک bug داشت و عکسش هم یه سوسک بود ) که کاری که من میخوام توضیح بدم رو انجام میداد اما من کروم رو برای اینکار پیشنهاد میکنم!

با این کروم عزیز بعدها خیلی کار داریم چون میدونم خیلی ها مثل من سرعت بالایی دارن!! گفتم زودتر بگم که شروع به دانلود کنید!!

در ضمن اگه ایرادی داشتم گوشزد کنید لطفن! مرسی…

فعلا بابای بای بای بابای بای