از پوسته فرزند در وردپرس برای سفارشی‌سازی قالب‌ها استفاده می‌شود. به کمک child theme یا چایلد تم وردپرس میتوانیم ظاهر پوسته اصلی را تغییر داده یا برنامه نویسی آن را عوض کنیم! در این آموزش یاد می‌گیریم چطور در ۳ قدم یک پوسته فرزند ساخته و شروع به ویرایش قالب کنیم.
قالب سایت همان ظاهر و بخش‌هایی از امکانات سایت ماست. در اکثر سایت‌های وردپرسی از قالب‌های موجود استفاده می‌شود. این مسئله باعث می‌شود در زمان خیلی کمی به امکانات و طراحی دلخواهمان برسیم.
اما خیلی از اوقات نیاز داریم بخش‌هایی از ظاهر سایت را تغییر داده، کدنویسی آن را ویرایش کنیم یا کدهای جدیدی به سایت اضافه کنیم. اینجاست که استفاده از پوسته فرزند یا چایلد تم در وردپرس به کمک ما می‌آید.
در آموزش افزودن کد به وردپرس ۵ روش برای افزودن قطعه کدهای HTML، CSS یا PHP معرفی کرده بودم. در این آموزش روش پنجم، که بهترین روش برای اعمال تغییرات زیاد و تغییر کدهای قالب وردپرس است را یاد می‌کنیم.
فهرست محتوای آموزش
پوسته فرزند یا چایلد تم وردپرس
معمولاً قالب‌های خوب و معروفی که در مخزن وردپرس قرار دارند یا به صورت پولی (پریمیوم) به فروش می‌رسند، به‌طور مداوم آپدیت می‌شوند. در هر آپدیت بخش‌هایی از کدهای پوسته تغییر می‌کنند تا امکانات بیشتری اضافه کرده یا ایرادات قبلی را برطرف کنند.
بنابراین در زمان آپدیت، فایل‌های نسخه قبلی با نسخه جدید جایگزین می‌شوند. اینجاست که اگر ما تغییراتی در این فایل‌ها ایجاد کرده باشیم، همه تغییراتمان از بین خواهد رفت.
مثلاً اگر فایل style.css یا functions.php پوسته را تغییر داده باشیم، احتمال زیاد با اولین به‌روزرسانی، همه آن تغییرات از بین خواهد رفت.
پوسته فرزند در وردپرس یک پوسته بر پایه پوسته والد است. پوسته والد (parent) همان قالب اصلی ماست که آن را نصب کرده و می‌خواهیم تغییراتی روی آن ایجاد کنیم. چایلد تم همه امکانات و ظاهر پوسته والد خود را به ارث می‌برد؛ اما میتوانیم هر کدام از آن‌ها را بنا به نیازمان تغییر دهیم.
این تغییرات روی فایل‌های جدید (در پوسته فرزند) اعمال شده و ما کاری به پوسته اصلی نداریم. بنابراین همه این تغییرات در زمان آپدیت و تغییر فایل‌های پوسته اصلی باقی خواهد ماند.
بنابراین اگر در حال برنامه نویسی قالب وردپرس اختصاصی خودتان هستید، احتمالاً پوسته فرزند به کارتان نیاید! اما اگر می‌خواهید از یک پوسته دیگر به عنوان پایه استفاده کرده و آن را سفارشی‌سازی کنید، چایلد تم وردپرس بهترین راهکار است.
نحوه کار قالب فرزند در وردپرس
همانطور که می‌دانید، ساختار پوسته وردپرس شامل دو بخش بسیار کلی است:
- فایل‌های حاوی کدهای پردازشی سایت
- فایل‌های ساختاری و ظاهری سایت که محتوای صفحه‌های ما را ایجاد می‌کنند.
وقتی از child theme در وردپرس استفاده می‌کنیم، نحوه بارگذاری و اجرای کدها به صورت زیر خواهد شد:
- همه فایل‌های پردازشی پوسته والد و پوسته فرزند (هر دو) اجرا می‌شوند.
- در فایل‌های ظاهری، اگر فایل معادلی در پوسته فرزند وجود داشته باشد، به جای فایل پوسته اصلی اجرا می‌شود؛ اگر نباشد، مستقیماً از پوسته والد فراخوانی خواهد شد.
برای مورد دوم، مثلاً برای نمایش محتوای نوشته وردپرس، اگر فایلی به نام single.php در پوسته فرزند وجود داشته باشد، اجرا می‌شود؛ در غیر اینصورت همین فایل از پوسته اصلی فراخوانی می‌شود.
ساخت child theme در وردپرس
برای ساخت پوسته فرزند در وردپرس سه گام اصلی داریم:
- فولدر پوسته و فایل‌های اولیه آن را ایجاد کنیم.
- مشخص کنیم که این پوسته، پوسته فرزند یک قالب دیگر است. در صورت نیاز باید استایل‌های پوسته والد را نیز فراخوانی کنیم.
- تغییرات خود را در چایلد تم آغاز کنیم! 🙂
ملزومات چایلد تم وردپرس
در ابتدا باید پوسته پایه را روی وردپرس نصب کنیم. (آموزش نصب پوسته وردپرس) نیازی به فعالسازی آن نیست؛ صرفاً باید فولدر و فایل‌هایش وجود داشته باشند.
در این آموزش، من از پوسته آسترا (astra) که به رایگان در مخزن وردپرس وجود دارد استفاده می‌کنم. شما می‌توانید پوسته فرزند برای هر قالب دیگری در وردپرس را مشابه همین ۳ گام ایجاد کنید.
حال باید یک پوشه (فولدر) برای پوسته فرزند ایجاد کنیم. اسم این فولدر هر چیزی می‌تواند باشد. اما پیشنهاد می‌کنم اسم آن را به‌صورت {theme}-child که {theme} اسم پوسته والد است انتخاب کنید.
من فولدری به نام astra-child در مسیر پوسته‌ها (wp-content/themes/) ایجاد می‌کنم.
حالا باید درون این فولدر دو فایل زیر را ایجاد کنیم:
- فایل
style.cssبرای اسم‌گذاری و تعریف پوسته فرزند. همچنین برای بارگذاری استایل‌های ظاهری سفارشی‌شده نیز استفاده می‌شود. - معمولاً به
functions.phpنیز احتیاج داریم. وجود این فایل اجباری نیست، اما اگر بخواهیم در کدهای پردازشی پوسته تغییری ایجاد کنیم، حتماً به این فایل نیاز داریم؛ پس پیشنهاد می‌کنم آن را ایجاد کنید.
تا الآن محتویات اولیه فولدر پوسته فرزند در وردپرس مشابه تصویر زیر است:
ایجاد فایل پوسته فرزند با کد
وقت آن شده که مشخص کنیم این پوسته، یک پوسته فرزند برای یکی از قالب‌های دیگر وردپرس است. برای این کار، توضیحات زیر را در ابتدای فایل style.css پوسته فرزند قرار می‌دهیم:
/*
Theme Name: my Astra Child Theme
Theme URI: https://example.com
Author: Omid
Author URI: https://sabzdanesh.com
Version: 1.0.0
Template: astra
*/این‌ها اطلاعاتی در مورد پوسته ما هستند. فقط اولی و آخری اجباری هستند. دیتاهای اطلاعاتی بیشتری را می‌توانید در این صفحه از مستندات وردپرس ببینید.
| Theme Name | نام پوسته فرزند |
| Theme URI | آدرس پوسته |
| Author | نام برنامه‌نویس پوسته |
| Author URI | سایت برنامه نویس |
| Version | نسخه پوسته فرزند |
| Template | نام پوسته اصلی (والد) |
توجه کنید که حتماً باید نام پوسته اصلی (Template) را وارد کنید. این نام، نام فولدر پوسته اصلی در مسیر پوسته‌های وردپرس است. در این مثال، نام فولدر من astra است. مثلاً اگر بخواهید از قالب 2021 پیشفرض به عنوان پوسته پایه استفاده کنید، باید twentytwentyone را بنویسیم.
یادتان باشد حتماً اسم پوسته والد در کد بالا را بر اساس پوسته خودتان تغییر دهید. همچنین پیشنهاد می‌کنیم برای تجربه بهتر، نام پوسته فرزند را مشابه پوسته اصلی به همراه Child قرار دهید. این صرفاً یک پیشنهاد است و اجباری در آن وجود ندارد.
اگر به بخش نمایش > پوسته‌ها در پیشخوان مراجعه کنیم، یک پوسته جدید به سایت اضافه شده که می‌توان آن را انتخاب و فعال کرد.
وقتی پوسته فرزند را فعال کنیم، خواهیم دید که سایت ما دقیقاً با همان پوسته اصلی بارگذاری شده است. یعنی هیچ تغییری روی قالب اعمال نشده است. دلیلش این است که هنوز هیچ کدی به چایلد تم اضافه نکرده‌ایم!
برای اینکه فایل style.css فرزند نیز در سایت بارگذاری شود، کد زیر را به functions.php اضافه می‌کنیم.
<?php
function sbzd_theme_enqueue_styles(){
wp_enqueue_style('child-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'sbzd_theme_enqueue_styles');به همین شکل، میتوانیم هر فایل دیگری را بارگذاری کرده یا قطعه کدهای php خود را به functions اضافه کنیم.
تغییر در قالب وردپرس با پوسته فرزند
حالا می‌توانید با خیال راحت هر تغییری که می‌خواهید در پوسته فرزند وردپرس ایجاد کنید. در این بخش، چند مثال ساده برای تغییراتی که احتمال می‌دهم می‌خواهید انجام دهید می‌زنم.
۱: افزودن css و js در پوسته فرزند
در بخش قبلی، فایل style.css را در سایت بارگذاری کردیم. به‌طور مشابه می‌توانید هر تعداد فایل css یا حتی js به پوسته فرزند اضافه کنید. بنابراین توضیح بیشتری در این مورد نمی‌دهم و ایجاد و فراخوانی آن را به خودتان واگذار می‌کنم.
۲: افزودن php به فانکشن در چایلد تم
همین الآن یک functions.php داریم که میتوانیم هر قطعه کد PHP داخل آن قرار دهیم. مثلاً می‌توانید کد تغییر ایمیل وردپرس را در آن قرار دهید و عملکردش را تست کنید.
اگر می‌خواهید کدهای زیادی در فانکشن قرار داده یا آن‌ها را به‌طور ساختاریافته ایجاد کنید، می‌توانید از require یا include چند فایل جداگانه استفاده کنید. اگر نمی‌دانید این دستورها چه هستند، آموزش فراخوانی فایل در PHP را ببینید.
۳: تغییر کدهای قالب وردپرس
احتمالاً برایتان جالب باشد که میتوانیم کدهای پوسته اصلی را در پوسته فرزند وردپرس بازنویسی و ویرایش کنیم. برای این کار کافی است یک فایل در همان مسیر و با همان نامی که در پوسته اصلی قرار دارد ایجاد کنیم.
مثلاً فرض کنید در فولدر پوسته والد من، فایل /template-parts/content-blog.php وجود دارد. من می‌خواهم کدهای html آن را تغییر داده، یا برخی از قسمت‌هایش را حذف کنم.
برای این کار، باید یک فولدر به نام template-parts در فولدر پوسته فرزند خود ایجاد کنم. سپس درون آن، فایلی به نام content-blog.php ایجاد کرده و کدهای خودم را در آن قرار دهم.
معمولاً اگر بخواهیم تغییراتی روی کدهای پوسته وردپرس ایجاد کنیم، پیشنهاد می‌کنم کدهای همان فایل را در پوسته فرزند کپی کرده و تغییرات لازم را اعمال کنید. مگر اینکه تغییراتتان خیلی اساسی باشد.
برای تغییر کدهای قالب وردپرس در قالب فرزند، باید آشنایی تقریباً خوبی نسبت به ساختار پوسته والد داشته باشید و همچنین با html آشنا بوده و مهارت حداقلی در برنامه نویسی وردپرس با php داشته باشید. اگر با ساختار فایل‌های کد پوسته‌ها آشنایی ندارید، آموزش ساختار فایل‌های قالب وردپرس دیدگاه خوبی به شما می‌دهد.
در این آموزش روش ساخت پوسته فرزند در وردپرس را یاد گرفتیم. فهمیدیم که می‌توان با چایلد تم، تقریباً هر نوع تغییراتی را در پوسته اصلی ایجاد کنیم. این تغییرات روی فایل‌ها و فولدر جدید انجام شده و در هنگام به‌روزرسانی پوسته اصلی از بین نخواهد رفت.
امیدوارم از این آموزش استفاده کرده باشید. پیشنهاد می‌کنم اگر در حال یادگیری هستید، ابتدا این تغییرات را روی یک سایت آزمایشی یا لوکال انجام داده و سپس پوسته فرزند را مشابه یک پوسته جدید روی سایت نصب کنید.
اگر سؤال یا نکته‌ای درباره پوسته فرزند دارید، بخش دیدگاه‌ها برای شماست. 🙂
این آموزش برای همیشه رایگانه! می‌تونید با اشتراک‌گذاری لینک این صفحه از ما حمایت کنید یا با خرید یه فنجون نوشیدنی بهمون انرژی بدید!
می‌خوام یه نوشیدنی مهمونتون کنم
سلام. پوسته فرزند را از کدام قسمت میتوانیم آپدیت کنیم؟
سلام
معمولاً پوسته فرزند رو برای توسعه یه پوسته دیگه ایجاد می‌کنیم و کدهاش توسط خودمون ایجاد می‌شه. (یعنی آپدیتی از سمت پوسته اصلی نداره)
اگه پوسته اصلی رو آپدیت کنید، نیازی به آپدیت فرزند نیست و همه امکانات جدید والد روی سایتتون اعمال می‌شه.