Giải pháp tốt khi chỉnh sửa css mà không sợ bị lưu cache trình duyệt

Có khi nào bạn chỉnh css, nhưng khách hàng vẫn nhận kết quả cũ, nguyên nhân là do trình duyệt của khách hàng bị lưu cache.

Để xử lý vấn đề đó bạn phải thêm 1 biến đằng sau file css để trình duyệt hiểu đó là file mới và tải lại file css đó, nhưng đó là cách là thủ công và có 1 cách khác nữa là bạn thêm 1 biến random or biến ngày giờ vào sau file css tuy nhiên cách này có một nhược điểm là lúc nào bạn f5 lại thì trình duyệt cũng tải lại file css và js mặc dù file này không có thay đổi.

Và giải pháp tốt sẽ là chỉ thay đổi biến version khi file css hoặc js thay đổi, để làm được điều đó bạn hãy làm theo hướng dẫn bên dưới!

$css_ver = date("ymd-Gis", filemtime( get_stylesheet_directory() . '/assets/main/main.css' )); 
$js_ver = date("ymd-Gis", filemtime( get_stylesheet_directory() . '/assets/main/main.js' )); 

// Load CSS
wp_enqueue_style('main-style-css', get_stylesheet_directory_uri() . '/assets/main/main.css', array(), $css_ver, 'all');

// Load JS
wp_enqueue_script('main-scripts-js', get_stylesheet_directory_uri() . '/assets/main/main.js', array('jquery'), $js_ver, true); 

Trong đó:
filemtime (file modification time): là hàm lấy thời gian chỉnh sửa file
get_stylesheet_directory() . ‘/assets/main/main.css’ : là đường dẫn path tới file css của bạn
get_stylesheet_directory_uri() . ‘assets/main/main.css’: Là đường dẫn url tới file css của bạn
đối với file js cũng làm tương thự như đoạn mã ở trên