テーマ独自のCSSおよびJSの更新にはブラウザキャッシュ対策が必要

テーマで読み込んでいるCSSやJSの内容を修正して更新した際にブラウザキャッシュによって更新内容が読み込まれないという問題があったので、その対策が必要ですよと言う話。

wp_enqueue_style('hoge-style' , get_stylesheet_directory_uri() . '/css/hoge.css?20190612');
wp_enqueue_script('hoge-js' , get_stylesheet_directory_uri() . '/js/hoge.js?20190612');

テーマのバージョンをきちんと更新しているなら

$my_theme = wp_get_theme();
$theme_version = $my_theme->get( 'Version' );
wp_enqueue_style('hoge-style' , get_stylesheet_directory_uri() . '/css/hoge.css?' . $theme_version);
wp_enqueue_script('hoge-js' , get_stylesheet_directory_uri() . '/js/hoge.js?' . $theme_version);

とかでもいいかもだ。

修正内容によっては深刻なバグに発展する可能性もあるので注意したいポイント。

2020-03-02追記

最近のやり方はこう。ファイルの更新日時をバージョン番号に使うので確実。

function enqueue_theme_styles_and_scripts()
{
    $styles = array(
        'bootstrap' => '/assets/bootstrap/css/bootstrap.min.css',
        'styles' => '/assets/css/styles.css',
    );

    foreach ($styles as $name => $path) {
        wp_enqueue_style($name, get_template_directory_uri() . $path, array(), filemtime(get_template_directory() . $path));
    }

    $scripts = array(
        'jquery' => '/assets/js/jquery.min.js',
        'bootstrap' => '/assets/bootstrap/js/bootstrap.min.js',
    );

    foreach ($scripts as $name => $path) {
        wp_enqueue_script($name, get_template_directory_uri() . $path, array(), filemtime(get_template_directory() . $path), true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_theme_styles_and_scripts');