آخرین بازبینی: ۱۴۰۲/۱۲/۱۳

وردپرس: آموزش ساخت Child Theme. کاربرد و هدف آن چیست ؟

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

در ادامه روش ساخت یک قالب Child حداقلی را مشاهده می‌کنید.

۱- ساخت شاخه‌ی قالب Child

اولین کار، ساخت یک شاخه با نام دلخواه است که فایل‌های مربوط به قالب Child شما را ذخیره می‌کند. معمولا این نام با اضافه کردن پسوند -child به نام قالب اصلی انجام می‌شود.

برای مثال اگر نام قالب اصلی enfold باشد، نام قالب Child ما enfold-child خواهد بود.

۲- ساخت فایل style.css

قدم بعدی ساخت فایلی با نام style.css است که مشخصات و ویژگی‌های قالب جدید را تعیین می‌کند. در این فایل مشخص می‌کنیم که قالب اصلی ما چه نامی دارد و قالب Child ما در وردرپرس با چه نامی قابل مشاهده خواهد بود.

محتویات زیر را در فایل خود قرار دهید( برای قالب enfold )

/*
    Theme Name:   Enfold Child
    Template:     enfold
*/

Theme Name: Enfold Child

Template: enfold

۳- ساخت شیوه‌نامه و بارگزاری آن در قالب

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

<?php
    function roka_enqueue_depends() {
    	if( is_child_theme() && file_exists( get_stylesheet_directory() . '/css/base.css' ) ) {
    		wp_enqueue_style( 'roka-child-custom', get_stylesheet_directory_uri() . '/css/base.css', false, 1.1, 'all' );
    	}
    }
    
    add_action( 'wp_enqueue_scripts', 'roka_enqueue_depends', 9999 );

<?php

function roka_enqueue_depends() {

if( is_child_theme() && file_exists( get_stylesheet_directory() . '/css/base.css' ) ) {

wp_enqueue_style( 'roka-child-custom', get_stylesheet_directory_uri() . '/css/base.css', false, 1.1, 'all' );

}

add_action( 'wp_enqueue_scripts', 'roka_enqueue_depends', 9999 );

کد بالا بررسی می‌کند که آیا فایلی با نام base.css در مسیر css وجود دارد یا خیر و اگر موجود باشد آن را به سایت اضافه می‌کند.

اکنون یک شاخه با نام css ایجاد کنید و فایلی با نام base.css درون آن قرار دهید. محتویات این فایل می‌تواند به دلخواه شما باشد. معمولا برای اضافه کردن فونت و درج آن در سایت به کدهایی به شکل زیر نیاز خواهید داشت:

/*
@font-face {
	font-family: ROKA;
	font-style: normal;
	font-weight: normal;
	src: url( ... );
}
*/

body {
    font: 12px/20px ROKA !important;
}

@font-face {

font-family: ROKA;

font-style: normal;

font-weight: normal;

src: url( ... );

}

body {

font: 12px/20px ROKA !important;

}

۴- موارد اختیاری

در صورتی که بخواهید می‌توانید یک فایل با نام screenshot.png در شاخه‌ی قالب Child کپی کنید تا تصویر مورد نظر در بخش مدیریت سایت دیده شود. برای مشاهده‌ی نمونه و ابعاد این فایل می‌توانید به شاخه‌ی قالب اصلی مراجعه کنید و فایل موجود در آن شاخه را برای ساخت تصویر جدید استفاده کنید.
در صورتی که قالب اصلی شما چپ به راست است و با ساخت قالب Child می‌خواهید قالب را راست به چپ کنید، با ساخت یک فایل rtl.css و قراردادن آن در قالب Child، این فایل به صورت خودکار در سایت بارگزاری می‌شود و نیازی به تغییرات در functions.php نیست.
با نصب یک افزونه‌ی Cache برای فایل‌های جانبی CSS و JS می‌توانید تمام فایل‌های جانبی ایجاد شده را به صورت خودکار ادغام کنید تا سرعت سایت شما با اضافه شدن تعداد و حجم این فایل‌ها کاهش پیدا نکند.

استفاده از افزونه برای ساخت و تنظیم قالب Child

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