Web Design

How to automatically delete cache when updating WordPress website

強力すぎるブラウザキャッシュを自動で削除

Hi there.
I’m Satou, a Web/App/UI designer.

I’m going to write about how to automatically remove cache when updating WordPress websites.

If you are suffering from too powerful cache of browsers (especially Safari and Chrome for mobile) during website update operations, please read this.

We want to eliminate “It hasn’t changed” .

When you change the wording or images on a website at the request of a client, and ask the client to check the test environment.

client
client
It hasn’t changed.

We sometimes receive a call from the client.
Each time.

Sato
Sato
We think your browser cache is showing.
Please clear your cache and check again.

The response is a series of replies with the cache clearing method, which is no longer an exaggeration.
If you are a designer, coder, or engineer involved in website operation or updating, you have probably had this experience once or twice.

In the first place, it is a little bit rude to the client to ask them to delete the cache every time they check the update work.
In addition, the caches of mobile browsers such as Safari and Chrome are too powerful to be deleted easily, and there are cases where the client has to go to the trouble of checking the site in private mode, which is troublesome.
This is also a problem that needs to be solved in terms of wasted man-hours.

Furthermore, there is a possibility that there are general users who view old information in the cache, not only when checking for updates, but also among actual users.
This is very unacceptable.

Safari, Chrome’s too powerful cache for mobile

This exchange occurred again the other day when I asked a client to confirm a certain website update job.

client
client
After deleting history and cache, and viewing in private browse, somehow it was displayed normally in safari. but still no improvement in chrome.
I’m not saying it’s a one-shot deal, but is there any way to get it to show up quickly?
Sato
Sato
Well, the only way is to clear cache on the browser side. Chrome on mobile, can’t I clear the cache?
client
client
I tried clearing the cache and history of Chrome on mobile, but no luck. I could see the incognito mode.
I could see the incognito mode.

I have been working with this client for a long time and they understand that sometimes changes are not updated in the cache, so I don’t need to tell them to clear the cache.

But even so, we were troubled by the fact that the content was not being updated.

[CSS] Forcibly delete browser cache on the website side.

This method is not properly “deleting the cache,” but rather “reading new files without reading the cache”.

This is a way to get rid of problems caused by the CSS cache, such as “The text color hasn’t changed” or “The image is displayed bigger (smaller)”.

Append any string (version number, etc.) to the CSS call file name

By adding a string (such as a version number) to the end of the CSS call file name, you can clearly indicate to the browser that the CSS has changed.
Like this ↓↓


<link rel="stylesheet" href="<?php bloginfo('template_directory') ? >/style.css?20220731210800">

In the above example, the year, month, date, minute, and second are given.
When I tried it, it did indeed update properly and reflect the changes I made.

I see! Clever!
I used this article ↓ as a reference.

Since this method involves manually changing static descriptions, it can be implemented even for statically created websites that are not WordPress-based websites.

However, with this method, after making some changes to the CSS, you have to make changes to the caller file as well, which is quite tedious.
Wouldn’t it be great if this could be done automatically?

Automatically add any string (version number, etc.) to the name of the CSS caller file by crafting it in functions.php

From here on out, we are assuming WordPress.
For a static HTML + CSS site, you would use the manual version mentioned above.
There may be an editor that does that automatically, or it may be given automatically on deployment depending on the settings in the development environment, but I’m not sure.
If you are interested, please check it out.

Now, let’s go.
Add code to functions.php to “Get the modification date and time of the CSS file and automatically add it to the caller’s file name“.
In other words, this is a way to fully automate the aforementioned method.
It is the best.

If you put something like this in functions.php


function my_update_styles( $styles ) {
  $mtime = filemtime( get_stylesheet_directory() . '/style.css' );
  $styles->default_version = $mtime;
}
add_action( 'wp_default_styles', 'my_update_styles' );

The output will look like this ↓ in header.php (output by <?php wp_head(); ? >).


<link rel="stylesheet" href="theme directory/style.css?ver=220730133717">

This article ↓ is used as a reference.

Get the modification date and time of style.css with the php filemtime function and assign it to the variable $mtime.
You specify that $mtime in $styles->default_version and output it using the wp_default_styles action hook.
Of course, the ‘/style.css’ part is modified according to the actual environment.

However, when I tried this, unfortunately it did not succeed.
I found several articles that introduced exactly the same code or similar code, so I guess this is probably a popular method, but in my case, even if I tried this method, the modified date was not added to the CSS call file name.

I was curious, so I tried it on several sites, and found that in some cases the modification date was added correctly, and in other cases it was not.

Why was the modification date and time not added to the CSS call file name?

We found that if an external CSS call was written directly in header.php, the update date/time was not given to that section.
So this method is only valid for CSS that is called by the wp_enqueue_style function in functions.php.

So, if you want to use this method to give versions to CSS, you need to set the method of loading CSS in functions.php, not directly in header.php.

Clear cache with wp_enqueue_style after updating CSS

So, while researching to understand the wp_enqueue_style function, I found yet another way to do it.
It is a way to write the wp_enqueue_style function in functions.php to load CSS, acquire the modification date and time, and add it to the file name at the same time.
It’s great.

Use the wp_enqueue_style function shown here.
By the way, “enqueue” is read as “enqueue.


<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ? >

In the website we want to support this time, there is a css directory in the theme directory, and we want to load multiple css files stored in the directory, and some pages use a special page template and we want to load the special css as well. The following is the result.


wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css', array(), date("ymdHis", filemtime( get_stylesheet_directory().' /css/style.css')) );
wp_enqueue_style( 'style2', get_template_directory_uri() . '/css/style2.css', array('style'), date("ymdHis", filemtime( get_stylesheet_directory().' /css/style2.css')) );
if (is_page_template('page_lp.php')) {
	wp_enqueue_style( 'style_lp', get_template_directory_uri() . '/css/style_lp.css', array(), date("ymdHis", filemtime( get_stylesheet_directory().' /css/style_lp.css')) )
}

First argument $handle

The first argument specifies a name to identify each style sheet.

Second argument $src

The second argument specifies the file path of the style sheet.
Basically, it will be stored in the theme directory, so use get_template_directory_uri() or get_stylesheet_directory() as appropriate.

Third argument $deps

The third argument specifies the dependency when using multiple CSS.
In my case, style.css is the original CSS, and style2.css is the CSS I added for operational purposes, and style2.css overwrites the existing classes in style.css, so I specified style for the third argument of style2.
This allows style2.css to be loaded after style.css is loaded.
If no dependency is needed, write “array()” instead of blank.

Fourth argument $ver

The fourth argument is the key this time.
The filemtime function is used to obtain the CSS update date and time, and the date function is used to specify the format and assign it.

Fifth argument $media

The fifth argument is empty because the default “all” is fine.
If you want to specify it, specify “screen” or “print” or whatever you want.

The output is shown here.


<link rel='stylesheet' id='style-css' href='theme directory/css/style.css?ver=220712082800' media='all' />
<link rel='stylesheet' id='style2-css' href='theme directory/css/style2.css?ver=220730133530' media='all' />
<link rel='stylesheet' id='style_lp-css' href='theme directory/css/style_lp.css?ver=220730133717' media='all' />

Excellent. The best.
I made a few random changes to see how it looked and the updates were immediately reflected without the cache showing up.
Of course, the mobile versions of Safari and Chrome updated as well!
It feels good….

I used this article as a reference.

[Images] Force deletion of browser cache on the website side.

For images, as with CSS, caching can be avoided by adding a version number at the end of the file name to clearly indicate that the file has changed.
In other words, for an image file name in the img tag, use the


<img src="theme directory/img/banner.png?ver=220731164325">

This means that the update date and time are given as a version in the form of something like

Of course, you can manually add the string ?ver=220731164325, etc., but we would like to save as much extra work as possible.
However…
Images are a little different from CSS.

  • CSS specifies the target files, but in the case of images, all images stored in the image directory are targeted.
  • CSS is output by <?php wp_head(); ? > but images are static in theme files/posts/fixed pages.

It seems quite challenging.
After a bit of searching, I couldn’t find any article that introduces a measure that would satisfy this requirement.

When the page is about to be displayed, the img tags in the page are identified, the corresponding image file is looked at, the modification date and time are acquired, added as a string at the end of the img tag file name, and the page is output.

This process is quite heavy.
This is even more so if the page contains many images.

Ideally, when an image is updated, the date and time of the update would be added as a version number to the file name of the corresponding section of the page where the image is used, instead of processing the page when it is displayed, but this seems to be too difficult.

Manually adding an arbitrary string (version number, etc.) to the file name of an img tag

For the time being, we will give up on the automatic processing, and will do the process of “adding an arbitrary string (version number, etc.) to the file name of the img tag” manually.
This is better than the method of “updating the image with a different file name instead of replacing it with the same file name.

This method can be done even if the site is not a WordPress site

This method of adding a string to the end of the filename itself can be used on any site, even if it is not a WordPress site.
You can use this method for any site as long as it is static, and if you have knowledge of programming, you can also use it for dynamic output.

Be careful if you are using image optimization plug-ins

Be careful if you are using an image optimization plugin for WordPress.

If you are using a plugin that compresses uploaded images or converts them to webp and displays them, the optimized images may not be replaced even if you replace the original images.

If you are using such a plugin, remember to re-optimize the image after replacing it.

In this article, I wrote about How to automatically delete the cache when updating your WordPress website.
How was it?
I hope it was helpful for you.
See you next time.