wp design

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

بسیار آروم و نم نم میریم جلو تا همه با هر سطحی از آشنایی که از کد نویسی دارن بتونن دقیقا بفهمن چیکار میکنن نه اینکه یه چیزی رو یاد بگیریم و یک هفته بعد یادمون بره.

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

یک اینکه لطفا هر موقع گفتم این کد رو بنویسین دقیقا منظورم اینه که کد رو بنویسین!

یعنی کپی پیست نداریم! البته بعضی وقت ها مهم نیست که خواهم گفت.

نکته ی دیگه در مورد کد نویسیه که حتما باید بهش توجه کنین!

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

<tag1>

<tag2>

<tag2/>

<tag1/>

به شکل زیر نگاه کنید که کاملا و دقیقا غلط میباشد!!!

<tag1>

<tag2>

<tag1/>

<tag2/>

این نظریه یا اطلاعیه نیست یک قانون است. یعنی ما تگ هایی رو که باز میکنیم به ترتیب میبندیم!

اگر دقت کرده باشین (اگه نکردین دقت کنین!!!) احتمالا فهمیدین که شروع کننده ی هر تگ به صورت <> است، و برای بستن هر تگ باید یک اسلش قبل از تگ مربوطه بزاریم یعنی اینجوری! : </>

نگران نباشین بعدا میفهمیم که کاربرد هر تگ چیه و چه میکنه!

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

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

index.php

home.php

single.php

page.php

archive.php

category.php

search.php

۴۰۴٫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

۴۰۴٫php

از اسم هر کدومم معلومه که جریان چیه!

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

index صفحه اصلی سایت ، single صفحه ی یک نوشته به خصوص ، page یک صفحه از سایت ، archive صفحه آرشیو هفته ای ، ماهانه و … سایت ، search صفحه ای که برای جستجوی سایت استفاده میشه و بالاخره ۴۰۴ صفحه ای برای ارور (error) سایت!

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

با ساخت همین یک صفحه (یعنی index) وردپرس اکثر کارهارو انجام میده!

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

سعی کنید مواظب خودتون باشین!

بای

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

مطالب مشابه

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

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

29 Responses to آموزش طراحی قالب وردپرس #۱

  1. محسن گفت:

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

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ شهریور ۱۸ام, ۱۳۸۸ ۳:۲۶ ب.ظ:

    اولین و بهترین راه اینه که تقلب کنید! یعنی یک تم که اینجوری هست رو ببینید چه کرده!
    اما کوتاه بخوام بگم باید توی functions.php عدد ۲ رو بدین و همون کاری که با یک sidebar کردید با یکی دیگه هم انجام بدین و یکم هم با css کار کنید

    [پاسخ]

  2. محسن گفت:

    سلام
    خیلی ممنون من گشتم و تونستم با کمک از مطالب شما درمورد کلاس و آیدی ۴ ستونه هم بکنم!
    اما یه سوال دیگه؟!
    اول سایت روبرو را ببینید: mob20.org
    خوب حالا اگر دقت کنید واسه هر مطلب یه کادر هست و زمانیکه ماوس رو وارد محدوده کادر اون مطلب می کنید پیش زمینه اون مطلب تغییر میکنه و یه کادر پررنگ هم دور تصویرش ایجاد میشه!
    اینو من چه جوری تو فایل استایل ثبت کنم؟!

    [پاسخ]

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

    من که توی این سایت چیزی ندیدم! اما برای اینکه وقتی روی یک تگ میرین استایلش تغییر کنه باید به صورت زیر عمل کنید.
    مثلا میخواهیم تگ p در داخل یک تگ با آی دی myid وقتی موس روش میره رو هدف قرار بدی:
    (کد درست نمایش داده نمیشه لطف کن کپی کن یه جای دیگه ببینش)

    #myid p:hover
    {
    border:2px solid #000
    }

    [پاسخ]

    محسن پاسخ در تاريخ شهریور ۲۰ام, ۱۳۸۸ ۱۱:۳۹ ق.ظ:

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

    [پاسخ]

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

    دوست عزیز این مشکل حل شد اما این کد شما فقط یه کادر ایجاد میکنه. من میخوام همزمان با ایجاد کادر پس زمینه داخلش هم تغییر رنگ بده!

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

    خوب میتونی هر کاری با اون hover انجام بدی background عوض کنی یا مثلا رنگ فونت رو تغییر بدی!

  3. محسن گفت:

    اما من وقتی background براش تعریف می کنم دیگه همون کار قبلیشم انجام نمیده!!
    میشه مثل همون اول. ساده ساده!
    کد من:
    #myid p:hover
    {
    border:1px solid #C0C0C0
    background: #C0C0C0
    }

    [پاسخ]

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

    آخر هر خط کد باید ; بزنی دادا

    [پاسخ]

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

    دمت گرم
    اصلا حواسم به این نکته یا همون نقطه کوچیک نبود!
    آقا من نمیخوام لینک ادامه مطلب تو صفحه اول باشه! یکارش کنم
    از تو فایل ایندکس حذف کردم اما بازم خود بخود با اسم ( دنباله) ظاهر میشه!
    در ضمن الان تو صفحه من ۲تا کادر دور مطلب من باز میشه!
    http://www.test.118clip.com

    [پاسخ]

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

    یعنی چی نمیخوای باشه؟ اگه میخوای چیزی ننویسه کد زیر رو جایگزین the_content بکن
    the_content(' ');
    من توی صفحه ای که دادی کادر دومی نمیبینم!
    در ضمن خواهش میکنم سوالات خارج از مطلب رو بهم ایمیل کن یا از فروم های موجود استفاده کن، ممنون

  4. علي گفت:

    سلام دوست عزیز
    من دارم واسه خودم قالب میسازم ولی به یه مشکل برخوردم! درانجمن وردپرس مطرح کردم کسی جواب نداد
    من میخوام کادر مطالب سایت در وسط صفحه قرار بگیره ولی فقط در اکسپلورر درست عمل میکنه و در فایرفاکس و کروم می افته سمت راست!
    کد ساده قالب: paste2.org/p/523576
    کد استایل: paste2.org/p/523579
    ممنون میشم راهنمایی کنید

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ آبان ۲۹ام, ۱۳۸۸ ۲:۲۱ ق.ظ:

    margin راست و چپ رو باید auto کنید مثل کد زیر:

    margin:0 auto 0 auto

    [پاسخ]

  5. saeid گفت:

    سلام ، من دارم میخونم ببینم چیزی میفهمم ؟ اینجاشو که فهمیدم ، یعنی خوب توضیح دادی که فهمیدم . دوست دارم یاد بگیرم ، امیدوارم تا تهش رو که خوندم یه چیز کوچولو یاد بگیرم .

    [پاسخ]

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

    حتمن میفهمی، سوال سرچ کن پیدا نکردی حتمن بپرس، سعی میکنم کمکت کنم

    [پاسخ]

  6. adel گفت:

    خیلی عالی هست
    ——————————
    بالا خره یکی رو دیدیم که به ما تازه کار ها دل گرمی و آموزش بده !!!
    ————————————
    اقا یه دنیا ممـــــنوووووون

    [پاسخ]

  7. علی گفت:

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

    [پاسخ]

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

    :) دوستان دیگه هم هستند البته، ممنونم، امیدوارم به دردتون بخوره، به درد ما که نخورده فعلن:))

    [پاسخ]

  8. parisa گفت:

    salam che webe khub o amuzandeyi
    man mikham shoru konam be tarahie site o ghaleb mishe lotfan ye email bezanid va rahnamayihaye lazem ro bokonid ta bedunam az koja shoru konam ke behtar bashe kheili mamnoon misham ke linkhayi ro ke lazem midunid baram mail konid man taze ye kam SQL yad gereftam albate ye kam ham C++ ro be surate teori baladam….kheili mamnoon

    [پاسخ]

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

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

    [پاسخ]

  9. parisa گفت:

    kheili mamnoon khob php ro bayad che joori shoru konam? ketabe khasi hast ke betune komakam kone? merc

    [پاسخ]

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

    والله من منبع مناسبی نمیشناسم و خودم هم زیاد بلد نیستم، توی فروم های معروف مثل p30world بپرسین حتمن بهتر از من میتونن کمکتون کنن

    [پاسخ]

  10. balochkhan گفت:

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

    [پاسخ]

پاسخ دهید

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

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