دسته‌ها
وردپرس

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

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

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

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

بای

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

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

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

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

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

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

اما من وقتی 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
ممنون میشم راهنمایی کنید

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

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

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

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

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

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

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