آموزش گام به گام و کامل ساخت تم فرزند برای وردپرس به صورت ساده

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

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

فهرست مطالب

• درک ساختار تم پدر و فرزند
• انتخاب پوشه مناسب برای تم فرزند
• ایجاد فایل استایل سی اس اس هدر
• افزودن فایل توابع پی اچ پی
• تنظیمات enqueue برای بارگذاری استایل
• تست تم فرزند در محیط محلی
• سفارشی سازی ایمن پس از تم فرزند
• انتشار تم فرزند روی سایت زنده
• سوالات متداول

درک ساختار تم پدر و فرزند

در WordPress، تم پدر (Parent Theme) به عنوان پایه ای برای تمام قالب ها عمل می کند و شامل تمام توابع، استایل ها و قالب های اصلی است. تم فرزند (Child Theme) یک پوشهٔ جداگانه است که فقط تغییرات و سفارشی سازی های شما را در خود نگه می دارد؛ به این ترتیب می توانید بدون نگرانی از به روزرسانی تم پدر، ظاهر و عملکرد سایت را تغییر دهید. وقتی WordPress یک فایل را می خواند، ابتدا به دنبال همان فایل در پوشهٔ تم فرزند می گردد؛ اگر موجود باشد، آن را استفاده می کند، در غیر این صورت به تم پدر ارجاع می دهد.

ساختار پوشهٔ تم فرزند بسیار ساده است. در مسیر wp-content/themes یک پوشه جدید بسازید (مثلاً mytheme-child) و داخل آن حداقل دو فایل اساسی قرار دهید: style.css که هدر مخصوص تم فرزند را شامل می شود و functions.php که می تواند توابع اضافه یا تغییرات لازم را بارگذاری کند. سایر فایل ها مانند header.php یا single.php تنها در صورتی نیاز هستند که بخواهید آن ها را بازنویسی کنید؛ در غیر این صورت WordPress به طور خودکار از نسخهٔ تم پدر استفاده می کند.

به عنوان مثال، اگر می خواهید منوی بالای سایت را به صورت دلخواه تغییر دهید، کافی است فایل header.php را از پوشهٔ تم پدر کپی کرده و در پوشهٔ تم فرزند قرار دهید. سپس می توانید کد HTML یا PHP مربوط به منو را ویرایش کنید؛ WordPress به صورت خودکار این نسخهٔ جدید را به جای نسخهٔ اصلی استفاده می کند و در هر به روزرسانی بعدی تم پدر، تغییرات شما محفوظ می مانند. نکتهٔ مهم این است که پس از ایجاد یا تغییر هر فایلی، حتماً کش مرورگر یا افزونهٔ کش سایت را پاک کنید تا تغییرات بلافاصله مشاهده شود.

انتخاب پوشه مناسب برای تم فرزند

در وردپرس، یک تم فرزند به عنوان یک پوشهٔ مستقل در مسیر wp-content/themes شناخته می شود. بنابراین انتخاب نام مناسب برای این پوشه نه تنها باعث جلوگیری از تداخل با تم های دیگر می شود، بلکه فرآیند فعال سازی را ساده تر می کند. اگر نام پوشه تان با یک تم دیگر هم نام شود، وردپرس ممکن است تم صحیح را بارگذاری نکند یا به خطا بخورد.

برای اطمینان از یکتا بودن، معمولاً نام پوشهٔ تم فرزند را به شکل نام‑تم‑پدر‑child می گذارند. این الگو به وضوح رابطهٔ والد‑فرزند را نشان می دهد و از بکارگیری فاصله یا کاراکترهای غیر استاندارد جلوگیری می کند. توصیه می شود فقط از حروف انگلیسی کوچک، عدد و خط تیره (-) استفاده کنید؛ کاراکترهای فارسی، نقطه یا زیرخط (_) می توانند باعث مشکل در مسیرهای فایل شوند.

پس از انتخاب نام، پوشهٔ جدید را در wp-content/themes ایجاد کنید. ساختار پیشنهادی به صورت زیر است:

wp-content/
└─ themes/
   ├─ parent-theme/
   └─ parent-theme-child/
      ├─ style.css
      └─ functions.php
  

دقت کنید که دسترسی های فایل (permissions) برای پوشهٔ جدید حداقل 755 باشد تا وب سرور بتواند آن را بخواند. همچنین، اگر از سرویس میزبانی مشترک استفاده می کنید، پوشه را با همان صاحب مالک (owner) ایجاد کنید تا از بروز خطاهای «Permission denied» جلوگیری شود.

در جدول زیر نکات کلیدی برای نامگذاری و مکان گذاری پوشهٔ تم فرزند خلاصه شده اند:

پس از ساخت پوشه، فایل style.css را با هدر مناسب (به عنوان مثال Theme Name: MyTheme Child) تنظیم کنید و در داشبورد وردپرس، تم فرزند را فعال کنید. اگر تم در لیست ظاهر نشد، اولین کاری که باید بررسی کنید، درست نویسی نام پوشه است؛ حتی یک فاصلهٔ اضافه می تواند باعث عدم شناسایی شود.

ایجاد فایل استایل سی اس اس هدر

اولین قدم برای سفارشی سازی هدر در پوسته فرزند، ایجاد یک فایل style.css اختصاصی است. این فایل در ریشهٔ پوشهٔ کودک (مثلاً my-theme-child/) قرار می گیرد و باید با یک بلوک کامنت آغاز شود تا وردپرس آن را به عنوان پوسته شناسایی کند. بلوک ابتدایی به شکل زیر است:

/*
Theme Name: My Theme Child
Template: parent-theme-folder
Version: 1.0
*/

پس از این توضیح کوتاه، می توانید به سرعت به نوشتن قواعد CSS برای هدر بپردازید. برای جلوگیری از تداخل با استایل های پوستهٔ اصلی، همیشه از سلکتورهای دقیق تر یا پیشوندهای خاص استفاده کنید. به عنوان مثال، اگر هدر اصلی با کلاس .site-header تعریف شده، می توانید به این صورت اضافه کنید:

.site-header {
    background-color: #f8f9fa;
    padding: 20px 0;
}

در ادامه، چند نکتهٔ کلیدی برای بهبود نگهداری و عملکرد آورده شده است:

• استفاده از متغیرهای CSS: با تعریف رنگ ها یا فواصل به صورت متغیر (مانند --primary-color) می توانید تغییرات بعدی را سریع تر انجام دهید.
• تغییر ترتیب بارگذاری: برای اطمینان از اینکه استایل های کودک پس از پوستهٔ اصلی اعمال می شوند، در فایل functions.php کودک، استایل را با تابع wp_enqueue_style() ثبت کنید.
• پرهیز از !important؛ استفاده مکرر از این دستور باعث دشواری در دیباگ می شود؛ بهتر است سلیکتورها را دقیق تر کنید.

در صورتی که بخواهید هدر را در نمایشگرهای کوچک (مانند موبایل) نیز به خوبی تنظیم کنید، می توانید از مدیاکوئری های ساده بهره بگیرید. مثال زیر عرض صفحه را زیر ۷۶۸ پیکسل تشخیص می دهد و ارتفاع هدر را کاهش می دهد:

@media (max-width: 768px) {
    .site-header {
        padding: 10px 0;
        height: 60px;
    }
}

برای مرور سریع تنظیمات مهم می توانید از جدول زیر استفاده کنید؛ هر ردیف یک ویژگی کلیدی را نشان می دهد که معمولاً در سفارشی سازی هدر به کار می رود.

در نهایت، پس از ذخیرهٔ تغییرات، مرورگر خود را ریفرش کنید و با ابزارهای توسعه (DevTools) مطمئن شوید که استایل های جدید بارگذاری شده اند. اگر هنوز برخی قواعد اعمال نمی شوند، به دستورات wp_enqueue_style() در functions.php بازگردید و ترتیب وابستگی ها (dependencies) را بررسی کنید تا از بارگذاری صحیح اطمینان حاصل شود.

تنظیمات enqueue برای بارگذاری استایل

در یک Child Theme، بارگذاری استایل ها با استفاده از تابع wp_enqueue_style() انجام می شود؛ این روش از تداخل با استایل های اصلی (Parent Theme) جلوگیری می کند و به روزرسانی های آینده را بدون مشکل می گذارد. مهم است که این کدها را داخل هوک (hook) مناسب قرار دهید تا در زمان صحیح اجرا شوند؛ معمولاً از هوک wp_enqueue_scripts برای بارگذاری استایل های فرانت اند استفاده می شود.

ابتدا فایل functions.php در پوشهٔ Child Theme خود باز کنید (اگر وجود ندارد، ایجاد کنید). سپس یک تابع سفارشی بنویسید که داخل آن استایل اصلی و استایل سفارشی را ثبت و صف بندی (enqueue) کنید. توجه داشته باشید که برای جلوگیری از بارگذاری دوبارهٔ همان فایل، از شناسهٔ یکتا (handle) استفاده کنید؛ مثال زیر یک شناسه ساده مثل child-theme-style را به کار می گیرد.

function my_child_theme_enqueue_styles() {
// ثبت استایل والد (در صورت نیاز)
wp_register_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// بارگذاری استایل والد پیش از استایل فرزند
wp_enqueue_style( 'parent-style' );
// بارگذاری استایل فرزند
wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );

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

• یک تابع جدید در functions.php تعریف کنید.
• استایل های والد و فرزند را با wp_register_style() یا مستقیم با wp_enqueue_style() ثبت کنید.
• در آرگومان سوم wp_enqueue_style()، آرایه ای از شناسه های وابستگی (dependencies) را وارد کنید؛ این کار ترتیب بارگذاری را تضمین می کند.
• نسخه (version) استایل را از wp_get_theme()->get('Version') بگیرید تا وقتی فایل تغییر کرد، کش مرورگر پاک شود.
• تابع را به هوک wp_enqueue_scripts وصل کنید تا در زمان مناسب اجرا شود.

نکتهٔ کاربردی: اگر می خواهید استایل های خاصی را فقط برای صفحات مدیریت (admin) یا برای یک قالب خاص (مثلاً صفحهٔ تماس) بارگذاری کنید، می توانید از هوک های admin_enqueue_scripts یا شرط های is_page() استفاده کنید. به عنوان مثال، در صفحهٔ «تماس» فقط یک فایل CSS مخصوص فرم تماس را با wp_enqueue_style() اضافه کنید تا وزن صفحه کاهش یابد و سرعت لود بهبود پیدا کند.

تست تم فرزند در محیط محلی

برای اطمینان از اینکه تم فرزند قبل از انتشار در سایت زنده به درستی کار می کند، اولین قدم استفاده از یک محیط محلی است. ابزارهایی نظیر Local WP، XAMPP یا MAMP به سرعت یک سرور Apache/​MySQL/​PHP را روی رایانه تان می سازند و نیازی به خرید هاست ندارند. پس از نصب، یک کپی از پوشهٔ wp‑content سایت خود را در پوشهٔ «local‑site» قرار می دهید تا تمام افزونه ها و تنظیمات اصلی در دسترس باشد.

سپس تم فرزند را همانند یک افزونه به پوشهٔ wp‑content/themes منتقل می کنید. در پیشخوان وردپرس، تم فرزند را فعال کرده و به سرعت به بخش سفارشی سازی (Appearance → Customize) می روید. اینجا می توانید تغییرات CSS که در فایل style.css تعریف کرده اید را مشاهده کنید؛ اگر استایل های والد به درستی ارث بری شوند، فقط مقادیر بازنویسی شده ظاهر می شوند. همچنین توابعی که در functions.php اضافه کرده اید، می بایست بدون خطا اجرا شوند؛ یک خطای «call to undefined function» نشان می دهد که ساختار فایل نادرست است.

برای کشف مشکلات پنهان، WP_DEBUG را در فایل wp‑config.php فعال کنید: define('WP_DEBUG', true); و همچنین define('SCRIPT_DEBUG', true); برای بارگذاری نسخه های غیر فشردهٔ اسکریپت ها. پس از فعال سازی، هر هشدار یا خطای PHP به صورت واضح در صفحه یا فایل debug.log ذخیره می شود. اگر پیغام های «Deprecated» یا «Notice» مشاهده کردید، به سرعت آن ها را رفع کنید تا نسخهٔ نهایی تم فرزند با نسخهٔ PHP سرورهای میزبانی سازگار باشد.

پس از رفع خطاها، نوبت به آزمون های بصری می رسد. مرورگرهای Chrome, Firefox یا Edge را باز کنید و با ابزارهای توسعه (DevTools) به سرعت به سختی های واکنش گرا (responsive) نگاه کنید. برای هر breakpoint اصلی (mobile, tablet, desktop) بررسی کنید که طرح بندی، منوها و فرم ها همانند تم والد عمل می کنند یا تغییرات دلخواه به درستی اعمال شده اند. یک جدول خلاصهٔ سریع می تواند به عنوان «چک لیست تست» مفید باشد:

در نهایت، یک کپی از پوشهٔ تم فرزند در یک مخزن Git ایجاد کنید و قبل از هر بار بارگذاری روی سرور زنده، یک commit جدید بگیرید. این کار نه تنها امکان بازگشت سریع به نسخهٔ قبلی را می دهد، بلکه هنگام انتقال به محیط staging یا production، فقط تغییرات جدید را پوش می کند. با این رویکرد، تست محلی شما تبدیل به گام اطمینان بخشی می شود که از بروز خطاهای ناخواسته در سایت زنده جلوگیری می کند.

سفارشی سازی ایمن پس از تم فرزند

پس از فعال سازی تم فرزند، اولین گام برای حفظ امنیت و سازگاری، حذف یا غیرفعال سازی هرگونه کد سفارشی سازی مستقیم در فایل های functions.php یا قالب اصلی است. به جای این کار، تمام توابع سفارشی را داخل یک فایل جداگانه در پوشهٔ فرزند قرار دهید و با استفاده از هوک های وردپرس (مانند add_action و add_filter) به هسته اضافه کنید. این کار باعث می شود که به روزرسانی تم اصلی بدون از دست رفتن تغییرات انجام شود.

در مرحلهٔ بعد، برای افزودن استایل یا اسکریپت های سفارشی، از توابع wp_enqueue_style و wp_enqueue_script استفاده کنید. به جای ویرایش مستقیم فایل های CSS یا JS تم، یک فایل style.css و script.js در پوشهٔ فرزند بسازید و در functions.php آن ها را به صورت زیر بارگذاری کنید:

function child_theme_assets() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_script( 'child-script', get_stylesheet_directory_uri() . '/script.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'child_theme_assets' );

اگر نیاز به تغییر ساختار قالب دارید، بهترین روش استفاده از قالب پذیری (template hierarchy) است. به جای تغییر مستقیم فایل header.php یا page.php تم اصلی، یک نسخهٔ کپی شده از این فایل ها را در پوشهٔ فرزند قرار دهید و فقط قسمت های مورد نیاز را ویرایش کنید. به این ترتیب، وردپرس ابتدا به دنبال فایل های موجود در تم فرزند می گردد و اگر موجود نباشد، به فایل اصلی مراجعه می کند، که این روش خطر بروز تداخل های ناخواسته را به حداقل می رساند.

یک مثال عملی: اگر می خواهید در تمام صفحات وب سایت یک بنر تبلیغاتی سفارشی نمایش دهید، به جای افزودن کد HTML مستقیم در header.php، یک تابع به صورت زیر در functions.php تم فرزند بنویسید و به هوک wp_body_open وصل کنید. این روش نه تنها کد را منظم نگه می دارد، بلکه هنگام به روزرسانی تم اصلی، بنر همچنان فعال می ماند.

انتشار تم فرزند روی سایت زنده

پس از اینکه تم فرزند را به صورت محلی ساختید، زمان آن رسیده که آن را روی سایت زنده (production) بارگذاری کنید. این کار نه تنها به روز رسانی های آینده را ایمن می کند، بلکه به صورت مستقیم می توانید تغییرات سفارشی تان را در محیط واقعی بررسی کنید. مهم ترین نکته این است که قبل از انتشار، یک نسخهٔ پشتیبان از تم اصلی و دیتابیس بگیرید تا در صورت بروز مشکل، به سرعت بتوانید به وضعیت قبلی بازگردید.

بارگذاری فایل های تم فرزند می تواند از طریق FTP/SFTP یا File Manager در کنترل پنل میزبانی انجام شود. مسیر دقیق پوشهٔ تم در سرور معمولاً wp‑content/themes/your‑child‑theme است؛ اطمینان حاصل کنید که تمام فایل های style.css و functions.php به درستی کپی شده اند. اگر پوشه ای با همین نام پیش تر وجود دارد، بهتر است آن را حذف یا نام گذاری جدیدی بدهید تا از تداخل نسخه های قبلی جلوگیری شود.

پس از انتقال، وارد پیشخوان وردپرس شوید و به بخش Appearance → Themes بروید. تم فرزند باید در لیست نمایش داده شود؛ روی Activate کلیک کنید. اگر تم فعال شد اما ظاهر سایت به درستی نمایش داده نشد، ابتدا کش مرورگر و کش افزونه های کش (مانند WP Super Cache یا LiteSpeed Cache) را پاک کنید. برای شناسایی خطاهای احتمالی می توانید WP_DEBUG را در wp-config.php فعال کنید؛ پیام های خطا به سرعت به شما نشان می دهند که کدام کد مشکل دارد.

یک نکتهٔ عملی برای جلوگیری از «شکست ناگهانی» سایت این است که ابتدا تم فرزند را روی یک محیط استیجینگ (staging) نصب کنید. بسیاری از سرویس های میزبانی، امکان ایجاد زیر دامنه یا زیرپوشه برای تست فراهم می کنند؛ این کار به شما اجازه می دهد تا تمام استایل ها و توابع سفارشی را بدون تاثیر بر کاربران نهایی ارزیابی کنید.

سوالات متداول

چگونه یک پوشه ی child theme جدید بسازم؟

برای ساخت پوشه جدید در مسیر wp-content/themes یک پوشه با نام دلخواه بسازید مثلا mytheme-child. سپس دو فایل style.css و functions.php داخل آن ایجاد کنید. این دو فایل کافی است تا وردپرس child theme را شناسایی کند.

آیا می توانم فقط style.css را در child theme داشته باشم؟

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

چطور functions.php را بدون تداخل با قالب اصلی اضافه کنم؟

یک فایل functions.php خالی در پوشه child ایجاد کنید و در آن از تابع add_action با هوک wp_enqueue_scripts استفاده کنید. با wp_enqueue_style می توانید استایل های والد را بارگذاری و سپس استایل های خود را اضافه کنید. این روش از تداخل توابع جلوگیری می کند.

آیا نیاز به به روزرسانی child theme هنگام بروز رسانی والد است؟

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

چک لیست سریع

• ساختار تم پدر و فرزند را به دقت بررسی کنید.
• نام پوشه تم فرزند را به صورت منسجم و منطبق با استاندارد انتخاب کنید.
• فایل style.css را با هدر صحیح ایجاد کنید.
• فایل functions.php را اضافه کرده و از wp_enqueue_style استفاده کنید.
• تنظیمات enqueue را برای بارگذاری استایل های مورد نیاز پیکربندی کنید.
• تم فرزند را در محیط محلی تست کنید تا از عملکرد صحیح اطمینان حاصل شود.
• پس از تأیید، تم فرزند را به صورت امن بر روی سایت زنده منتشر کنید.

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