【SANGO】子テーマのCSS更新時にすぐ反映させるカスタマイズ

SANGO で子テーマの CSS を編集した際に、シークレットモードで確認したり、ブラウザのキャッシュを削除したりしなければ、編集した内容が反映されないのが悩みでした。

自分が見るのであればそれも構いませんが、読者さんはシークレットモードを使ったり、いちいちキャッシュを削除してサイトを閲覧することはまずないと思います。

そこで、更新した内容がすぐに反映されるようにするためにできる方法がないか調べてみると、「タイムスタンプ」というものを style.css の後ろに付けるというカスタマイズがあることを知りました。

参考にさせていただいたのは、以下の記事です。

参考 WordPressでcssの修正を即座に反映する『Simplicity2編』WordPressお試しブログ

上記の記事は「Simplicity2」のカスタマイズでしたが、これを SANGO 用にアレンジさせていただきました。

具体的なカスタマイズ方法

子テーマの functions.php の上部に以下の記述があると思います。

functions.php
//子テーマのCSSの読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'child-style', 
  	get_stylesheet_directory_uri() . '/style.css', 
  	array('sng-stylesheet','sng-option')
	);
}

上記の記述を、以下の記述に丸ごと入れ替えていただけばカスタマイズ終了です。

functions.php
//子テーマのCSSの読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'child-style', 
  	get_stylesheet_directory_uri() . '/style.css?'. filemtime( get_stylesheet_directory().'/style.css' ) , 
  	array('sng-stylesheet','sng-option')
	);
}
注意
functions.php はとてもデリケートなファイルです。バックアップを取ってからカスタマイズするようにしてください。

たったこれだけで、子テーマの CSS を更新時にすぐ反映させることができます。CSS をいじることが多い方は確実に手間を減らせますし、読者さんにも最新の状態で閲覧してもらえるのでぜひお試しください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です