آشنایی با کلاس WP_Customize_Selective_Refresh
تو وردپرس، وقتی صحبت از سفارشی‌سازی و تغییرات زنده میشه، کلاس WP_Customize_Selective_Refresh حرف اول رو میزنه. این کلاس به ما اجازه میده که تغییراتی که در قسمت سفارشی‌سازی انجام میدیم، به صورت زنده و بدون بارگذاری مجدد صفحه مشاهده کنیم. خیلی از کاربران وردپرس به این قابلیت علاقه دارن، چون باعث میشه روند کارشون سریع‌تر و روان‌تر بشه.
یکی از متدهای مهم داخل این کلاس، متد enqueue_preview_scripts() هست. این متد برای بارگذاری اسکریپت‌ها و استایل‌هایی که برای پیش‌نمایش‌های زنده در بخش سفارشی‌سازی نیاز داریم، استفاده میشه. به عبارتی دیگه، وقتی تغییرات جدیدی ایجاد میکنیم، باید اسکریپت‌های مناسب هم بارگذاری بشن تا بتونیم تاثیر این تغییرات رو بلافاصله مشاهده کنیم.
برای درک بهتر این موضوع، بیایید یک مثال ساده بزنیم. فرض کنید ما یک ویدجت داریم که میخواهیم رنگ پس‌زمینه‌اش را در زمان واقعی تغییر دهیم. برای اینکه این تغییر اعمال بشه و کاربر بتونه بلافاصله رنگ جدید رو ببینه، نیاز داریم از enqueue_preview_scripts() استفاده کنیم تا اسکریپت‌های لازم بارگذاری بشن.
حالا بیایید نگاهی به کد این متد بیندازیم. این کد به ما این امکان رو میده که بتونیم اسکریپت‌های مورد نیاز رو به درستی بارگذاری کنیم و از طرفی هم هیچ گونه تأثیری روی عملکرد کلی وبسایت نداشته باشیم.
کد نمونه
class My_Customizer {
public function __construct() {
add_action('customize_preview_init', array($this, 'enqueue_preview_scripts'));
}
public function enqueue_preview_scripts() {
wp_enqueue_script(
'my-custom-preview',
get_template_directory_uri() . '/js/custom-preview.js',
array('customize-preview'),
null,
true
);
}
}
new My_Customizer();
توضیح کد
class My_Customizer {
این خط یک کلاس جدید به نام My_Customizer تعریف می‌کند.
public function __construct() {
این متد سازنده کلاس را تعریف می‌کند که هنگام ایجاد شیء جدید کلاس اجرا می‌شود.
add_action('customize_preview_init', array($this, 'enqueue_preview_scripts'));
این خط به وردپرس می‌گوید که هنگام شروع بخش پیش‌نمایش سفارشی‌سازی، متد enqueue_preview_scripts() را صدا بزند.
public function enqueue_preview_scripts() {
این خط متدی را تعریف می‌کند که برای بارگذاری اسکریپت‌ها استفاده می‌شود.
wp_enqueue_script(...);
این خط اسکریپت js را بارگذاری می‌کند که برای پیش‌نمایش زنده استفاده می‌شود. 'custom-preview' نام اسکریپت است و get_template_directory_uri() . '/js/custom-preview.js' مسیر فایل js را مشخص می‌کند.
new My_Customizer();
این خط شیء جدیدی از کلاس My_Customizer را ایجاد می‌کند و در نتیجه تمام متدهای تنظیم‌شده اجرا می‌شوند.