ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。
CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。
これで編集者は反映を確認できるのだが、一般閲覧者はわざわざ再読み込みしたり、キャッシュを削除したりするはずはないので、変更が反映されていない崩れたデザインを見ているかもしれない。
わざわざリロードしたりキャッシュを削除したりしなくても変更が確実に反映されるような設定方法を発見した。
wp_enqueue_scripts で CSS、JS の読み込みを管理している場合には、次のようにfunctions.php に記述する。
// 子テーマのstyle.cssを最後に読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
date_default_timezone_set('Asia/Bangkok');
wp_register_style( 'pjax_child', '/wp-content/themes/pjax-blog/style.css', array("leapin-stylesheet"), date_i18n('ndHis', filemtime( get_stylesheet_directory() . '/style.css')));
wp_enqueue_style( 'pjax_child' );
}
array("leapin-stylesheet")は、依存関係で、親のスタイルシートが読み込まれた後に読み込む設定。読込順番の指定。
date_i18n('ndHis', filemtime( get_stylesheet_directory() . '/style.css'))
は、style.css の後に、更新日時のタイムスタンプを付ける設定。
* https://makotoiwasaki.com/wp-content/themes/pjax-blog/style.css?ver=825162621
のようにソースに表示される。
最後のタイムスタンプが変われば別のファイルとして認識されるので確実に読み込まれて変更内容が反映される。
これで変更する度に再読み込みする必要がなくなった。
参考：
