خب، حالا می‌خوایم دست به کار بشیم و اولین قالب اختصاصی خودمون رو برای وردپرس از صفر بسازیم! اگه قبلاً با وردپرس کار کرده باشی، حتماً می‌دونی که کلی قالب آماده توی مخزن وردپرس و جاهای دیگه هست، اما هیچی لذتش به اندازه‌ی ساخت یه قالب اختصاصی که هر جزئی ازش رو خودت طراحی کردی، نمی‌تونه باشه! بیا شروع کنیم.
۱. آشنایی با مسیرها و محیط
اول از همه، باید به داشبورد وردپرس خودمون بریم. برای این کار، یه “/wp-admin” به انتهای آدرس سایتت اضافه کن و وارد محیط توسعه محلی (Local Dev Environment) بشو. توی این محیط می‌تونیم آزادانه کار کنیم و تغییراتمون رو ببینیم.
۲. ساخت پوشه قالب
خب، حالا نوبت اینه که پوشه‌ی قالب خودمون رو درست کنیم. برای این کار، وارد پوشه‌ی اصلی قالب وردپرس بشیم (همون wp-content و بعد themes). اینجا باید یه پوشه جدید بسازیم و اسمش رو بذاریم مثلاً “trn-university-theme”.
محل نصب وردپرس
-- wp-content
---- themes
------ trn-university-themeچرا این کارو می‌کنیم؟ چون وردپرس برای هر قالب، پوشه‌ای جداگانه می‌خواد و این اولین قدمه برای اینکه قالب جدیدمون توی وردپرس به نمایش دربیاد. می‌دونی، احساسش مثل شروع یه پروژه بزرگه!
۳. ساخت فایل‌های اصلی قالب
الان که پوشه‌مون رو ساختیم، باید دو تا فایل مهم توش درست کنیم. فایل اول index.php هست که نقش قلب قالب رو داره و فایل دوم style.css که ظاهر سایت رو تنظیم می‌کنه.
- توی
index.phpیه متن ساده اضافه می‌کنیم، مثلاً بنویسیم «این قالب سفارشی فوق‌العاده ماست» و فایل رو ذخیره می‌کنیم. - حالا به
style.cssمی‌رسیم که باید اولش یه سری اطلاعات توی کامنت بنویسیم. اینجا باید نام قالب، نویسنده و ورژن رو وارد کنیم:
/*
Theme Name: Tarahestan University
Author: [Your Name]
Version: 1.0
*/
این فایل style.css برای وردپرس خیلی مهمه، چون با استفاده ازش قالب جدید رو تشخیص می‌ده.
۴. اضافه کردن تصویر پیش‌نمایش
حالا می‌تونیم یه قدم جذاب دیگه برداریم و یه تصویر برای پیش‌نمایش قالب درست کنیم. این تصویر رو با اسم screenshot.png و با اندازه ۱۲۰۰ پیکسل عرض و ۹۰۰ پیکسل ارتفاع توی پوشه قالب می‌ذاریم. با این کار، وقتی توی وردپرس بخش قالب‌ها رو باز می‌کنیم، تصویر سفارشی قالبمون رو هم می‌بینیم.
۵. فعال‌سازی قالب
وقتشه که برگردیم به داشبورد وردپرس و ببینیم چی ساختیم! بعد از تازه‌سازی صفحه، قالب جدیدمون با اسم و اطلاعاتی که وارد کردیم، توی بخش قالب‌ها نمایش داده می‌شه. برای فعال‌سازی، کافیه روش کلیک کنیم و بعد دکمه «فعال‌سازی» رو بزنیم.
حسش چیه؟ یه قالب دست‌ساز و شخصی‌سازی‌شده رو فعال می‌کنیم و سایت خودمون رو باهاش می‌سازیم! الان می‌تونیم به صفحه اصلی سایت بریم و نتیجه رو ببینیم.
۶. حل مشکل بارگذاری CSS
ممکنه ببینی که استایل‌هایی که توی style.css وارد کردی، به درستی بارگذاری نمی‌شن. دلیلش اینه که هنوز بارگذاری CSS به درستی انجام نشده. اما نگران نباش! اینو توی درس بعدی یاد می‌گیریم که چطور به صورت اصولی فایل‌های CSS رو بارگذاری کنیم.
پس این اولین گام ما برای ورود به دنیای قالب‌سازی بود. در درس بعدی با PHP و توابع وردپرس آشنا می‌شیم تا قالبمون حرفه‌ای‌تر و پویاتر بشه.
