WordPress allows the browser to automatically load the latest CSS and JS files (without refreshing the cache)

When developing a WordPress topic, if the CSS and JS files of the topic are frequently updated but the topic is online, how does one allow a visitor's browser to obtain the latest CSS and JS files instead of waiting for the browser to delete the cache? The following describes a simple method.

Version number parameter
I believe that kids shoes with development experience all know that version number parameter control is used. That is, for example, the path code of the css file is as follows:

Http://xxx.com/wp-content/themes/Devework/style.css

If the css file is updated, you can add the version number, that is, change:

Http://xxx.com/wp-content/themes/Devework/style.css? V = 2

However, in WordPress, it is too tired to manually update the version number every time it is modified. How to make the version number automatically updated (that is? V = the number next to it is automatically updated )?

Timestamp
As you may know, use the timestamp instead of the version number. In WordPress, it is easier to use timestamps instead of version numbers.

Http://xxx.com/wp-content/themes/Devework/style.css? V = <? Php echo time () ;?>

Or:

Http://xxx.com/wp-content/themes/Devework/style.css? V <? Php echo filemtime ($ pathToCSS);?> "/>

In WordPress?
Anyone who has experience developing WordPress themes knows that the path of styl.css files that use themes in WordPress directly uses functions. <? Php bloginfo ('stylesheet _ url');?> In this way, the path code in header. php is as follows:

<Link rel = "stylesheet" href = "<? Php bloginfo ('stylesheet _ url');?> "Type =" text/css "media =" screen, projection "/>

You can also manually modify the path, but we do not recommend this method. You can hook the wp_enqueue_style () function.

Add the following code to the topic's functions. php file to add the timestamp version number to the styl.css file:

Add_action ('WP _ enqueue_scripts ', 'Add _ styles ');
Function add_styles ()
{
$ Css_file = get_stylesheet_directory (). '/css/style.css ';
Wp_enqueue_style ('css-file', get_stylesheet_directory_uri (). '/css/style.css', NULL, filemtime ($ css_file ));
}

JavaScript files can be copied according to the above.

In this way, we can ensure that each access by the browser is the latest css and js files, rather than using the cache.

In fact, a random parameter is included behind css or js. Of course, we can also set the webpage not to be cached.

Method 1: Add the following meta tag to the

<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Meta http-equiv = "X-UA-Compatible" content = "IE = 8">
<Meta http-equiv = "Expires" content = "0">
<Meta http-equiv = "Pragma" content = "no-cache">
<Meta http-equiv = "Cache-control" content = "no-cache">
<Meta http-equiv = "Cache" content = "no-cache">

Enable Cache-Control in HTTP1.1 to Control the page Cache or not. Here we will introduce several common parameters:

No-cache, browser and cache server should not cache page information;
Public, the browser and cache server can cache page information;
No-store, request and response information should not be stored in the Disk System of the other party;
Must-revalidate: for each client request, the proxy server must want the server to verify whether the cache is out of date;
Last-Modified: only the Last generation time of the page, in GMT format;
Expires period limit, in GMT format, indicates that the browser or cache server must obtain new page information from the real server after this time point;