Bloosh Company

Development>WordPress

WordPressのcssを更新したら自動でキャッシュを消してすぐ反映させる方法!

, , ,

WordPressのテンプレートを作成してるときにcssを更新してもキャッシュが効いててすぐ反映されないときがあります。
wp_enqueue_style()関数にバージョンを指定できるのでそれを利用します。
 

※キャッシュについて
ページを開くたびにcssファイルを毎回読み込んでいるわけではありません。一度読み込んだファイルはいったんブラウザに保存されます。バージョンを指定すると、headでの読み込み時に、ファイル名のうしろに数字がつきます。この数字が違うなら、保存されたキャッシュをクリアして最新版を読み込んでくれます。

 

cssの読み込み

functions.phpファイルにこのように指定します。

function my_enqueue_scripts(){

	//基本のスタイルシート (style.css)
	wp_enqueue_style(
		"style", //名前を付ける
		get_stylesheet_uri(), //ファイルの場所
		array(), //これより先に読み込みたいファイルがあれば指定
		filemtime(get_stylesheet_directory()) //バージョン
	);

	//それ以外
	wp_enqueue_style(
		"style-front",
		get_theme_file_uri("/css/front.css"),
		array("style"), //style.cssのあとに読み込む
		filemtime(get_theme_file_path("/css/front.css"))
	);

}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

第四引数のfilemtime()に注目してください。これはPHPの関数で、ファイルの更新日時を取得するものです。更新日時をバージョンとして指定することで、無駄なくキャッシュをクリアすることができます。
 
get_stylesheet_uri() ・・・ style.cssファイルの場所
get_stylesheet_directory() ・・・ style.cssファイルのパス
 
get_theme_file_uri() ・・・ テーマフォルダにあるファイルの場所
get_theme_file_path() ・・・ テーマフォルダにあるファイルのパス
 
uriはインターネット上の住所、ファイルのパスというのはサーバーから見た位置になります。
PHPの関数を使ってファイルの存在確認したい場合などはパスを使用します。
 
今まではこのように

<img src="<?php echo get_template_directory_uri(); ?>/img/1.jpg">

get_template_directory_uri()を使ってたんですが、WordPress 4.7からget_theme_file_uri()get_theme_file_path()が追加されたので、新しくこちらを使ってます。

WordPressのcssを更新したら自動でキャッシュを消してすぐ反映させる方法! #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #functionsphp #PHP #キャッシュ

前の記事>>

游ゴシックの縦書きが揃わないとき!

Tweets by blooshcompany