wptheme

سلام

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

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

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

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

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

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

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

در درس شماره ۳ یک قالب جدید با نام 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 داشت و عکسش هم یه سوسک بود:d ) که کاری که من میخوام توضیح بدم رو انجام میداد اما من کروم رو برای اینکار پیشنهاد میکنم!

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

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

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

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

مطالب مشابه

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

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

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

  1. balochkhan گفت:

    قبلا ما یه تگ برای مطالب داشتیم


    پس چرا دوباره برای مطالب یه تگ دیگه گذاشتیم

    اینش برام جای سوال داره؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
    منظورم از تگ همون تگ های divهستش که بقول شما نامرئی ان و بعدا تو استایل ازشون استفاده می کنیم

    [پاسخ]

  2. علی گفت:

    بعد از فراخوانی توابع
    the_permalink
    و
    the_title
    سمی کالن درج نشده.

    در جایی از متن آمده :
    ما در حال حاظر یک سایت نیمه کامل و…
    «حاضر» صحیحه، چون املای خودم ضعیفه، روی املا حساسیت دارم! :)

    [پاسخ]

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

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

    [پاسخ]

    سیدرسول پاسخ در تاريخ اسفند ۱۲ام, ۱۳۹۱ ۳:۱۴ ب.ظ:

    در زبان PHP پس از دستورات تک خطی، نیاز به درج ; نمی باشد… اما اگر دستور دیگه ای بخواهیم بدیم باید ; را درج کنیم.

    [پاسخ]

  3. علی گفت:

    سلام من این قسمت رو که گفتید با دقت تایپ کردم اما نمیشه همش خطا میده و روی تصویر هیچ چیزی نشون نمیده جان من یه کمکی بفرمایید
    سریع تر اگه میشه ممنون سیاوش انگار این نوشته شما یه مشکلی داره یه نگاهی بهش بندازید

    <a href=” ”>

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ بهمن ۲۴ام, ۱۳۹۰ ۷:۱۷ ب.ظ:

    لطف کنید کد رو داخل تگ pre یا code قرار بدین که نمایش داده بشه

    [پاسخ]

    علی پاسخ در تاريخ بهمن ۲۴ام, ۱۳۹۰ ۸:۰۳ ب.ظ:

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ بهمن ۲۴ام, ۱۳۹۰ ۸:۵۷ ب.ظ:

    خب پس کد رو برای من بفرستین به ایمیلم از طریق صفحه تماس با ما هم میتونین بفرستینش

  4. mohammad گفت:

    ببخشید کلا میشه کل کدهایی که تا الان نوشتیم رو بذارید تا ببینیم چیزی رو اشتباه نکردیم
    ممنون.

    [پاسخ]

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

    تو آموزش چند بار توضیح داده میشه من الان کد‌ها رو ندارم چون واسه حدود سه ساله پیشه آموزش‌ها :)

    [پاسخ]

پاسخ دهید

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

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