更新時に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のように書き換えて使用してください。

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本　Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。