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'); ?>">

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

<link rel="stylesheet" href="css/styles.css?20180521" />

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があるディレクトリをパスで取得する。

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'); ?>">

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

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

参考

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