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

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

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

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

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

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

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

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

<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) وردپرس اکثر کارهارو انجام میده!

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

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

بای

‏31 دیدگاه برای ”آموزش طراحی قالب وردپرس #۱

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

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

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

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

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

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

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

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

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

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

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

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

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

  7. سلام سیاوش جان
    یه قالب ساده برای پنچره پاپ آپ نظرات وردپرس میخوام
    میتونی برام درست کنی/.

  8. 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

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

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

  10. با سلام
    آقا دمتون گرم، خیلی سایت مفیدی هست
    اگر کمکی از دست ما بر میاد ، بگید
    با تشکر

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

نشانی ایمیل شما منتشر نخواهد شد.