به طور معمول افراد برای اینکه پوسته ای مناسب برای سایت خود پیدا کنند، زمان تقریبا زیادی را صرف می کنند و با این حال در نهایت فکر می کنند پوسته انتخاب شده باز هم آن چیزی که به دنبال اش هستند نیست و شروع به ویرایش و سفارشی سازی پوسته می کنند.
اینکه بخواهید پوسته سایت‌تان را ویرایش کنید و چیزی را به آن اضافه کنید و یا از آن حذف کنید، به طور حتم حق مسلم شماست، اما یک مشکل کوچک و البته مهم وجود دارد!
همانطور که خودتان اطلاع دارید وردپرس به طور مدام در حال بروزرسانی بوده و به دنبال آن افزونه ها و پوسته ها نیز بروزرسانی می شوند.
این بدان معناست که اگر شما تغییراتی را در پوسته سایت خود اعمال کرده باشید، به هنگام بروزرسانی پوسته از بین خواهند رفت. پس چاره کار چیست؟ از پوسته فرزند (child theme) استفاده کنید.
به طور مختصر می توان گفت که پوسته فرزند، پوسته ای است که توابع و استایل های پوسته اصلی که پوسته مادر نامیده می شود را به ارث برده و از آن جهت اعمال تغییرات در سایت بدون دستکاری در پوسته اصلی استفاده می شود.
این کار سه مزیت را برای شما به همراه خواهد داشت:
- در صورتی که تغییراتی اعمال کرده باشید، با بروزرسانی پوسته از بین نخواهند رفت.
- در صورت بروز مشکل به هنگام تغییرات می توانید پوسته فرزند را حذف کنید تا سایت دچار مشکل نشود.
- استفاده از پوسته های فرزند باعث شناخت بهتر شما از ساختار پوسته های وردپرس می شود.
اکنون تا با اینجا می دانید که منظور از پوسته فرزند چیست و چه کاربردی دارد. پس به سراغ آموزش استفاده از آن می رویم.
آموزش ایجاد پوسته فرزند در وردپرس
ابتدا از طریق کنترل پنل هاست یا FTP یک پوشه جدید در مسیر پوسته های وردپرس (site/wp-content/themes) ایجاد کنید.
نام پوشه را test-child وارد کنید. البته نام پوشته را می توانید هرچه که می خواهید وارد کنید اما بهتر است که ابتدا نام پوسته اصلی را بنویسید و سپس عبارت child را به آن اضافه کنید تا بعدها متوجه شوید که آن پوشه مربوط به پوسته فرزند کدام پوسته است.
پس از ایجاد پوسته لازم است که آن را به وردپرس شناساند و بدین منظور حتما می دانید که از فایل style.css استفاده می شود. بنابراین فایل ذکر شده را ایجاد کرده و کدهای زیر را به آن اضافه کنید:
/* Theme Name: Test Child Theme Theme URI: https://wprahnama.com Description: Test Child Theme Author: Payam Author URI: https://wprahnama.com Template: test Version: 1.0 */
اکنون اگر فایل را ذخیره کنید و به قسمت پوسته ها در داشبورد وردپرس مراجعه کنید، می توانید پوسته فرزند را انتخاب و فعال کنید.
اعمال تغییرات در پوسته فرزند
از آنجا که هدف ما از ایجاد پوسته فرزند اعمال تغییرات در سایت است، پس به نحوه انجام این کار نیز اشاره می کنیم.
تغییرات در استایل سایت
برای اعمال تغییرات در ظاهر سایت از فایل استایل استفاده می شود. در واقع تغییرات ظاهری سایت را می توانید در همان فایل style.css وارد کنید.
تغییرات در امکانات سایت
امکانات سایت همان کدها و توابع PHP هستند که در فایل functions.php نگه داری می شود. بنابراین اگر بخواهید تغییراتی را در این خصوص اعمال کنید، یک فایل با همین نام در پوسته فرزند ایجاد کرده و تغییرات خود را در آن وارد کنید.
تغییر در ساختار سایت
تغییرات همیشه به تغییر دادن رنگ و افزودن چند تا امکان خلاصه نمی شود. گاهی اوقات ممکن است پوسته انتخابی قسمت های اضافی داشته باشد که به آنها نیازی ندارید و یابرعکس! در این حالت باید تغییراتی در ساختار کدنویسی HTML اعمال کرد.
بدین منظور همانند روش های قبل باید عمل کنید. برای مثال اگر می خواهید به هدر سایت المان هایی را اضافه کنید، می توانید فایل header.php پوسته مادر را در پوسته فرزند کپی کرده و سپس اقدام به ویرایش کنید. در واقع وردپرس هر فایلی را که در پوسته فرزند وجود داشته باشد را به فایل اصلی ترجیح خواهد داد.
استفاده از فایل های استایل پوسته مادر
تا به این قسمت ما پوسته فرزند را ایجاد کردیم و تغییرات خود را در آن اعمال کرده ایم.شاید فکر کنید که کار تمام است – اما این چنین نیست! کافیست که پوسته فرزند را فعال کرده و سایت خود را مشاهده کنید؛ بله سایت بهم ریخته است! چراکه ما کدهای استایل پوسته مادر را هنوز به پوسته فرزند معرفی نکرده ایم. همانطور که بالاتر گفته شد، در صورتی که فایلی در پوسته فرزند وجود داشته باشد، وردپرس آن فایل را دیگر از پوسته مادر فراخوانی نخواهد کرد و ما در اینجا فایل style.css را ایجاد کردیم که باعث می شود که فایل استایل پوسته اصلی دیگر استفاده نشود.
برای اینکه فایل style.css پوسته مادر را استفاده کرد می توان از دستور @import در فایل استایل پوسته فرزند استفاده کرد، اما بهتر است که از این روش استفاده نکنید؛ چراکه می تواند موجب کاهش سرعت بارگذاری فایل ها و در نهایت سایت شود. به همین دلیل از تابع wp_enqueue_style و اکشن ها استفاده می کنیم.
کدهای زیر را به فایل functions.php پوسته فرزند اضافه کنید (اگر تا با اینجا این فایل را ایجاد نکرده اید، اکنون ایجاد کنید و فراموش نکنید که آن موقع از تگ های آغازین و پایانی پی اچ پی استفاده کنید):
نکته: پس از اینکه پوسته فرزند را فعال کردید، فهرست ها و تنظیماتی مانند تصویر سربرگ و تصویر پس زمینه را باید مجددا ذخیره کنید.
سلام و خسته نباشید
من نمیتونم فایل های css در child theme ام رو فراخوانی کنم هرکار بگین کردم اما انگار تابع functions.php من درست عمل نمیکنه .
خییییییییلی ممنن میم کمکم کنید.
کد functions.php ام اینه:
get (‘Version’) );
wp_enqueue_style( ‘rtl’, get_stylesheet_directory_uri() . ‘/rtl.css’, array( ‘rtl’ ) , wp_get_theme() ->get (‘Version’) );
wp_enqueue_style( ‘main’, get_stylesheet_directory_uri() . ‘/assets/stylesheets/main.css’, array( ‘main’ ) , wp_get_theme() ->get (‘Version’) );
wp_enqueue_style( ‘bootstrap’, get_stylesheet_directory_uri() . ‘/assets/stylesheets/bootstrap.css’, array( ‘bootstrap’ ) , wp_get_theme() ->get (‘Version’) );
}
add_action( ‘wp_enqueue_scripts’, ‘enqueue_webmarket_styles’ );
?>
و بالای تمام فایلهای css فرزند این کامنتو گذاشتم:
/*
Theme Name: Webmarket WP Child
Theme URI: https://www.meroeh.com/wp-content/themes/webmarket-child
Author: Meroeh
Author URI: https://www.meroeh.com/
Description: Webmarket WP Child Theme
Version: 1.0.0
Template: webmarket-wp
Tags: wordpress, business, responsive, slider, blog, cart, commerce, WooCommerce, wp, light, optimized, shop, shopping, slider, theme, webmarket
License: GPL 2.0
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webmarket_wp
*/
به نظرم اصلا” فراخوانی فایلهای css فرزند انجام نمیشه چون تغییرات فایل های css فرزندم اجرا نمیشن.
دوست عزیز نیازی به این کار نیست
شما فایل rtl.css قالب والد رو کپی کنید و تغییرات دلخواهتون رو توش انجام بدین – اتوماتیک اعمال میشه
اگر هم می خوایین یک یا چندتا فایل css دیگه اضافه کنید می تونید از دستور @import در فایل rtl.css استفاده کنید
ممنونم از پاسخگویی سریعتون
من تونستم برای rtl.css تغییراتم رو اعمال کنم و فایل rtl.css رو توی روت childthemeام قرار دادم و درست شد اما فایل والد من دوتا فایل css دیگه بنامه main و bootstrap هم داره که مسر اونها در قالب والد اینه:
parent-template/assets/stylesheets/main.css
parent-template/assets/stylesheets/bootstrap.css
حالا فایل functions.php من که توی روت child theme هست کدش اینه:
و داره درست کار میکنه. بالای همه فایلهای css هم کامنت درست گذاشتم. حالا فقط مونده اینکه فایل main.css فرزندم جای والد خونده بشه.
من اومدم توی فلدر قالب فرزندم دقیقا” همون فلدرهای assets و stylesheets رو که والد داشت توی فرزند هم ایجاد کردم و main.css رو توی این فلدرها(عین مسیر والد) گذاشتم.
حالا مونده لطف کنید کمکم کنید که چه تغییری توی فایل functions.php یا هر جای دیگه باید بدم تا man.css فرزند خونده بشه؟
ممنونم
کاری که انجام دادین دسته
ممکنه عدم شناسایی فایل main.css در فرزند به کدنویسی قالب برگرده و باید دقیق بررسی بشه
ولی می تونید از یک ترفند css ای استفاده کنید به شکل زیر
هر سلکتوری رو که در فایل main.css والد هست و می خوایین تغییرش بدین رو به فایل rtl.css اضافه کنید و تغییرات رو روش اعمال کنید و در نهایت جلوی هر کدوم از دستورات از !important استفاده کنید
با این کار برای سلکتورهای عین هم در ۲ فایل main و rtl اولویت با سلکتورهای rtl هست چون از !important استفاده شده توی اونها
امیدوارم منظورم رو خوب رسونده باشم
سلام
مرسی از جوابگویی تون.
بله به اون روش شما هم میشه اما من اومدم فایل functions.php ام رو اینجور نوشتم فکر کنم الان همه رو داره میخونه
بنظر شما هم این کد درسته؟
لطفاً توی بخش نظرات کد نزارید – وردپرس فیلترش می کنه – از انجمن سایت استفاده کنید
نیازی به این کار نیست و تنها با قرار دادن فایل های والد در همان مسیر در قالب فرزند فایل های فرزند اولویت خواهند داشت
چشم ممنون یعنی منظورتون اینه که فقط به یکی از فایلهای css ام اشاره کنم ولی همه فایلهای css رو مثل مسیرشون در والد در فرزند هم فلدربندی کنم کافیه؟
بله . با این روش باید کار کنه قاعدتاً