طراحی قالب وردپرس (جلسه اول)

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

خوب، فکر می کنم در اولین قدم باید واژه قالب رو به فراموشی بسپاریم. قالب معادل فارسی واژه Template هستش. عنوانی که در وردپرس برای شیوه نمایش اون انتخاب نشده. عنوان انتخابی در وردپرس Theme هست و معادل فارسی اون پوسته. پس بیایید از این به بعد فقط از واژه پوسته استفاده کنیم.

ساختار پوسته های وردپرس

پوسته های وردپرس به طور کلی دارای ساختار زیر هستند.

wrdp-theme1(1)

بخش Header یا سربرگ که در بالای تمامی صفحات سایت شما قرار می گیرد.
بخش Main Area یا ناحیه اصلی که مکان قرار گیری محتویات صفحه جاری وب سایت شماست.
بخش Footer یا پانوشت که در انتهای تمامی صفحات سایت شما قرار خواهد گرفت.
بخش Sidebar یا نوار کناری که عموما مکان قرار گیری ابزارک های قالب شماست.
پرونده های پوسته
هر پوسته به طور معمول باید دارای پرونده های زیر باشد. پرونده های زیر محل ذخیره کد های قالب شما هستند. اما پیش از اون بزارید یک چیزی رو توضیح بدم. به تمامی فایل هایی که در زیر یاد میشه نیاز نیست. بنده برای درک آسون تر پرونده ها رو به سه گروه تقسیم کردم : پرونده های لازم با دو ستاره (که حتما باید باشند) پرونده های مورد نیاز با دو ستاره (که بهتر اونه که باشند. اگرنه از index.php استفاده میشه) و پرونده های دلخواه بدون ستاره (که بود و نبودشون فرقی نداره)
style.css ** : شیوه نامه (Style) اصلی پوسته وب سایت شما که بسیار حائز اهمیت است.
index.php ** : پرونده اصلی پوسته که محتویات آن در صفحه اصلی نمایش داده می شوند. از این پرونده در زمانی که یکی از پرونده های مورد نیاز وجود نداشته باشد نیز استفاده می شود.
functions.php ** : پرونده ای که تمامی تنظیمات و توابع پوسته شما + هک های کاربر در اون ذخیره می شند. بسیاری از طراحان به دلیل عدم استفاده خودشون از این پرونده اون رو قرار نمی دهند و باعث دردسر برای کاربر میشند.
header.php * : که محتویات اون در بالای تمامی صفحات سایت شما نمایش داده میشه.
footer.php * : که محتویات اون در پایین تمامی صفحات سایت شما نمایش داده میشه.
single.php * : که در زمانی استفاده میشه که کاربر در حال مشاهده یکی از نوشته های وب سایت شما باشه.
page.php * : که در زمانی استفاده میشه که کاربر در حال مشاهده یکی از برگه های وب سایت شماست.
sidebar.php * : که دستورات ستون کناری قالب در اون ذخیره میشه.
۴۰۴٫php : که در زمانی که خطای ۴۰۴ (عدم یافتن صفحه یا فایل) رخ میده استفاده میشه.
archive.php : که در زمان مشاهده آرشیو مطالب نمایش داده میشه.
category.php : که در زمان مشاهده آرشیو مطالب یکی از دسته بندی های سایت استفاده میشه.
screenshot.png : که یک تصویر پیشنمایش از قالبه که در زمان مرور لیست پوسته ها در بخش نمایش در پیشخوان وردپرس استفاده میشه.
و موارد دیگه که چندان اهمیتی ندارند.

منتظر ادامه این آموزش باشید…

نظرات و دیگر موارد
اگر این قالب را دوست دارید امتیاز دهید :
۳۲ دیدگاه نوشته شده است! می توانید دیدگاه خود را بنویسید

  1. عالیییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییی بود

  2. […] جلسه اول این آموزش رو خونده باشید مطلع هستید که ما تا مرحله […]

  3. طراحی قالب وردپرس در آگوست 23, 2014 ساعت 7:52 ق.ظ  گفته :

    فوق العاده بود

    بسیار ممنون بابت وب سایت خوبتون

  4. طراحی سایت در آگوست 6, 2014 ساعت 5:10 ب.ظ  گفته :

    ساده ، خلاصه و مفید
    ممنون

  5. سلام
    من یه قالب ورد پرس نوشتم ولی نوشته ها با عکس کنار هم قرار نمیگیرن ، نوشته ها یا بالای عکس قرار میگیرن یا پایین عکس میشه کمک کنید.

  6. سلام میشه لطفا اجزای یک پوسته با پنل مدیریت را توضیح بدید که بدونیم چه جوری میشه با تغییرات لازم را برای یه پوسته مثل ENFOLD را انجام بدیم؟ مثل توضیخ layout دسته بندی ها، تغییرات fooder، و …. تمامی آموزش های کار با پوسته یه قالب ENFOLD را بگیید. متشکرم

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

  8. میلاد در نوامبر 3, 2013 ساعت 11:24 ق.ظ  گفته :

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

    لینک دانلود فایل رو پایین میذارم دانلود کنید تو وردپرس امتحان کنید متوجه میشید.

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

  9. در بازار فروش قالب حوملا بهتره است یاد بگیریم یا وردپرس

    پاسخ شما:
    بنده به شخصه با جوملا چندان کار نکردم اما تقاضا برای وردپرس بیشتره، کار با وردپرس راحت تره و وردپرس انعطاف پذیر تره.

  10. […] جلسه اول این آموزش رو خونده باشید مطلع هستید که ما ترحله طراحی […]

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

    پاسخ شما:
    انشالله تصمیم داریم آموزش رو با یک قالب ساده ادامه بدیم تا برای کاربران مشکل پیش نیاد.

  12. علی بهنام فر یا محمد فرهمند؟!!؟

    پاسخ شما:
    چه تفاوتی داره؟ آقا علی مدیر کل سایت هستند و بنده هم فقط نویسنده بخش وردپرس می باشم.

  13. مهم نیست در آگوست 3, 2013 ساعت 5:16 ب.ظ  گفته :

    امیدوارم موفق باشید

    پاسخ شما:
    برای شما هم آرزوی موفقیت دارم.

  14. سلام.خیلی کمه.بیشتر بنویسید خواهشا.اگه همین جور پیش برید ، ۵ یا ۶ ماه طول می کشه تا تموم بشه.سرعت پست دادنتون کمه.یه روزی پست میدید ، ۱ ماه طول می کشه تا پست بدی رو بدید.دلیلی برای این کار نیارید.دیگه واقعا باید یه فکری به این موضوع کرد.

    پاسخ شما:
    قراره قالب HTMLی که در حال تبدیل اون به وردپرس هستیم تغییر کنه برای همین تاخیر ایجاد شده. طبق برنامه ریزی هم آموزش طی ۵ جلسه انجام خواهد شد.

  15. مهم نیست در آگوست 1, 2013 ساعت 3:33 ب.ظ  گفته :

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

    پاسخ شما:
    بنده محمد فرهمند هستم. [لینک]

  16. مهم نیست در جولای 30, 2013 ساعت 4:18 ب.ظ  گفته :

    کاش اسم نویسنده مطالب رو مینوشتید…

    پاسخ شما:
    چه اهمیتی داره؟

  17. واقعا خسته نباشید!!
    تمام مشکل کاربران اینه که نمی تونن پی اس دی رو به زبان برنامه نویسی برگردونن!!
    توی بخش اچ تی ام ال که هیچی از طراحی وردپرس نمیگه.. شما هم که اینطوری میاین میگین باصدتا نقص..
    این چه وضعشه؟ همه می دونن باید قالب توی نرم افزار فتوشاپ و امثال اون طراحی بشه.شما بیا آموزش برنامه نویسی واسه پوسته رو بگو..
    خسته نباشید واقعا!

    پاسخ شما:
    مبحث طراحی در نرم افزاری مثل فتوشاپ مبحثی نیست که بنده بخوام اونو اونم تو یک مطلب توضیح بدم. بخش آموزش HTML هم داره قدم به قدم آموزش های طراحی صفحات HTML رو می زاره که اگر اون رو فرا بگیرید براحتی می تونید یک قالب طراحی شده به صورت PSD رو به HTML تبدیل کنید.
    این هم جلسه اول بود. امیدوارم انتظار نداشته باشید طی یک جلسه بنده براتون نحوه کد نویسی پوسته رو توضیح بدم. کمی صبور باشید.

  18. بد نبود ولی یکم آسون و آماتور تر تعریف کنین بهتره…

    پاسخ شما:
    به روی چشم. انشالله در جلسات بعد.