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

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

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

قالب فرزند یا چایلد تم چیست

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

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

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

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

برای شروع، باید یک قالب فرزند (child theme) آماده کنیم.

آموزش ساخت

ابتدا، باید یک فایل استایل جدید برای قالب فرزند خود ایجاد کنیم. یک فایل جدید به نام “` ایجاد کنید style.cssو این کد را در آن قرار دهید:“

/*
Theme Name: NegarNovin Child Theme
Version: 1.0
Description: Child theme for Wp.
Author: NegarNovin
Author URI: https://negarnovin.com
Template: NN DC
*/

در مرحله بعد، باید فیلد Template را تغییر دهیم تا به WooTheme نصب شده ما اشاره کند. در این مثال، از قالب Storefront که در زیر نصب شده است استفاده خواهیم کرد wp-content/themes/storefront/. نتیجه به این شکل خواهد بود:

/*
Theme Name: Storefront Child
Version: 1.0
Description: Child theme for Storefront.
Author: Woo
Author URI: https://negarnovin.com
Template: storefront
*/

/* --------------- Theme customization starts here ----------------- */

نکته: با Storefront، نیازی نیست هیچ یک از فایل‌های استایل قالب والد را با PHP از functions.phpفایل قالب یا @importاین فایل‌ها در فایل قالب فرزند قرار دهید style.css، زیرا قالب اصلی والد Storefront این کار را برای شما انجام می‌دهد.

با Storefront، یک قالب فرزند فقط به یک functions.phpفایل خالی و یک style.cssفایل برای راه‌اندازی نیاز دارد.

آپلود و فعال سازی

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

• از طریق FTP. اگر از FTP استفاده می‌کنید، به این معنی است که مستقیماً به پوشه‌های وب‌سایت خود می‌روید. این بدان معناست که به دسترسی FTP به هاست خود نیاز دارید تا بتوانید قالب فرزند جدید را آپلود کنید. اگر این دسترسی را ندارید، باید با هاست خود صحبت کنید تا جزئیات ورود FTP شما را به شما بدهند و سپس یک برنامه FTP را برای آپلود فایل‌های خود دانلود کنید.
• از طریق داشبورد وردپرس. اگر یک فایل .zip از پوشه قالب فرزند خود ایجاد کنید، می‌توانید به سادگی آن را از بخش وردپرس > ظاهر > پوسته‌ها > افزودن جدید در سایت خود آپلود کنید .

پس از انجام این کار، قالب فرزند شما در یک پوشه جدید wp-content/themes/، مثلاً در، آپلود خواهد شد wp-content/themes/storefront-child/. پس از آپلود، می‌توانیم به داشبورد وردپرس > ظاهر > پوسته‌ها برویم و قالب فرزند را فعال کنیم.

سفارشی‌ سازی طراحی و عملکرد

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

سفارشی سازی طراحی

بیایید با هم یک مثال بزنیم که در آن رنگ عنوان سایت را تغییر می‌دهیم. این را به کد خود اضافه کنید /storefront-child/style.css:

.site-branding h1 a {
    color: red;
}

بعد از ذخیره فایل و رفرش کردن مرورگر، حالا خواهید دید که رنگ عنوان سایت تغییر کرده است!

تغییرات قالب

توجه: این مورد در مورد قالب‌های فرزند Storefront صدق نمی‌کند. هرگونه سفارشی‌سازی در فایل‌های قالب فرزند Storefront هنگام به‌روزرسانی از بین می‌رود. به جای سفارشی‌سازی مستقیم فایل‌های قالب فرزند Storefront، توصیه می‌کنیم قطعه کدهایی را به یک افزونه سفارشی‌سازی اضافه کنید. ما افزونه‌ای برای انجام این کار ایجاد کرده‌ایم. افزونه Theme Customizations را به صورت رایگان دانلود کنید.

اما صبر کنید، چیزهای بیشتری هم هست! می‌توانید همین کار را با فایل‌های قالب ( *.php) در پوشه قالب انجام دهید. برای مثال، اگر بخواهیم کدی را در هدر تغییر دهیم، باید header.php را از پوشه قالب والد خود wp-content/themes/storefront/header.phpبه پوشه قالب فرزند خود کپی کنیم wp-content/themes/storefront-child/header.php. پس از کپی کردن آن در قالب فرزند، header.phpهر کدی را که می‌خواهیم ویرایش و سفارشی می‌کنیم. کد header.phpموجود در قالب فرزند به جای کد قالب والد استفاده خواهد شد header.php.

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

تغییرات عملکردی

نکته : فایل functions.php در قالب فرزند شما باید خالی باشد و هیچ چیزی از فایل functions.php قالب والد را در خود جای ندهد.

تابع موجود در قالب فرزند شما قبل از تابع قالب والد functions.phpبارگذاری می‌شود . اگر تابعی در قالب والد قابل اتصال (pluggable) باشد ، به شما این امکان را می‌دهد که یک تابع را از قالب والد در قالب فرزند کپی کنید و آن را جایگزین تابع موجود در قالب والد خود کنید. تنها شرط لازم این است که تابع قالب والد قابل اتصال (pluggable) باشد ، که اساساً به این معنی است که در یک عبارت شرطی if قرار می‌گیرد، مثلاً:functions.phpfunctions.php

if ( ! function_exists( "parent_function_name" ) ) {
    parent_function_name() {
        ...
    }
}

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

هاست وردپرس

دایرکتوری قالب در مقابل دایرکتوری استایل‌ شیت

وردپرس چند مورد دارد که در قالب فرزند به طور متفاوتی مدیریت می‌کند. اگر یک فایل قالب در قالب فرزند خود دارید، باید نحوه‌ی درج فایل‌ها توسط وردپرس را تغییر دهید. get_template_directory()به قالب والد ارجاع خواهد داد. برای اینکه از فایل موجود در قالب فرزند استفاده کند، باید use را تغییر دهید get_stylesheet_directory();.

اطلاعات بیشتر در این مورد از WP Codex

پشتیبانی از قالب چایلد

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

نمونه چایلد تم

برای شروع ، نمونه قالب فرزند را از بالای این مقاله دانلود کنید. قالب فرزند را به همراه قالب والد خود در پوشه wp-content/themes/ قرار دهید.