【WordPress】CSSキャッシュ対策のクエリ文字をファイルの更新日時を見て自動でつける

WordPressテーマ作成時、リリース時のCSS反映に時間がかかりますよね。
もうheader.phpに手動でキャッシュ対策のクエリ文字を書くのはイヤだ〜😣ってことで方法を調べました。

指定したCSSファイルの更新日時を自動的に取得して、クエリ文字にします。

💠 function.phpに以下を記述。

function.php

function file_date($filename){
  if (file_exists($filename)) {
    return date('Y-m-d-His', filemtime($filename));
  }
}

💠 header.phpでcssを読み込んでいる箇所に以下を追記。

<?php echo file_date(get_template_directory() . '/更新日時を自動取得したいCSSのパスを書く.css'); ?>

使用例

header.php

<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/style.css?<?php echo file_date(get_template_directory() . '/style.css'); ?>">

出力結果

<link rel="stylesheet" href="http://localhost/hoge/wp-content/themes/theme_name/style.css?2017-02-03-120252">

これでもうCSSを書き換えるたびにheader.phpを書き換えなくてOKです😄
楽ちんになりました😺

参考記事

ありがとうございました🙇
WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする
[Wordpress]Wordpressで修正したCSSを即効でWebサイトに反映させるテクニック