【WordPress】CSSを更新しても反映されない時の対処法

ブログのデザインを変更する際、CSSファイルをいじる事が多くなります。WordPressのブログはテーマのCSSファイルに変更を加える事でブログのデザインを変更できます。

しかし、WordPressでブログを運営しているとサーバーへの負担を減らすためキャッシュを使用している場合が多いのでCSSに変更を加えてもブラウザ上で反映されない事が多くあります。

このブログもサーバー上のキャッシュ、CDNのキャッシュ、ブラウザ上のキャッシュを活用しているのでCSSファイルに変更を加えアップロードしても、そのままではキャッシュが消えない限りデザイン変更は反映されません。

CSSを反映させるために、CSSファイルに変更を加える度にキャッシュを全部消していく必要があります。そして、それは結構面倒な作業です。

CSSの更新・変更をすぐに反映させるには？

CSS変更の度にキャッシュを消すのは面倒なので、キャッシュをいじらず反映させる方法を紹介します。

WordPressではPHPが使用できますので、PHPを活用してCSSの更新をすぐに反映させるいい方法があります。

「cssファイルの読み込みタグのURLの後半にタイムスタンプのパラメーターをつける」という方法です。

通常、WordPressのテーマは、テーマ内にある「style.css」を読み込みに行くようにコードが書かれていると思いますが、その部分を以下のように変更します。

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

これで「style.css」移行のURLに「?数値」のパラメータ（クエリ情報）が付きCSSのURLが「style.css?1434636909」といった形になります。

CSSファイルのURLが更新の度に変わるため、ブラウザに強制的に最新のCSSファイルを読み込ませることができます。

WordPressのテーマで複数のCSSファイルを使用している場合は、使用している全てのCSSファイルの読み込み部分を、パラメータを付与するように変更を加えて下さい。

CSSで細かい微調整を繰り返す時には便利な方法なので覚えておくと便利です。

参考URL

ブラウザキャッシュを有効にしつつCSSファイルも更新させる方法【サイト軽量化＆高速化計画】 ｜ WEBデザイン、制作｜カイカデザインwebsite

オンズ » 【WordPress】キャッシュを有効化しつつ［CSS］や［JavaScript］ファイルの変更を確実に反映させる方法。