آموزش طراحی قالب اختصاصی وردپرس

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

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

شروع ساخت و طراحی قالب وردپرس

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

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

اولین پیش نیاز های طراحی قالب وردپرس دانش فنی مورد نیازش هست. باید با های HTML ، CSS ، js و php به صورت متوسط آشنا باشید. همچنین باید با cms وردپرس اشنا باشید و کار باهاش رو بلد باشید.

پیش نیاز بعدی سرور یا هاست هست که میتونید از Xampp استفاده کنید. احتمالا با این مورد هم اشنا هستید.

برای دانلود وردپرس از وبسایت رسمی وردپرس فارسی کلیک کنید.

شروع طراحی قالب و ساختار فایل ها

خب اول باید وردپرس رو دانلود کنید و نصبش کنید که احتمالا بلدید. بعد که فولدر وردپرس رو تو فولدر htdocs زمپ کپیش کردین بازش کنید. بعد برید تو فولدر wp-content و بعد themes. حالا یک فولدر اونجا درست کنید و برید توش.

من اسم فولدر اصلی وردپرس ام رو تو پوشه htdocs زمپ zardo-meshki گذاشتم. اسم فولدری که تو فولدر themes درست کردم هم همونطور.

خب حالا فولدر قالبتون رو باز کنید(همون که تو فولدر themes ساختید).

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

• اول یک فایل به اسم index با پسوند php. بسازید.
• یک فایل با اسم style و پسوند css. (دقت کنید style.css و styles ننویسید).
• یک فایل با اسم 404 و پسوند php. (این فایل صفحه 404 قالبتون میشه).
• یک سری فولدر برای css ، js و تصاویر.

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

فولدر fonts برای فونت هام هست و اجباری نیست و میتونید فونت هاتونو هرجایی بزارین. فولدر mvgt هم اصلا به وردپرس و قالبمون ربطی نداره و به نیازی نیست بسازیدش.

حالا برید تو پیشخوان وردپرستون بعد برید تو بخش نمایش و بعد پوسته(از منو سمت راست یا چپ پنل ادمین وردپرستون).

حالا دو تا احتمال وجود داره. یا قالبتون رو تو لیست قالب هاتون میبینید یا اگه اینطور نبود احتمالا پایین تر یه سری ارور نوشته. مثلا نام : فلان توضیح : سند style.css وجود ندارد.

اگه همچین ارور هایی داد فایلی که گفته رو چک کنید که اسمش یا پسوندش رو درست نوشتید یا نه. اگه نتونیستید مشکل رو حل کنید تو نظرات همینجا ارور رو بگین یا تو گوگل سرچ کنید.

خب اگه با مشکلی برخورد نکردید یا مشکلتون رو حل کردید و خطایی تو صفحه پوسته ها نبود باید صفحه پوسته های وردپرس همچین ظاهری داشته باشه.

اون قالب zardo-meshki قالب منه. هر اسمی برای پوشه قالبتون تو فولدر themes گذاشته باشید همون اسم رو نشون میده اما میتونید تغییرش بدین؛ جلوتر توضیح میدم.

شخصی سازی نحوه نمایش و انتخاب نحوه نمایش در لیست پوسته ها

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

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

/*
Theme Name: Zardo Meshki (اسم قالب)
Author: SarvTheme (ناشر یا طراح قالب)
Description: توضیحات قالب
Requires at least: 5.3 (حداقل نسخه مورد نیاز وردپرس)
Tested up to: 5.8 (اخرین نسخه وردپرس که باهاش تست کردین)
Requires PHP: 5.6 (حداقل نسخه موردنیاز پی اچ پی)
Version: 1 (نسخه قالب)
Text Domain: zardo-meshki (این مربوط به لینک قالبتون تو وبسایت وردپرس میشه و اگه قرار نباشه تو مخزن وردپرس منتشرش کنید زیاد مهم نیست)
*/

الان فایل style.css من به این شکل هست :

حالا اگه تو بخش پوسته های وردپرس با موس برید روی قالبتون بعد روی جزئیات پوسته کلیک کنید با همچین چیزی روبرو میشید(البته طبق چیزی که تو فایل style.css نوشتید):

حالا بیاد یه عکس برای قالبمون بزاریم. من قبل از اینکه بیام قالب zardo meshki رو تو وردپرس بریزم ظاهر ابتداییش رو با html ، css و js درست کردم و یه عکس از اون میگیرم و میزارم. اکثر طراح های قالب همینکار رو میکنن.

برای گرفتن عکس از افزونه Screen Capture گوگل کروم استفاده کردم.

خب بعد از اینکه یه عکس از قالبتون گرفتین اون رو میارین تو فولدر اصلی قالبتون یعنی:

فولدر زمپ => فولدر وردپرستون => فولدر wp-content => فولدر themes => فولدر قالبتون

نکتش اینکه باید دقیقا تو فولدر اصلی قالبتون کنار index.php و style.css باشه. بعد اسمش رو به screenshot تغییر بدین. توجه کنید که دقیقا باید اسمش screenshot باشه و پسوندش png یا jpg باشه.

حالا ظاهر قالبم به این شکل در اومد:

حالا فولدر اصلی قالبم به این شکله:

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

خب تا فعلا کد نویسی و کار خاصی برای قالبمون نکردیم و فقط ساختار فولدر اصلی و ظاهر اون تو بخش پوسته های وردپرس رو درست کردیم. تو مقاله های بعدی میایم و یک قالب static که فقط با html ، css و js درست شده رو به یک قالب داینامیک وردپرسی تبدیل میکنیم و کد های php و تابع های وردپرس رو بهش اضافه میکنیم.