جلوگیری از کش شدن فایل های CSS و JS در محیط توسعه وردپرس

اگر توسعه دهنده قالب یا افزونه وردپرس باشید ۱۰۰ درصد با این مشکل روبرو شده اید که مرورگر وب به جای نمایش آخرین تغییرات فایل های جاوا اسکریپت و CSS(از منبع اصلی) آنها را از حافظه کش خود بارگذاری کرده و نمایش می دهد، در نتیجه برای حل مشکل فوق مجبور می شوید از CTRL + F5 استفاده کنید.

برای بررسی این موضوع به تب Network در ابزار توسعه دهنده مرورگر(Developer Tools) مراجعه کنید، تصویر زیر نشان می دهد که مرورگر وب فایل های CSS را از کش خود فراخوانی کرده است.

تب network در مرورگر وب

 

شکی نیست که حافظه کش در افزایش سرعت یک وب سایت تاثیرگذار است، اما می توانیم این مکانیزم را در محیط توسعه(Development) نادیده بگیریم. برای اینکار باید تغییرات لازم را در پارامتر چهارم(ver$) توابع wp_enqueue_script و wp_enqueue_style اعمال کنید.

wp_enqueue_style( string $handle, string $src = '', array $deps = array(),
                   string|bool|null $ver = false, string $media = 'all' )

wp_enqueue_script( string $handle, string $src = '', array $deps = array(),
                   string|bool|null $ver = false, bool $in_footer = false )

 

قابل توضیح نیست که اسکریپت های پروژه را در ساده ترین حالت ممکن به صورت زیر در فایل functions.php فراخوانی می کنیم.

function my_theme_scripts() {
    wp_enqueue_script( 'custom-js', get_theme_file_uri('/js/custom.js'), array('jquery'), '1.0.0', true );
    wp_enqueue_style( 'main-style', get_stylesheet_uri(), null, '1.0.0' );
}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

 

همانطور که ملاحظه می کنید در آرگومان چهارم مقدار “۱٫۰٫۰” به عنوان شماره نسخه(Version Number) مشخص شده است، مرورگر وب ابتدا فایل ها را از وب سرور دانلود خواهد کرد، اما دفعات بعدی دیگر اینکار را انجام نمی دهد، چرا که شماره نسخه همچنان “۱٫۰٫۰” است. در این وضعیت باید به ازای هر تغییری که در سورس اعمال می کنید این شماره نسخه را هم تغییر دهید تا مرورگر وب آخرین نسخه را از سرور دریافت کند، اما نیازی نیست که اینکار را به صورت دستی انجام دهید، توابع زیر تغییر ورژن را انجام می دهند:

  • تابع ()microtime
  • تابع ()time
wp_enqueue_script( 'custom-js', get_theme_file_uri('/js/custom.js'), array('jquery'), microtime(), true );
wp_enqueue_style( 'main-style', get_stylesheet_uri(), null, microtime() );

 

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

برای حل این مشکل بهتر است از نمونه کد زیر استفاه کنید، در این مثال فرض کردیم مد خطایابی(WP_DEBUG) فقط در سرور تست فعال است.

define ( 'VERSION_NUMBER', '1.0.0' );

function set_Version_Number() {
  if ( WP_DEBUG ) {
      return microtime();
  }
      return VERSION_NUMBER;
}

function my_theme_scripts() {
    wp_enqueue_script( 'custom-js', get_theme_file_uri('/js/custom.js'),
                          array('jquery'), set_Version_Number(), true );
    wp_enqueue_style( 'main-style', get_stylesheet_uri(), null, set_Version_Number() );
}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

 

حالا کافی است در هنگام ارسال تغییرات نهایی ثابت VERSION_NUMBER را تغییر دهید تا کاربران آخرین نسخه را مشاهده کنند. در انتها پیشنهاد می کنیم مطلب آموزشی روش صحیح استفاده از jQuery در وردپرس و چگونه خطاهای وردپرس را ردیابی کنیم؟ را مطالعه فرمائید.

نظرات و سوالات کاربران

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *