t__nabe_log

雑多 作業、学習ログ多め。

WordpressのCSSにタイムスタンプを追加して古いキャッシュを読み込まないようにする

WordpressCSSにタイムスタンプを追加して古いキャッシュを読み込まないようにする

PHPの経験もなく、殆どWordPressを触らないので備忘録代わりに残す。

開発環境で問題なく表示されたCSSを本番環境にも適用した後に反映されないことがあるのを解決したかった。 ブラウザでキャッシュを削除したら変更が反映されるのだが、自分のブラウザのキャッシュを削除するのは手間がかかるし、利用者にそれを強いるのは問題外。 WordPressについて調べていると、CSSのURLのクエリパラメータにタイムスタンプを付与することで、CSSの変更の度に再読み込みが行われるようにするのが一般的なようだった。 以下のようにするらしい。

header.phpに追記する方法

【修正前】

<link rel=”stylesheet” href=<?php bloginfo (‘stylesheet_url’); ?>type=”text/css” />

【修正後】

<link rel=”stylesheet” href=<?php bloginfo(‘stylesheet_url’); echo?. filemtime( get_stylesheet_directory() ./style.css’); ?>type=”text/css” />

これで解決したというサイトが多かった。 しかし、自分が保守することになったWordpressのサイトはwp_head関数を通してCSSを読み込んでいた。

  • wp_head関数で読み込んでいるCSSにタイムスタンプを付与する
  • wp_head関数ではメインのCSSは読み込まないように変更してwp_head関数にタイムスタンプ付きのCSSを読み込む処理をフックさせるか

上記2つのどちらかで対応しようと考えた。 とりあえず解決するのが目的で、アプリの開発に戻りたかったので後者の方で進めることにした。

以下のコードをfunction.phpに追記。

// wp_head()ではstyle.cssは読み込まない
function delete_css() {
    // ブラウザのコンソールで読み込まないようにしたいcssのidを確認してwp_dequeue_styleの引数に渡す。
    wp_dequeue_style('sitename-style');
}

add_action( 'wp_enqueue_scripts', 'delete_css' );

// style.cssをタイムスタンプ付きで読み込む関数
function get_timestamp_include() {
  // style.cssのパスを取得
  $styleurl = get_bloginfo("stylesheet_url");  
  //style.cssのタイムスタンプ取得
  $styletime = filemtime( get_stylesheet_directory() . '/style.css'); 
  //タイムスタンプ付きstyle.cssを読み込む
   echo '<link rel="stylesheet" id="sitename-style-css" href="',$styleurl,'?',$styletime,'" />'; 
}
// wp_headにフックさせる。
add_action('wp_head', 'header_stylecss_include');

終わり。