چگونه در وردپرس یک پوسته فرزند را درست کنیم؟

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

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

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

مقدمات پوسته فرزند وردپرس

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

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

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

به صورت ساده، پوسته های فرزند، پوسته هایی هستند که کدهایی به آن ها اضافه می شود تا با استفاده از آن طراحی و کارکرد پوسته اصلی توسعه یابد. در اینجا می توانید چند دلیل ساده را برای اینکه باید از پوسته فرزند استفاده کنید مشاهده می کنید:

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

خب حال که شما با ساختن پوسته فرزند در وردپرس آشنا شدید و فهمیدید که اینگونه پوسته ها چه کاربردی دارند بهتر است با هم نگاهی به این بیاندازیم که چگونه می توانیم چنین پوسته هایی را درست کنیم.

چگونه یک پوسته فرزند وردپرس را درست کنیم؟

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

برای شروع شما نیازمند داشتن دسترسی به پروتکل FTP و یک کدادیتور هستید. از پروتکل FTP برای دسترسی به فایل ها و از کد ادیتور برای ویرایش آن ها استفاده می کنیم. من در این آموزش از طریق سی پنل و فایل منیجر مربوط به آن پوسته فرزند را ایجاد می کنم. در این آموزش قصد دارم تا برای پوسته Twenty Seventeen یک پوسته فرزند ایجاد کنم.

قدم اول : وارد قسمت پوسته های وردپرس شوید

از طریق سی پنل یا FTP سعی کنید وارد آدرس wp-content/themes شوید. اینجا جایی است که پوسته های وردپرسی شما قرار دارد.

بعد از آن داخل پوشه themes یک پوشه ایجاد کنید و اسم آن را به صورت parenttheme-child قرار دهید. در مثال ما twentyseventeen-child می شود. البته هیچ اجباری وجود ندارد اما اینگونه می توان بهتر همه چیز را تشخیص داد و فهمید که کدام پوسته به کدام پوسته دیگر مربوط می شود.

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

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

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

پس یک فایل سی‌اس‌اس را در آدرس /wp-content/themes/twentyseventeen-child ایجاد کنید:

حال کدهای زیر را در آن قرار دهید

//GITHUB LINK: https://gist.github.com/rafaysansari/2de2313474572bba84adff6e7ebfd659

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://www.yourwebsite.com/twentyseventeen-child
Author: Rafay Saeed Ansari
Author URI: http://www.blogginc.com/
Description: My first child theme. Parent theme: Twenty Seventeen.
Version: 2.5.0
Template: twentyseventeen
Text Domain: twentyseventeen-child
Tags: green, light, white, gray, black, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, photoblogging, left-sidebar, translation-ready
*/
@import url("../twentyseventeen/style.css");

در کدهای بالا به مقادیر Theme Name و Template دقت کنید، مقادیر این دو آیتم نشان می دهد که این پوسته فرزند است و متعلق به کدام پوسته اصلی است. دستور @import نیز یک قاعده سی‌اس‌اس است که با استفاده از آن فایل استایل پوسته والد را به پوسته فرزند وارد می کند بعد از آنکه شما پوسته فرزند را فعال کنید، استایل های موجود این پوسته را نیز مشاهده خواهید کرد.

در این مرحله، اساسا پوسته تان آماده شده است. اگر فکر می کنید که تنها نیاز دارید استایل پوسته را تغییر دهید و روی آن کار کنید می توانید از مرحله سوم چشم پوشی کنید. اما اگر می خواهید کارایی به وبسایت اضافه کنید و از توابع وردپرس استفاده کنید مجبور خواهید بود که فایل functions.php را به پوسته فرزندتان اضافه کنید.

قدم سوم: فایل functions.php را به پوشه پوسته فرزند‌تان اضافه کنید

به عنوان یک توسعه دهنده وردپرس ممکن است نیاز داشته باشید تا چند تابع را به وبسایت وردپرسی‌تان اضافه کنید. افزودن توابع به فایل functions.php مربوط به پوسته والد یک مشکل دارد و آن این است که بعد از هر بار بروزرسانی پوسته تمام تغییرات شما حذف خواهد شد.

برای آنکه همیشه تغییرات‌تان پابرجا بماند نیاز دارید تا یک فایل functions.php را داخل پوشه پوسته فرزند ایجاد کنید. اینکار را درست مانند مرحله ای که فایل استایل را ساختیم انجام دهید با این تفاوت که باید نام فایل را functions.php قرار دهید.

بعد از آنکه فایل را ساختید آن را باز کرده و کدهای زیر را در آن قرار دهید:

//GITHUB LINK: https://gist.github.com/rafaysansari/66bcb59892740b515bdd813318729a8d
< ? php
//* Add your code here

حال می توانید بعد از تگ باز php بجای کامنت دومی کدهای‌تان را بنویسید.

اگر پوسته والدتان از چندین فایل استایل استفاده می کند می توانید با استفاده از تابع wp_enqueue_style() فایل های stylesheetتان را به پوسته فرزند اضافه کنید. این کار بدون کاهش سرعت لود وبسایت انجام خواهد شد. برای انجام این کار به سادگی خطوط زیر را به فایل functions.php اضافه کنید.

//GITHUB LINK: https://gist.github.com/rafaysansari/c521c1e614a149e6802382cb64fd7560

add_action( 'wp_enqueue_scripts', 'enqueue_multiple_styles' );
function enqueue_multiple_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

قدم چهارم: فعال کردن پوسته فرزند در وبسایت

خب حالا، پوسته فرزند ما آماده شد و می توانیم آن را از طریق پیشخوان وردپرسی فعال نماییم. به قسمت پوسته ها رفته مطمئنا پوسته اضافه شده به لیست پوسته ها را خواهید دید.

روی دکمه فعال کردن کلیک کنید.

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

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

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

کار با HOOKهای مربوط به پوسته

با استفاده از این ویژگی می توانید تابع های سفارشی و مواردی را از این قبیل به وبسایت اضافه کنید.

قرار دادن فایل های قالب

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

در پایان

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

بیاید یک نگاه سریع دیگری به کارهایی که انجام شد بیاندازیم: