چطور یک قالب کودک (Child Theme) بسازیم

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

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

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

ساخت قالب کودک وردپرس

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

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

فهرست مطالب

• • قالب کودک چیست و چه کاربردی دارد؟
  • قبل از ساخت قالب کودک چه چیزهایی لازم است؟
  • آموزش ساخت قالب کودک به روش دستی
  • ایجاد فایل style.css
  • ایجاد فایل functions.php
  • فعال‌سازی و تست قالب کودک
  • شخصی‌سازی فایل‌ها و استایل‌ها
  • مزایا و معایب قالب کودک
  • خطاهای رایج و روش رفع آن‌ها
  • سؤالات متداول

قالب کودک چیست و چه کاربردی دارد؟

تعریف قالب والد و قالب کودک

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

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

چه زمانی به قالب کودک نیاز داریم؟

هر زمان قصد دارید فایل‌های قالب را تغییر دهید، استفاده از قالب کودک تصمیم منطقی‌تری است. این تغییرات می‌توانند شامل موارد زیر باشند:

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

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

قبل از ساخت قالب کودک چه چیزهایی لازم است؟

دسترسی‌های موردنیاز

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

• • دسترسی به فایل‌های سایت از طریق کنترل‌پنل هاست
  • دسترسی FTP یا SFTP
  • دسترسی SSH در سرورهای حرفه‌ای
  • افزونه مدیریت فایل، در شرایط اضطراری

روش پیشنهادی، استفاده از File Manager هاست یا اتصال SFTP است. ویرایش فایل‌ها از داخل پیشخوان وردپرس اگرچه سریع به نظر می‌رسد، اما در صورت واردکردن کد اشتباه می‌تواند باعث خطای داخلی سایت شود.

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

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

نام پوشه قالب والد در فایل style.css و هنگام بارگذاری استایل‌ها استفاده می‌شود. حتی یک فاصله یا حرف اضافه می‌تواند باعث شود قالب کودک به قالب اصلی متصل نشود.

تهیه نسخه پشتیبان

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

آموزش ساخت قالب کودک به روش دستی

ایجاد پوشه قالب کودک

به مسیر زیر بروید:

wp-content/themes

در این مسیر یک پوشه جدید بسازید. بهتر است نام پوشه شامل نام قالب والد و عبارت -child باشد. برای مثال، اگر نام پوشه قالب والد astra است، نام پوشه جدید می‌تواند این باشد:

astra-child

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

ساختار پایه پوشه

در شروع، قالب کودک فقط به دو فایل نیاز دارد:

astra-child/

├── style.css

└── functions.php

بعداً می‌توانید پوشه‌هایی مانند assets برای فایل‌های CSS و JavaScript یا فایل‌های الگوی مختلف را به این ساختار اضافه کنید.

ایجاد فایل style.css

هدر استاندارد قالب کودک

داخل پوشه قالب کودک، فایلی با نام دقیق style.css بسازید و اطلاعات زیر را در آن قرار دهید:

/*

Theme Name: Astra Child

Theme URI: https://example.com/

Description: Child theme for Astra

Author: Your Name

Author URI: https://example.com/

Template: astra

Version: 1.0.0

Text Domain: astra-child

*/

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

اضافه‌کردن استایل سفارشی

پس از هدر، CSS موردنظر خود را اضافه کنید. برای مثال:

body {

background-color: #f7f8fa;

}

.site-title a {

color: #1d4ed8;

}

.entry-title {

line-height: 1.6;

}

در پروژه واقعی بهتر است استایل‌ها را با انتخابگرهای دقیق بنویسید. استفاده افراطی از !important شاید مشکل را موقتاً پنهان کند، اما در ادامه مدیریت CSS را دشوار می‌سازد. ابتدا ترتیب بارگذاری، اختصاصی‌بودن انتخابگر و کش مرورگر را بررسی کنید.

ایجاد فایل functions.php

بارگذاری صحیح استایل‌ها

فایل functions.php را در پوشه قالب کودک ایجاد کنید. برخلاف تصور رایج، نباید محتوای کامل فایل functions.php قالب والد را در آن کپی کنید. هر قالب فایل توابع خود را دارد و کپی‌کردن آن می‌تواند باعث تعریف تکراری توابع یا خطای جدی شود.

برای بارگذاری استایل قالب والد و کودک، کد زیر را قرار دهید:

<?php

function my_child_theme_enqueue_styles() {

wp_enqueue_style(

‘parent-style’,

get_template_directory_uri() . ‘/style.css’

);

wp_enqueue_style(

‘child-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’);

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

در قالب‌های جدید چه نکته‌ای مهم است؟

برخی قالب‌ها، مخصوصاً قالب‌های مدرن یا قالب‌های مبتنی بر ویرایش کامل سایت، روش متفاوتی برای مدیریت استایل دارند. ممکن است قالب والد خودش استایل‌ها را با وابستگی‌های خاص یا فایل‌های ماژولار بارگذاری کند. بنابراین اگر بعد از فعال‌سازی، استایل‌ها به‌درستی اعمال نشدند، مستندات همان قالب را بررسی کنید.

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

فعال‌سازی و تست قالب کودک

فعال‌کردن از پیشخوان

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

فعال‌کردن قالب کودک معمولاً تنظیمات قالب والد را حذف نمی‌کند، اما پیش از این کار از تنظیمات سفارشی، ابزارک‌ها و فهرست‌های سایت پشتیبان بگیرید.

چک‌لیست تست

بعد از فعال‌سازی، این بخش‌ها را بررسی کنید:

• • صفحه اصلی و صفحات داخلی
  • نمایش سایت در موبایل و تبلت
  • منوی اصلی و منوی موبایل
  • فرم‌های تماس و ورود کاربران
  • صفحات فروشگاه و سبد خرید ووکامرس
  • نمایش نوشته‌ها، تصاویر و دسته‌بندی‌ها
  • کنسول مرورگر برای خطاهای JavaScript

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

شخصی‌سازی فایل‌ها در قالب کودک

جایگزین‌کردن فایل‌های قالب

برای تغییر یک فایل الگو، همان مسیر و نام فایل را در قالب کودک ایجاد کنید. مثلاً اگر می‌خواهید فایل single.php را تغییر دهید، آن را از قالب والد کپی کرده و داخل قالب کودک قرار دهید:

astra-child/

├── style.css

├── functions.php

└── single.php

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

تغییر فایل‌های ووکامرس

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

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

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

function add_custom_message_before_content() {

echo ‘<p class=”custom-message”>به این مقاله خوش آمدید.</p>’;

}

add_action(‘the_content’, ‘add_custom_message_before_content’);

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

مزایا و معایب قالب کودک

مزایای اصلی

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

معایب و محدودیت‌ها

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

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

خطاهای رایج در ساخت قالب کودک

نمایش‌ندادن قالب کودک

رایج‌ترین دلیل، وجود خطا در هدر فایل style.css است. نام فایل، محل آن و مقدار Template را بررسی کنید. همچنین مطمئن شوید فایل با فرمت UTF-8 ذخیره شده و قبل از خط اول آن، کاراکتر اضافی وجود ندارد.

کارنکردن CSS

اگر تغییرات CSS دیده نمی‌شود، کش را پاک کنید و با ابزار Inspect مرورگر ببینید قانون شما به عنصر موردنظر می‌رسد یا خیر. گاهی قالب والد انتخابگر قوی‌تری دارد یا فایل CSS کودک اصلاً بارگذاری نشده است.

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

خطای صفحه سفید یا ۵۰۰

این خطا معمولاً از یک خطای PHP در functions.php ناشی می‌شود. نشانه‌هایی مانند فراموش‌کردن نقطه‌ویرگول، بستن نادرست پرانتز یا تعریف تکراری تابع را بررسی کنید. اگر به پیشخوان دسترسی ندارید، از File Manager نام پوشه قالب کودک را موقتاً تغییر دهید تا وردپرس به قالب دیگری بازگردد.

کندشدن سایت بعد از تغییرات

قالب کودک ذاتاً باعث کندی سایت نمی‌شود. مشکل معمولاً از فایل‌های CSS بزرگ، اسکریپت‌های اضافه، درخواست‌های متعدد یا کدنویسی غیربهینه است. در یک پروژه واقعی، حذف سه فایل CSS تکراری و ادغام استایل‌های اختصاصی، زمان بارگذاری بخش دیداری صفحه را بهتر کرد؛ بدون اینکه ظاهر سایت تغییر کند.

نکات حرفه‌ای برای نگهداری قالب کودک

کدها را مستند و دسته‌بندی کنید

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

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

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

نسخه پشتیبان و محیط آزمایشی داشته باشید

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

«هر تغییری که قابل بازگشت نباشد، هنوز برای سایت واقعی آماده نیست.»

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

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

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

جمع‌بندی ساخت قالب کودک وردپرس

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

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

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

آیا برای هر قالب وردپرس می‌توان قالب کودک ساخت؟

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

آیا فعال‌کردن قالب کودک تنظیمات قالب اصلی را حذف می‌کند؟

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

آیا می‌توان بدون فایل functions.php قالب کودک ساخت؟

بله. اگر فقط به تغییر CSS نیاز دارید، وجود فایل style.css ممکن است کافی باشد؛ اما برای بارگذاری استاندارد استایل والد، افزودن هوک‌ها و توسعه‌های PHP، فایل functions.php ضروری است.

آیا کپی‌کردن functions.php قالب والد در قالب کودک درست است؟

خیر. این کار می‌تواند باعث اجرای دوباره توابع و ایجاد خطای PHP شود. فقط کدهای موردنیاز خود را در فایل قالب کودک بنویسید و برای تغییر رفتار قالب از هوک‌ها و فیلترها استفاده کنید.

اگر بعد از فعال‌سازی قالب کودک سایت خراب شد چه کار کنیم؟

ابتدا نام پوشه قالب کودک را از طریق File Manager تغییر دهید تا وردپرس آن را غیرفعال کند. سپس آخرین تغییرات فایل functions.php و style.css را بررسی کنید. فعال‌کردن حالت دیباگ وردپرس در محیط آزمایشی نیز به پیدا کردن خطای PHP کمک می‌کند.

آیا قالب کودک روی سرعت سایت اثر منفی دارد؟

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