web関連

wordpressでcssのキャッシュを消す方法

wordpressでcssのキャッシュを消す方法

お客さんに修正内容を確認をしてもらう際に、「キャッシュを消して確認してね☆彡」と毎回言っていたが自動で消えないかと言われたので調べた備忘録

cssのキャッシュを消す方法

「style.css」の後ろに「?(日付)」をいれるとキャッシュが消えるらしい、詳しい仕組みはわからないけど以下のコードがwordpressで「style.css」のキャッシュを消すコードです。

// 1
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">
// 2
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/style.css'; echo '?' . filemtime( get_stylesheet_directory() . '/css/style.css'); ?>">

// 3(よく使う)
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css?=<?php echo date_i18n('YmdHis'); ?>">
調べていて書き方が複数あったので1と2はメモがてらに書いています。基本僕は「3」を使っている。
調べていた時に「bloginfo(‘stylesheet_url’);」を使っているサイトなんかもあったけど、「bloginfo(‘stylesheet_url’);」は非推奨です。

手動でやる場合や静的サイトはこう

<link rel="stylesheet" href="css/styles.css?20180521" />
html5から「type=”text/css”」は記述しなくても大丈夫らしい、javascriptの「type=”text/javascript”」もいらない

style.cssの読み込み関数について

キャッシュクリア方法を調べていた時に「get_stylesheet_uri()」「get_stylesheet_directory()」「get_stylesheet_directory_uri()」「get_template_directory_uri()」と、style.cssのURLやパスを取得する方法で似たような関数がたくさん出てきて頭がこんがらがったので少し調べました。

以下は出力した場合

get_stylesheet_uri() =
http://sample.com/wp-content/themes/sample_theme/style.css

get_stylesheet_directory() =
/home/sample/www/wp-content/themes/sample_theme

get_stylesheet_directory_uri() =
http://sample.com/wp-content/themes/sample_theme

get_template_directory_uri() =
http://sample.com/wp-content/themes/sample_theme

出力されたコードを見てもらえればわかる通り、「_uri」のついたものはhttp(https)から始まるURLを取得して、「_directory」が付いたものはstyle.cssがあるディレクトリをパスで取得する。

「uri」とはURLの事を指すが、厳密には違うらしい興味があれば…
参考
https://webtan.impress.co.jp/e/2010/03/09/7539
get_stylesheet_uri()
「_uri」なのでstyle.cssのURLを取得できる、「_directory」がないので取得するURLにはstyle.cssが含まれる※注意
get_stylesheet_directory()
「_directory」なのでstyle.cssのあるディレクトリのパスを取得できる
get_stylesheet_directory_uri()
「_directory」で「_uri」なのでstyle.cssのあるディレクトリをURLで取得できる、style.cssはURLに含まれない
get_template_directory_uri()
子テーマ利用時に親テーマのstyle.cssのURLを返す。上3つは子テーマを利用していたら子テーマのURL・ディレクトリパスを返すので扱いには注意

wordpressでstyle.cssを読み込む際はとりあえず以下のように記述しておけば大丈夫だと思う。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css?=<?php echo date_i18n('YmdHis'); ?>">
なんか表示がおかしくなったりしたら出力されるURL・パスに気を付けて上の4つ試して見てください<(_ _)>

一応他にも「wp_enqueue_style()」でcssを読み込みつつキャッシュを削除するのもあるけど長くなるので割愛
どこかで調べて備忘録したい。

以下のサイトが諸々わかりやすいかも

参考

▼WordPressで読み込むCSSやJSファイルにクエリパラメータを付与し、ブラウザキャッシュは有効のまま変更箇所をすぐに反映させる方法。
https://wemo.tech/316

キャッシュ系のプラグインが入ってた時とかは消えるのかどうかまでは見てないけど、多分これで「F5を押してね☆彡」みたいなことを言わなくても済むのかな?
F5を押すかとりあえず「キャッシュの消去とハード再読み込み」でスーパーリロードを意識せずにやってるからキャッシュを抱えて反映が確認できないという現象をあまり意識することがない。
キャッシュが消えているかどうかの確認があやふやな部分もあるので参考程度にしてもらえると助かります。