[Simplicity] cssやjsを更新したらすぐ反映されるようにする

背景

キャッシュ対策として以下のような手段がある、ということはわかっていました、が。
https://blog.kuromusubi.com/develop/language/php/20170924-reload-cache

私はWordPressのSimplicity2テーマを使用しているのですが、
wp_head()関数で一気に<head>内に<link>を出力してくれるので、上記の対策を打てずにいました。

しかし、いい加減、スタイルシートやスクリプトを編集した後にいちいちキャッシュを削除することに業を煮やしたので、
WordPressでもキャッシュ対策を導入しました。

これが意外に面倒くさかった…。

解決策

簡単に説明すると、
wp_headで出力されるすべての<link href="http://***/">のURLの末尾に、そのファイルの更新年月を付与します。

あまり細かいところまでデバッグしていないのですが、どうやらうまくいったみたい。(適当)

1. 必要ファイルを子テーマに作成

wp-content/themes/simplicity2-child/に以下のファイルがない場合、
wp-content/themes/simplicity2/からコピーしてくる。

  • header.php

加えて、wp-content/themes/simplicity2-child/に以下のファイルを作成。

  • functions.php (すでにある場合は新たに作成する必要なし)

2. function.phpを編集

wp_head()の内容を編集するための処理を記入。

// ===============
// キャッシュさせない用ファイルパスを返す
// ===============
function noncachefile($filepath){
    if(file_exists($filepath))
        return $filepath . date('?YmdHis', filemtime($filepath));
    else
        return $filepath;
}

// ===============
// wp_head内のファイルにキャッシュ対策を適用する
// ===============
function noncache_wp_head(){
    ob_start();         //出力バッファリングを有効にする
    wp_head();
    $wp_head = ob_get_contents();   // 変数に代入
    ob_get_clean();         // バッファを削除

    // wp_head()の出力内容を区切り文字で分割(ファイルパスを取得するため)
    $wp_head_files = preg_split("/['\"]/", $wp_head);

    // 各ファイルの末尾にキャッシュさせない文字列を追加
    foreach ($wp_head_files as $key => $value) {
        if(strpos($value,site_url())!==false) {
            // wp_head()が出力するパスはURL(http://**)のため、相対パスに変換し、キャッシュ対策パスに置換
            $filepath = noncachefile(str_replace(site_url(),$_SERVER["DOCUMENT_ROOT"],$value));
            // URLに戻す
            $wp_head_files[$key] = str_replace($_SERVER["DOCUMENT_ROOT"],site_url(),$filepath);
        }
    }

    // 分割していたものを元に戻して出力
    echo implode("\"" , $wp_head_files);
    return;
}

wp_head()は戻り値を返すのではなく直接echo()してくれちゃうので、
15~21行目で、いったんそれをバッファとして出力し、変数に保持します。

3. header.phpを編集

1. でコピーしてきた header.phpを編集。
なにも編集していない状態であれば38行目にある、<?php wp_head();?>の部分を、
2.で作成した関数に変更。

<?php //wp_head();?>
<?php noncache_wp_head();?>

参考

  • http://www.flatflag.nir87.com/explode-440#explode-3
  • https://blog.s-giken.net/249.html