【WordPress】cssとjsのキャッシュクリアする方法

WordPressサイトで修正したのにも関わらず、キャッシュが効いてしまい修正が反映されていないことがよくあります。

修正後に、提出先の上司やクライアント側にキャッシュクリアをお願いするのはナンセンスなので、ここでは、WordPressでcssやjsを変更すると、自動でキャッシュクリアされて、変更が反映されるソースを紹介します。

cssのキャッシュクリア方法

パターン1 style.css で読み込まれてる場合

style.cssの後に <?php echo date(‘YmdHis’); ?> を記述する

<link rel="stylesheet" type="text/css" href="css/style.css?<?php echo date('YmdHis'); ?>"/>
<!-- ↓のように書き換える -->
<link rel="stylesheet" type="text/css" href="css/style.css?<?php echo date('YmdHis'); ?>"/>

パターン2 <?php echo get_stylesheet_uri(); ?> で読み込まれてる場合

filemtime関数を利用する

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<!-- ↓のように書き換える -->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">

cssのキャッシュクリア方法

src=”script.js の後ろに ?ver=日付とクエリ文字を付与します。

<script src="script.js"></script>
<!-- ↓のように書き換える -->
<script src="script.js?ver=20220418"></script>