طرح فیگما چطور به قالب وردپرس تبدیل می‌شود؛ از HTML و تقسیم‌بندی بخش‌ها تا اتصال به پنل، فیلدهای سفارشی و تحویل قالبی که خودت بتوانی مدیریتش کنی.
طرح سایتت در فیگما آماده است و می‌خواهی بعد از تحویل، متن‌ها و عکس‌ها و مقاله‌ها را خودت از پنل عوض کنی. اینجاست که طرح باید به قالب وردپرس تبدیل شود. این مقاله توضیح می‌دهد این تبدیل دقیقاً چه مراحلی دارد، چه چیزهایی را باید از قبل تصمیم بگیری و قالب خوب در نهایت چه شکلی است.
اول: HTML، بعد وردپرس
تبدیل فیگما به وردپرس در عمل دو مرحله است. اول طرح به HTML و CSS تبدیل می‌شود؛ دقیقاً مثل تبدیل فیگما به HTML. وقتی همه‌ی صفحه‌ها در مرورگر پیکسل‌به‌پیکسل مثل طرح شدند، تازه نوبت وردپرس می‌رسد.
این ترتیب مهم است. اگر از اول داخل وردپرس شروع کنی، هم دیباگ ظاهر سخت‌تر می‌شود و هم کد قالب با منطق وردپرس قاطی می‌شود. HTML تمیز، پایه‌ی یک قالب سبک است.
مرحله‌ی ۱: تقسیم طرح به بخش‌های قابل‌مدیریت
قبل از نوشتن حتی یک خط PHP، طرح را نگاه می‌کنم و مشخص می‌کنم هر بخش از کجا محتوا می‌گیرد:
- ثابت‌ها: هدر، فوتر، لوگو، شبکه‌های اجتماعی. این‌ها یک بار در تنظیمات قالب تعریف می‌شوند.
- منوها: منوی اصلی و منوی فوتر به سیستم منوی خود وردپرس وصل می‌شوند تا از بخش «نمایش ← فهرست‌ها» قابل ویرایش باشند.
- محتوای صفحه: تیتر هیرو، متن معرفی، دکمه‌ها. این‌ها فیلدهای سفارشی آن صفحه می‌شوند.
- محتوای تکرارشونده: مقاله، نمونه‌کار، محصول، نظر مشتری. هر کدام یک «نوع نوشته» جدا یا یک فیلد تکرارشونده.
این نقشه همان چیزی است که تعیین می‌کند بعد از تحویل چقدر راحت سایت را مدیریت می‌کنی.
مرحله‌ی ۲: ساختار فایل‌های قالب
یک قالب اختصاصی تمیز معمولاً این فایل‌ها را دارد:
header.phpوfooter.phpبرای بخش‌های مشترکfront-page.phpبرای صفحه‌ی اصلیpage.phpوsingle.phpبرای برگه‌ها و نوشته‌هاarchive.phpبرای لیست مقاله‌ها یا نمونه‌کارهاfunctions.phpبرای ثبت منوها، اندازه‌ی تصاویر، بارگذاری CSS و JS- پوشه‌ی
template-partsبرای بخش‌هایی که در چند صفحه تکرار می‌شوند، مثل کارت مقاله
هر چه این ساختار مرتب‌تر باشد، توسعه‌ی بعدی سایت ارزان‌تر است؛ چه خودت ادامه بدهی چه برنامه‌نویس دیگری.
مرحله‌ی ۳: فیلدهای سفارشی به‌جای ویرایشگر شلوغ
بزرگ‌ترین تفاوت قالب اختصاصی با قالب آماده، همین‌جاست. به‌جای اینکه کل صفحه را در یک ویرایشگر بصری بچینی و هر بار نگران به‌هم‌ریختن چیدمان باشی، فرم‌های ساده می‌بینی: «تیتر هیرو»، «متن دکمه»، «تصویر شاخص». طراحی دست‌نخورده می‌ماند و فقط محتوا عوض می‌شود.
برای این کار معمولاً از افزونه‌ی ACF یا فیلدهای بومی وردپرس استفاده می‌شود. نتیجه پنلی است که هر کسی بدون آموزش با آن کار می‌کند.
مرحله‌ی ۴: ریسپانسیو، سرعت و سئو
قالبی که از HTML تمیز ساخته شده، از قبل ریسپانسیو و سبک است. در وردپرس چند کار دیگر هم لازم است:
- تعریف اندازه‌های مختلف تصویر تا وردپرس برای موبایل عکس کوچک‌تر بفرستد
- بارگذاری CSS و JS فقط در صفحه‌هایی که لازم‌اند
- ساختار درست تیترها و اسکیمای پایه برای سئو
- سازگاری با افزونه‌ی سئو مثل Yoast یا Rank Math
مقایسه‌ی سرعت و انعطاف این روش با صفحه‌سازها را در قالب اختصاصی یا المنتور مفصل نوشته‌ام.
مرحله‌ی ۵: تحویل و آموزش
قالب خوب با یک نسخه‌ی پیش‌نمایش زنده تحویل می‌شود تا قبل از نصب نهایی، همه چیز را روی گوشی و کامپیوتر خودت ببینی. بعد از تأیید:
- قالب روی هاستت نصب می‌شود یا فایل zip آن تحویل داده می‌شود
- محتوای نمونه وارد می‌شود تا سایت خالی نباشد
- یک راهنمای کوتاه می‌گیری که هر بخش را از کجا ویرایش کنی
قبل از سفارش این‌ها را مشخص کن
- چه بخش‌هایی را خودت عوض می‌کنی؟ هر چه دقیق‌تر بگویی، پنل ساده‌تر می‌شود.
- فروشگاه داری؟ اگر بله، قالب باید با ووکامرس سازگار ساخته شود.
- چندزبانه است؟ از اول باید برایش برنامه ریخت. راهنمای راست‌چین کردن قالب نکته‌های فنی‌اش را دارد.
- فایل فیگما مرتب است؟ چک‌لیست آماده‌سازی فایل فیگما زمان و هزینه را کم می‌کند.
جمع‌بندی
تبدیل فیگما به وردپرس یعنی اول کد دقیق و سبک، بعد اتصال هوشمندانه‌ی هر بخش به پنل. نتیجه سایتی است که دقیقاً مثل طرح است و مدیریتش ساده. اگر طرحت آماده است، از صفحه‌ی خدمات تبدیل فیگما به وردپرس جزئیات را ببین یا در ماشین‌حساب تعرفه قیمت دقیقش را حساب کن.