EC-CUBEでCSSの変更をキャッシュさせない方法

EC-CUBEでCSSの変更をキャッシュさせない方法

EC-CUBEでCSSの変更をキャッシュさせない方法

Web制作をやっていると、以下のようなやり取りをすることってないでしょうか。

制作者「サイト変更したから確認してねー」
クライアント「変わってないよ・・・」
制作者「キャッシュが原因だからブラウザのキャッシュをクリアしてね」
クライアント「あー変わった変わった」

EC-CUBEの場合、ブラウザじゃなくてテンプレート側のキャッシュが原因の時もあるので、テンプレートのキャッシュをクリアして対応することもあります。

キャッシュ自体はサイトの表示速度を速めてくれたり、サーバーの負荷を軽減してくれるのですが、たまに邪魔をしてくるのも事実です。

上記のような無駄なやり取りが発生しないように、いちいちキャッシュをクリアしなくてもCSSの変更が反映されるようにする方法をご紹介したいと思います。

EC-CUBEでCSSの変更をキャッシュさせない方法

「/data/Smarty/templates/テンプレート名」の中にsite_frame.tplというファイルがあります。site_frame.tplの中に、以下のような記述があります。

<link rel="stylesheet" href="<!--{$TPL_URLPATH}-->css/import.css" type="text/css" media="all" />

import.cssでは、block.cssやcontents.cssなどのテンプレートで使われているCSSファイルをインポートしています。このCSSの読み込みにパラメータを付けてあげることで、import.cssがキャッシュされなくなります。

<link rel="stylesheet" href="<!--{$TPL_URLPATH}-->css/import.css?ver=<!--{$smarty.now}-->" type="text/css" media="all" />

import.cssの後ろに「?ver=<!–{$smarty.now}–>」を追加していますが、$smarty.nowはタイムスタンプが出力されるため、サイトをリロードする度に値が変わります。

パラメータの値が変わることで、同じimport.cssであっても、ブラウザからは別のファイルとして認識されます。これにより、CSSがキャッシュされなくなるというわけです。

あとがき

クライアントによっては、1度キャッシュのクリアについて説明すると、以後サイトの変更が反映されない時はご自身でキャッシュのクリアを試してくれる方もいます。ですが、大抵のクライアントがWebの知識があるわけではないので、なかなか理解してもらえないことの方が多いです。

上述した内容のように、こちらで対応できることはできる限りやってあげた方が親切ですね。

この記事が気に入ったら
いいね!してね♪

Twitter で

One thought on “EC-CUBEでCSSの変更をキャッシュさせない方法

  1. アキラ

    ECCUBE 2系でこの方法を試してみたところ import.css 自体は再読み込みされるのですが、import.css の内部で@import 指定してある他の CSSファイル (common.css など) は再読み込みされませんでした。
    import.css は php ではないのでこのページの方法は使用できませんし、別のよい方法がないか模索しています。

    import.css の内容サンプル ————-

    @import url(“./common.css”);

    —————————————————

コメントを残す

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