چگونه قالب آماده را سفارشی کنیم؟

هر بار که پروژه‌ای با قالب آماده (ready template) شروع می‌کنم، یک سؤال تکراری از کارفرما می‌شنوم: چرا نمی‌توانیم فایل قالب را باز کنیم و مستقیم تغییر بدهیم؟ و هر بار همان جواب را می‌دهم: می‌توانیم، ولی در اولین آپدیت قالب، همان تغییرات با خاک یکسان می‌شود. تجربه‌ام نشان می‌دهد که تفاوت بین یک فریلنسر تازه‌کار و یک توسعه‌دهنده باتجربه، در جنس سفارشی‌سازی قالب آماده است، نه در سرعت آن. در این نوشته همان رویکردی را می‌گویم که در پروژه‌های واقعی برای سفارشی‌سازی قالب آماده اجرا می‌کنم.

قالب آماده چه چیزی به شما می‌دهد و چه چیزی نمی‌دهد؟

قالب آماده، یعنی قالبی که با یک ساختار از پیش آماده، برای شروع سریع پروژه طراحی شده است. آنچه به شما می‌دهد: چیدمان پایه، استایل‌شیت سازمان‌یافته، و یک منطق مشخص برای نمایش محتوا. آنچه نمی‌دهد: هویت بصری برند شما. تفاوت تفصیلی این دو رویکرد در قالب آماده در مقابل قالب اختصاصی آمده است. اگر با مفهوم کلی قالب در وردپرس آشنایی ندارید، پیش از ادامه قالب وردپرس چیست را بخوانید. سفارشی‌سازی، در واقع پر کردن همان فاصله هویت است، بدون تخریب پایه.

قالب آماده، پایه ساخت است، نه بوم نقاشی؛ هر تغییری که روی آن می‌دهید، باید به‌گونه‌ای باشد که پایه دست‌نخورده بماند.

چایلد‌تم، ستون اول سفارشی‌سازی

اولین کار، ساخت چایلد‌تم (child theme) است، حتی اگر فقط دو خط CSS بخواهید تغییر دهید. چایلد‌تم یک قالب کوچک است که روی قالب والد سوار می‌شود و تغییرات شما را در لایه‌ای جدا نگه می‌دارد. مکانیزم دقیق این ساختار در قالب چایلد وردپرس چیست آمده است. حداقل ساختار چایلد‌تم:

wp-content/themes/my-child/
├── style.css       /* child theme header */
├── functions.php   /* enqueue و کد سفارشی */
└── screenshot.png  /* اختیاری */

/* style.css */
/*
Theme Name: My Site Child
Template: parent-theme-folder
Version: 1.0
*/

در فایل functions.php، استایل والد را با wp_enqueue_style بارگذاری کنید و استایل سفارشی چایلد را بعد از آن قرار دهید تا اولویت داشته باشد:

function my_child_enqueue() {
  wp_enqueue_style(
    'parent-style',
    get_template_directory_uri() . '/style.css'
  );
  wp_enqueue_style(
    'child-style',
    get_stylesheet_uri(),
    array('parent-style'),
    wp_get_theme()->get('Version')
  );
}
add_action('wp_enqueue_scripts', 'my_child_enqueue');

نکته‌ای که فراموش می‌شود: از @import در style.css استفاده نکنید، چون صف CSS را خراب می‌کند و زمان بارگذاری را افزایش می‌دهد. الگوی صحیح همان enqueue است.

تنظیمات Customizer و theme.json

پیش از هر تغییر کد، ببینید چه چیزهایی از مسیر Customizer یا theme.json قابل تنظیم است. قالب‌های مدرن وردپرسی که از استاندارد بلاک (block theme) پیروی می‌کنند، پالت رنگ، تایپوگرافی و چیدمان را از همان مسیر می‌پذیرند، بدون نیاز به کد. سه تنظیم که در اکثر قالب‌های آماده از Customizer قابل تغییرند:

• رنگ‌های اصلی و ثانویه سایت.
• فونت‌ها و اندازه‌های تیتر و متن.
• لوگو، آیکون سایت و اطلاعات فوتر.

اگر تنظیمات Customizer کافی نبود، سراغ theme.json بروید و پالت رنگ یا تایپوگرافی را از همان مسیر تعریف کنید. برای بررسی اینکه قالب شما از theme.json پشتیبانی می‌کند یا نه، فایل را در پوشه قالب والد جستجو کنید.

سفارشی‌سازی با هوک‌ها و فیلترها

مرحله بعد، سفارشی‌سازی از طریق هوک‌ها (hooks) است. مفهوم هوک در هوک‌های وردپرس چیست آمده؛ اما کاربرد عملی در سفارشی‌سازی قالب آماده دو حالت رایج دارد. اول، تغییر رفتار یک تابع موجود قالب بدون دست‌زدن به فایل آن:

function my_custom_excerpt_length($length) {
  return 25;
}
add_filter('excerpt_length', 'my_custom_excerpt_length');

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

function my_custom_footer_notice() {
  echo '<p class="footer-notice">...</p>';
}
add_action('parent_theme_after_footer', 'my_custom_footer_notice');

کلید موفقیت این است که سازنده قالب آماده، هوک‌هایش را مستند کرده باشد. اگر چنین نبود، از فایل‌های قالب، نقاط اتصال را پیدا کنید یا مستندات آنلاین قالب را جستجو کنید. در میان قالب‌های آماده بازار، آن‌هایی که هوک‌های قابل استفاده دارند، برای سفارشی‌سازی حرفه‌ای به‌مراتب مناسب‌تر هستند.

CSS سفارشی به‌روش امن

برای تغییرات CSS، سه قاعده ساده:

1. تمام CSS سفارشی در فایل مستقل assets/css/custom.css داخل چایلد‌تم قرار بگیرد و در صف بارگذاری شود.
2. از !important پرهیز کنید مگر در موارد خاص که انگیزه روشنی دارد؛ چون نگهداری آن بعد از آپدیت‌ها دردناک است.
3. به‌جای هدف‌گیری مستقیم بر اساس ساختار HTML قالب، از CSS Custom Properties استفاده کنید:

:root {
  --brand-primary: #1e88e5;
  --brand-text: #1a1a1a;
}

.site-header {
  background: var(--brand-primary);
  color: var(--brand-text);
}

این رویکرد، تغییرات شما را از جزئیات داخلی قالب جدا می‌کند و در نسخه‌های بعدی، کمتر می‌شکنند.

افزودن قابلیت با افزونه به‌جای قالب

یکی از پرتکرارترین اشتباهات در سفارشی‌سازی قالب آماده، ریختن قابلیت‌های منطقی داخل functions.php چایلد‌تم است. تجربه من این است که هر قابلیت منطقی باید در افزونه یا اسنیپت جدا زندگی کند، نه در لایه ظاهر. مثال‌ها:

• ثبت نوع نوشته سفارشی (custom post type) و طبقه‌بندی سفارشی.
• منطق فرم‌های سفارشی و پردازش ارسال.
• ریدایرکت‌های شرطی و منطق SEO.

در مقابل، چیزهایی که در چایلد‌تم جا دارند: تغییر ترتیب نمایش عناصر قالب، بازنویسی یک فایل قالب (template) برای تغییر چیدمان، و CSS سفارشی. اگر می‌خواهید میان این دو گروه تمایز روشنی قائل شوید، افزونه وردپرس چیست را بخوانید؛ آنجا تفکیک نقش افزونه و قالب روشن شده است.

هرگاه تردید داشتید که یک قابلیت را در قالب بگذارید یا افزونه، به این سؤال جواب دهید: اگر قالب فردا عوض شود، این قابلیت باید بماند؟ اگر بله، افزونه.

تبدیل طراحی فیگما به تغییرات قالب

اگر طراح فیگما دارید، پروژه سفارشی‌سازی از جنس تبدیل است: از یک طراحی بصری به تغییرات کد. سه اصل تجربی:

• ابتدا پالت رنگ و تایپوگرافی طراحی را در theme.json یا Customizer قالب پیاده کنید؛ سپس سراغ چیدمان‌ها بروید.
• هر بلوک از طراحی را با بلوک گوتنبرگ موجود در قالب پیاده کنید، نه با CSS دست‌ساز. مفهوم گوتنبرگ و آینده آن در گوتنبرگ و آینده ویرایش محتوا آمده است.
• تنها بخش‌هایی که با بلوک‌های موجود قابل پیاده‌سازی نیستند، به CSS سفارشی نیاز پیدا می‌کنند.

تست سفارشی‌سازی قبل از انتشار

قبل از اینکه چایلد‌تم را روی سایت زنده فعال کنید، این پنج مورد را در استجینگ یا لوکال تست کنید:

1. فعال‌سازی چایلد‌تم و بررسی ظاهر در دسکتاپ و موبایل.
2. به‌روزرسانی قالب والد به نسخه جدید و اطمینان از پایداری تغییرات.
3. بررسی ویرایشگر گوتنبرگ و نمایش صحیح بلوک‌ها.
4. بررسی فرم‌ها و بخش‌های تعاملی.
5. سنجش سرعت قبل و بعد؛ اگر زمان بارگذاری جهش داشته، تغییرات CSS را سبک‌تر کنید.

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

جدول مرجع

پرسش‌های کوتاه

آیا می‌توانم بدون چایلد‌تم قالب آماده را سفارشی کنم؟ فقط اگر تغییرات کاملاً موقت و در محیط محلی باشد. برای پروژه واقعی، چایلد‌تم حداقلِ حفاظت است. حتی دو خط CSS هم باید در چایلد‌تم زندگی کند.

اگر قالب آماده اصلاً هوک رسمی برای سفارشی‌سازی نداشت چه کنم؟ دو راه: یا با override فایل‌های قالب در چایلد‌تم جلو بروید، یا در انتخاب قالب بازنگری کنید. در بلندمدت، قالب بدون هوک، هزینه نگهداری را چند برابر می‌کند. راهنمای انتخاب قالب در چگونه یک قالب آماده مناسب انتخاب کنیم آمده است.

چقدر سفارشی‌سازی، قالب آماده را از حالت "آماده" خارج می‌کند؟ قاعده من: اگر بیش از ۴۰ درصد از CSS یا بیش از سه فایل قالب را بازنویسی کنید، بهتر است از ابتدا سراغ قالب سبک‌تر یا اختصاصی بروید. راهنمای قالب سبک در قالب سبک وردپرس چیست آمده است.

حرف آخر

سفارشی‌سازی قالب آماده، یک مهارت است؛ نه به این معنی که کد پیچیده بنویسید، بلکه به این معنی که بدانید کجا دست بزنید و کجا دست نزنید. تجربه من می‌گوید بیشترین ارزش در همان لایه چایلد‌تم و هوک‌های رسمی ساخته می‌شود و کم‌ترین ارزش در تغییرات مستقیم فایل والد. اگر امروز فقط یک کار بکنید، برای پروژه‌تان یک چایلد‌تم بسازید، حتی اگر هنوز نیاز مشخصی به آن ندارید؛ فردا روزی که نیاز پیدا کردید، همین لایه نجاتتان می‌دهد. اگر در سفارشی‌سازی قالبی به نکته‌ای برخوردید که در منابع عمومی کمتر دیده‌اید (مثلاً یک هوک خاص یا رفتار پیش‌بینی‌نشده‌ای از قالب)، در دیدگاه‌ها بنویسید؛ همان تجربه برای نفر بعدی ارزشمند است. 🎨