آموزش ساخت Child Theme در وردپرس (مرحله به مرحله)

آموزش ساخت Child Theme در وردپرس (مرحله به مرحله)

اگر قصد دارید قالب وردپرس خود را شخصی‌سازی کنید، هرگز فایل‌های قالب اصلی (Parent Theme) را مستقیما ویرایش نکنید. چرا؟
چون با هر بار بروزرسانی قالب، تمام تغییرات شما از بین میره.
راه‌حل استاندارد، استفاده از Child Theme یا همان قالب فرزند است.
در این آموزش یاد می‌گیریم Child Theme چیست، چه زمانی باید از آن استفاده کنیم و چطور در کمتر از ۵ دقیقه یکی بسازیم.

Child Theme چیست؟

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

چه زمانی باید از Child Theme استفاده کنیم؟

اگر فقط می‌خواید چند خط CSS به سایت اضافه کنید، بخش CSS اضافی (Additional CSS) وردپرس برای این کار کافیه.
اما اگر قرار هست یکی از کارهای زیر را انجام بدید، بهتره از Child Theme استفاده کنید:

  • ویرایش فایل functions.php
  • اضافه کردن کدهای PHP
  • تغییر فایل‌هایی مثل header.php یا footer.php
  • ساخت قالب اختصاصی برای صفحات
  • شخصی‌سازی ووکامرس
  • Override کردن فایل‌های قالب

به طور خلاصه، اگر تغییرات شما قرار است دائمی باشد، Child Theme بهترین انتخاب است.

آموزش ساخت Child Theme

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

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

وارد هاست یا FTP شوید و به مسیر زیر بروید:

wp-content/themes

حالا یک پوشه جدید ایجاد کنید.
بهتر است نام آن شبیه قالب اصلی باشد.
مثلا اگر قالب شما Hello Elementor هست، نام پوشه چایلدتم شما میشه:

hello-elementor-child

در واقع کافیه انتهای نام قالب، عبارت -child را اضافه کنید.

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

داخل پوشه Child Theme یک فایل با نام زیر ایجاد کنید:

style.css

حالا اطلاعات زیر را داخل آن قرار دهید:

/*
Theme Name: hello elementor Child
Template: hello-elementor
Author: MrBinary
Version: 1.0
*/

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

مثلا اگر پوشه قالب اصلی:

hello-elementor

باشد، مقدار Template هم باید دقیقا همین باشد.

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

مرحله سوم: ساخت فایل 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' );

این کد باعث میشه ابتدا فایل‌های CSS قالب اصلی و بعد استایل‌های Child Theme بارگذاری شوند.
در نتیجه فقط کافی است تغییرات خودتان را داخل فایل style.css قالب فرزند بنویسید.

مرحله چهارم: فعال کردن قالب

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

بعد از ساخت Child Theme چه کارهایی می‌توان انجام داد؟

تقریبا هر چیزی!
مثلا می‌توانید تمام CSSهای سفارشی را داخل فایل style.css بنویسید یا هر کدی که قرار است به سایت اضافه شود را داخل functions.php قرار دهید.
توصیه مسترباینری: این کار شاید فقط ۵ دقیقه زمان ببرد، اما بعدها می‌تواند ساعت‌ها در زمان شما صرفه‌جویی کند 🙂
موفق باشید

دسته بندی: کدهای کاربردی, چیزهایی برای یادگیری
مستر باینری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Fill out this field
Fill out this field
لطفاً یک نشانی ایمیل معتبر بنویسید.
You need to agree with the terms to proceed