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

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

اگر جلسه اول این آموزش رو خونده باشید مطلع هستید که ما تا مرحله طراحی فایل Css پیش رفتیم اما بنا به تصمیم مدیریت قالبی که به روی اون کار می شد تغییر کرد و حالا قصد داریم تازه ترین قالب وب سایت تم دیزاینر یعنی قالب زندگی ایرانی، اسلامی رو به وردپرس تبدیل کنیم. پس در نخستین قدم پرونده های این قالب رو از این لینک دانلود کنید. (مراحل طراحی گرافیکی قالب و تبدیل اون به html مراحلی هستند که موضوع آموزش ما نیست و می تونید برای فراگیری اون ها مقالات آموزشی html موجود در تم دیزاینر و مقالات آموزشی موجود در خانه گرافیک psdhome.ir رو دنبال کنید)
اگرچه مباحث زیر یکبار بیان و توضیح داده شدند اما به دلیل تغییر قالبی که روی آن کار می کنیم ناگذیر هستیم مراحل زیر رو تکرار کنیم.

پرونده style.css
پرونده style.css قلب پوسته وردپرسی شماست. در ابتدای این فایل باید یکسری دستوراتی قرار بگیره که مشخصات پوسته شما رو شامل میشه. برای شروع کار ابتدا یک پوشته با نام irani ایجاد کنید (به روی رایانه شخصیتون یا به روی هاست فرقی نداره) سپس فایل های قالب (تصاویر و پرونده css که در بالا لینک دانلودش رو گذاشتم) در اون کپی کنید. سپس پرونده c.css رو باز کنید و کد های زیر رو در ابتدای اون قرار بدید:

/*
Theme Name: عنوان پوسته
Theme URI: صفحه پوسته (مثلا لینک به صفحه دانلود پوسته در وب سایت شما) با http:// در ابتدا
Description: یک سری توضیحات در مورد این پوسته. هر چه کوتاه تر بهتر.
Author: نام طراح این پوسته
Author URI: آدرس وب سایت طراح پوسته با http:// در ابتدا
Version: نسخه پوسته مثلا ۱٫۰
Tags: یک سری برچسب برای پوسته (در صورتی که می خواهید اون رو در وب سایت وردپرس فارسی یا خود مرجع وردپرس منتشر کنید این بخش رو حتما تکمیل کنید) مواردی مانند رنگ پوسته، تعداد ستون ها و ..
License: نوع لایسنس (مجوز) استفاده از پوسته مثلا خریدنی با قیمت ۲۵۰۰۰ تومان
License URI: آدرس صفحه توضیحات لایسنس پوسته
*/

مثلا ما کد های زیر رو در ابتدای قالب خودمون قرار میدیم:

/*
Theme Name: Islamic Persian Life
Theme URI: http://www.theme-designer.com/template62.html
Description: قالبی زیبا و سبک با موضوع زندگی ایرانی اسلامی
Author: Ali Behnamfar
Author URI: http://www.theme-designer.com/
Version: 1.0
Tags: سبز,آبی,اسلامی,ایرانی,قالب,خانه ایرانی,زیبا,قالب سبک,سه ستونه
License: Free
*/

فراموش نکنید این پرونده رو به style.css تغییر نام بدید. خوب اینم از مشخصات پوستمون. حالا نوبت به ایجاد یک پیشنمایش برای اونه.

تصویر پیشنمایش پوسته
تصویر پیشنمایش پوسته یک تصویر کوچک از قالب شماست که باید با نام و فرمت screenshot.png باشه. این فایل باید درون پوشه قالب قرار بگیره. از این تصویر برای نمایش در بخش پوسته ها استفاده میشه و یک پیشنمایش کوچیک از قالب شما خواهد بود. البته شما ملزم به تعریف یک پیشنمایش در این فایل نیستید و حتی می تونید اسم خودتون و قالب رو درون این تصویر پیشنمایش درج کنید تا در پنل کاربر نمایش داده بشه!
تصویر مورد نظر ما برای قرار دادن برای پیشنمایش این قالب تصویر زیر هستش:

البته قائدتا این تصویر باید به screenshot تغییر نام پیدا کنه و به png هم تبدیل بشه! 😀

انشالله در جلسه بعد نحوه طراحی پرونده header.php و footer.php رو توضیح خواهیم داد و با یک چند تابع فوق العاده کلیدی در طراحی قالب وردپرس آشنا خواهیم شد.