Menu
テーマ切り替え
ほのぼの情報サイト
ほのぼのゲーム情報GAME PON-POO
無料画像素材

更新時にCSSを即反映させる方法

更新時にCSSを即反映させる方法

ワードプレスのCSSを更新してもすぐに反映されなくて、デザインの確認が出来ないなんてことはありませんか? ブラウザのキャッシュをクリアして確認したこともあるのではないでしょうか?

ブラウザがCSSのキャッシュを保持するので、修正前のファイルを参照してしまいます。 クライアント側で更新した内容を即確認してもらいたい時や、公開中のサイトで更新された内容を表示したいときに、ちょっと役に立つ方法をご紹介します。

テーマなど環境によって違う場合もありますが、header.php内に下記のような記述を探してみてください。

<link href="<?php bloginfo('stylesheet_url') ?>" rel="stylesheet" type="text/css">

それをこのように書き換えてください。

<link href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" rel="stylesheet" type="text/css">

filetimeでファイルの最終更新時刻を取得しCSSに付与させます。これでサイトを開いたときに最新のCSSを読み込ませます。

CSSファイルが別のディレクトリにある場合は /style.cssの部分をcss/style.cssのように書き換えて使用してください。

RU DESIGN
AUTHOR

RU DESIGN

個人でWeb制作をしています。一般からナイト系まで幅広く対応し、実践的なノウハウや自作ツールをこのブログで公開中。制作のご相談もお気軽にどうぞ。

この記事をシェア: