آموزش ساخت قالب فرزند وردپرس؛ Child Theme از صفر

قالب فرزند وردپرس یا Child Theme راهی استاندارد برای نگهداری تغییرات ظاهری و کدنویسی در لایه‌ای جدا از قالب اصلی است. وقتی فایل‌های قالب والد را مستقیم ویرایش می‌کنید، به‌روزرسانی بعدی می‌تواند تغییرات شما را بازنویسی کند. قالب فرزند این مسئله را حل می‌کند: وردپرس ابتدا ساختار قالب والد را در اختیار دارد و سپس فایل‌ها و تنظیمات قالب فرزند را روی آن اعمال می‌کند.

در این آموزش، ساخت قالب فرزند را از صفر انجام می‌دهیم، تفاوت فایل‌های والد و فرزند را توضیح می‌دهیم، روش بارگذاری CSS و PHP را بررسی می‌کنیم و درباره تست، خطاهای رایج و زمان‌هایی که Child Theme انتخاب مناسبی نیست صحبت می‌کنیم.

قالب فرزند وردپرس چیست؟

قالب فرزند یک پوسته مستقل اما وابسته به قالب دیگری است. قالب اصلی «والد» نام دارد و امکانات، قالب‌بندی و فایل‌های پایه را فراهم می‌کند. قالب فرزند فقط بخش‌هایی را نگه می‌دارد که می‌خواهید تغییر دهید یا توسعه دهید.

برای نمونه، اگر قصد دارید استایل یک بخش، فایل قالب یک نوشته یا چند تابع اختصاصی را تغییر دهید، لازم نیست تمام فایل‌های قالب اصلی را کپی کنید. فقط فایل موردنیاز را در پوشه فرزند قرار می‌دهید یا کد جدید را از طریق functions.php اضافه می‌کنید.

چرا ویرایش مستقیم قالب اصلی خطرناک است؟

به‌روزرسانی قالب معمولاً فایل‌های بسته اصلی را با نسخه جدید جایگزین می‌کند. بنابراین تغییر مستقیم style.css، functions.php یا فایل‌های template ممکن است از بین برود. علاوه بر این، تشخیص اینکه کدام کد متعلق به سازنده قالب و کدام بخش سفارشی شماست دشوار می‌شود.

جداکردن تغییرات در Child Theme چند مزیت دارد:

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

چه زمانی به Child Theme نیاز داریم؟

اگر تغییر شما فقط یک گزینه در سفارشی‌ساز، تنظیم رنگ در صفحه‌ساز یا چند خط CSS در بخش «CSS اضافی» است، ساخت قالب فرزند همیشه ضروری نیست. اما برای ویرایش فایل‌های قالب، افزودن توابع دائمی وابسته به ظاهر، تغییر ساختار صفحات یا نگهداری مجموعه‌ای از استایل‌ها، Child Theme انتخاب منظم‌تری است.

اگر قابلیت جدید باید حتی پس از تعویض قالب باقی بماند—برای مثال اتصال به یک سرویس، منطق تجاری یا نوع نوشته سفارشی—بهتر است آن را در افزونه اختصاصی یا افزونه کاربردی قرار دهید، نه در قالب فرزند. معیار اصلی این است: کد مربوط به «نمایش» است یا «عملکرد مستقل سایت»؟

پیش‌نیازهای ساخت قالب فرزند

• دسترسی به فایل‌های وردپرس از طریق File Manager یا SFTP
• نام دقیق پوشه قالب والد
• ویرایشگر متن ساده با پشتیبانی UTF-8
• نسخه پشتیبان قابل بازیابی
• محیط آزمایشی برای بررسی تغییرات

بهتر است این کار ابتدا در یک محیط جدا انجام شود. راهنمای ساخت سایت آزمایشی وردپرس و Staging امن روش آماده‌کردن فضای تست را توضیح می‌دهد.

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

در مسیر wp-content/themes پوشه قالب فعال را پیدا کنید. مقدار مهم برای قالب فرزند، نام همین پوشه است؛ نه عنوان بازاری یا نامی که در پیشخوان نمایش داده می‌شود. برای مثال ممکن است عنوان قالب «قالب شرکتی نمونه» باشد اما پوشه آن sample-theme نام داشته باشد.

این نام در هدر فایل style.css قالب فرزند و مقابل فیلد Template قرار می‌گیرد. اشتباه در این مقدار باعث می‌شود وردپرس ارتباط میان والد و فرزند را تشخیص ندهد.

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

داخل wp-content/themes یک پوشه جدید ایجاد کنید. نامی کوتاه، لاتین و قابل‌تشخیص انتخاب کنید؛ برای مثال:

sample-theme-child

از فاصله، حروف فارسی و نام‌های مبهم پرهیز کنید. این پوشه در شروع فقط به دو فایل پایه نیاز دارد: style.css و functions.php.

مرحله سوم: فایل style.css را تعریف کنید

در پوشه قالب فرزند فایل style.css را بسازید و هدر زیر را متناسب با قالب خود تغییر دهید:

/*
Theme Name: Sample Theme Child
Description: Child theme for Sample Theme
Author: Site Team
Template: sample-theme
Version: 1.0.0
Text Domain: sample-theme-child
*/

مقدار Template باید دقیقاً با نام پوشه قالب والد یکسان باشد. کوچک و بزرگ بودن حروف یا خط تیره اضافی می‌تواند مشکل ایجاد کند. فیلد Theme Name فقط نام نمایشی قالب فرزند است.

مرحله چهارم: فایل functions.php را اضافه کنید

فایل functions.php قالب فرزند به‌طور خودکار در کنار فایل والد بارگذاری می‌شود. برخلاف فایل‌های template، این فایل جایگزین کامل functions.php والد نیست. بنابراین نباید کل فایل والد را کپی کنید.

اگر قالب والد استایل خود را به‌درستی enqueue نمی‌کند یا مستندات آن بارگذاری دستی را لازم می‌داند، می‌توانید ساختاری مشابه نمونه زیر داشته باشید:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'parent-theme-style',
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'child-theme-style',
        get_stylesheet_uri(),
        array( 'parent-theme-style' ),
        wp_get_theme()->get( 'Version' )
    );
} );

این کد را بدون بررسی مستندات قالب کورکورانه اضافه نکنید. بعضی قالب‌ها استایل اصلی را از فایل دیگری بارگذاری می‌کنند یا از قبل ترتیب والد و فرزند را مدیریت کرده‌اند. افزودن enqueue تکراری می‌تواند CSS را دوبار بارگذاری کند.

مرحله پنجم: قالب فرزند را فعال کنید

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

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

فایل‌های قالب چگونه بازنویسی می‌شوند؟

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

برای تغییر یک template، فایل اصلی را از والد به فرزند کپی و سپس فقط بخش لازم را ویرایش کنید. اما کپی‌کردن تعداد زیادی فایل بدون نیاز، نگهداری را دشوار می‌کند. ممکن است سازنده قالب در نسخه جدید ساختار فایل والد را اصلاح کند و نسخه قدیمی کپی‌شده در Child Theme همچنان اجرا شود.

تفاوت get_template_directory و get_stylesheet_directory

در توسعه قالب فرزند، این دو مفهوم مهم‌اند:

• get_template_directory_uri() به مسیر قالب والد اشاره می‌کند.
• get_stylesheet_directory_uri() به مسیر قالب فعال—یعنی قالب فرزند—اشاره می‌کند.

اگر یک تصویر، اسکریپت یا فایل CSS داخل پوشه فرزند است، باید از مسیر stylesheet استفاده کنید. انتخاب اشتباه باعث می‌شود وردپرس فایل را در پوشه والد جست‌وجو کند.

افزودن CSS اختصاصی به قالب فرزند

می‌توانید استایل‌های خود را بعد از هدر اطلاعات در style.css قرار دهید. برای جلوگیری از پیچیدگی، انتخابگرها را دقیق و محدود بنویسید. استفاده گسترده از !important معمولاً نشانه آن است که ترتیب بارگذاری یا specificity به‌درستی بررسی نشده است.

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

افزودن کد PHP بدون خراب‌کردن سایت

خطای نحوی در functions.php می‌تواند اجرای سایت یا پیشخوان را متوقف کند. کدها را مرحله‌ای اضافه کنید، از نام‌گذاری منحصربه‌فرد برای توابع استفاده کنید و از تعریف دوباره تابع موجود پرهیز کنید.

برای تغییر رفتارهای موجود، تا حد امکان از action و filter استفاده کنید. حذف یک تابع والد معمولاً نیازمند دانستن hook، اولویت و زمان ثبت آن است. کپی‌کردن کل منطق والد در فرزند، مسیر به‌روزرسانی را پیچیده می‌کند.

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

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

1. قبل از آپدیت، نسخه پشتیبان تهیه کنید.
2. آپدیت را ابتدا روی Staging انجام دهید.
3. فایل‌های تغییرکرده در والد را با نسخه‌های کپی‌شده مقایسه کنید.
4. ظاهر، فرم‌ها، اسکریپت‌ها و مسیرهای خرید را آزمایش کنید.
5. پس از تأیید، تغییر را در سایت اصلی اجرا کنید.

تعریف مسئولیت این بررسی‌ها در قرارداد پشتیبانی سایت وردپرس و SLA مانع ابهام میان مدیر سایت و تیم فنی می‌شود.

خطاهای رایج قالب فرزند وردپرس

قالب فرزند در پیشخوان دیده نمی‌شود

هدر style.css، محل پوشه و نام فایل را بررسی کنید. فایل باید مستقیماً داخل پوشه قالب فرزند باشد، نه در یک زیرپوشه اضافی.

پیام نبودن قالب والد نمایش داده می‌شود

مقدار Template با نام پوشه والد یکسان نیست یا قالب والد روی سایت نصب نشده است.

CSS قالب فرزند اعمال نمی‌شود

ترتیب enqueue، کش، نام handle و آدرس فایل را کنترل کنید. همچنین ممکن است استایل قالب یا صفحه‌ساز specificity بالاتری داشته باشد.

بعد از فعال‌سازی ظاهر سایت تغییر می‌کند

برخی تنظیمات قالب به شناسه پوسته وابسته‌اند. قبل از فعال‌سازی روی سایت اصلی، تنظیمات سفارشی‌ساز، ویجت‌ها، منوها و گزینه‌های اختصاصی قالب را در Staging بررسی کنید.

به‌روزرسانی والد بخشی از سایت را خراب می‌کند

فایل‌های template کپی‌شده در قالب فرزند را با نسخه جدید والد مقایسه کنید. نگهداری نسخه قدیمی فایل ممکن است با تغییر API یا ساختار HTML والد ناسازگار شده باشد.

قالب فرزند یا افزونه اختصاصی؟

تغییرات وابسته به ظاهر—مانند template، استایل، جایگاه نمایش و تنظیمات قالب—در Child Theme منطقی‌اند. قابلیت‌هایی که باید با تعویض قالب باقی بمانند بهتر است در افزونه قرار گیرند. فرم‌های تجاری، اتصال API، نقش کاربری، نوع نوشته سفارشی و منطق سفارش معمولاً نباید به پوسته گره بخورند.

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

چک‌لیست نهایی قبل از انتشار

• نام پوشه و مقدار Template دقیقاً کنترل شده است.
• قالب والد نصب و سالم است.
• استایل‌ها فقط یک‌بار بارگذاری می‌شوند.
• هیچ فایل غیرضروری از والد کپی نشده است.
• کد PHP در محیط آزمایشی تست شده است.
• نسخه موبایل و دسکتاپ بررسی شده‌اند.
• فرم‌ها و مسیرهای مهم سایت آزمایش شده‌اند.
• نسخه پشتیبان و راه بازگشت وجود دارد.
• فهرست تغییرات سفارشی مستند شده است.

جمع‌بندی

قالب فرزند وردپرس یک پوشه ساده برای انباشتن کد نیست؛ لایه‌ای قابل نگهداری میان سفارشی‌سازی شما و قالب والد است. با تعریف درست style.css، بارگذاری کنترل‌شده فایل‌ها، استفاده محدود از templateهای کپی‌شده و تست در محیط Staging می‌توانید تغییرات ظاهری را بدون دستکاری مستقیم قالب اصلی نگه دارید. برای قابلیت‌های مستقل از ظاهر نیز افزونه اختصاصی انتخاب پایدارتر خواهد بود.