「ワードプレス」CSSの読み込み・CSSが反映されない!?改善策【スーパーリロード等】

カテゴリー:WordPress

以前の投稿で、Bootstrap3のnavbarにリンクを追加したのですが、その時にサイトを作っているとよく発生する「CSSが反映されない」現象が…今回はCSSが反映されない時の対処法を3パターンをまとめてみます。

・以前の投稿はこちらから


No Image

「CSS」Bootstrap3のnavbarをカスタマイズ!!ulを均等にする方法等【Bootstrap3】

ついに、このブログも投稿数が100を超えてきたので、headerの機能を少し追加しようと思い追加しました。CSSのフレームワーク「Bootstrap3」を使用しているので、ほとんどBootstrap3...

ウェブブラウザの(Chrome)スーパーリロードで対応。

通常のリロードだとCSSの情報などがブラウザにキャッシュされていて、更新しても反映されないのですが…

なんと、スーパーリロード

だとキャッシュコンテンツを無視して現在のページを更新することができます!!

私は、基本的にPCでのブラウザはChromeを使用しています。ということで、Chromeでのスーパーリロードのキーボードショートカット!!

Chromeのキーボードショートカット

Windows / Linux:「Shift+F5 または Ctrl+Shift+r」

Mac:「⌘command + shift + r」

公式:その他のChromeのキーボードショートカット一覧はこちらから

続いて、CSSなどを変更後にさらっと確認するだけの使用頻度のSafariもキーボードショートカット一覧を確認してみたところ、スーパーリロードっぽいのが見当たらない…

私は、Safariで表示を確認する時は、「プライベートブラウズ」で確認しているので気にしことがなかったですが…

そういえば、iPhoneのSafariもスーパーリロードがないので、同じく「プライベートブラウズ」で確認してます。

公式サイトをしっかり探せばあるのか…

公式:Safariのキーボードショートカット一覧はこちらから

1パターン目ウェブブラウザ(Chrome)のスーパーリロードで対応でした。

そもそもの読み込み方法を変更する(PHP編)

CSSを読み込む時に、PHPのfilemtime関数でファイルの更新時刻を取得して、ファイル末尾にタイムスタンプを追加してあげる方法です。

CSSのファイルを更新してアップロードする度にファイル末尾のタイムスタンプが変更されるので、キャッシュでCSSが反映されないということがなくなります。

ファイル末尾にタイムスタンプをつけてあげると、デザインを更新中でも公開しているサイトは反映がされないということがなくなるので安心ですね。

    // $filenameはファイルへのパスを渡します。
    function le_file_date($filename)
    {
        if (file_exists($filename)) {
            echo date('YmdHis', filemtime($filename));
        } else {
            echo '404!!';
        }
    }

こんな感じの関数を作成してあげて、読み込む時に使用するのが良いのかなと思います。

<link rel="stylesheet" href="/assets/css/index.min.css?date=<?php le_file_date("assets/css/index.min.css"); ?>"/>

参考:PHP マニュアル

2パターン目そもそもの読み込み方法を変更する(PHP編)で対応でした。

そもそもの読み込み方法を変更する(WordPress編)

WordPressでは、関数「wp_enqueue_style」にて、外部CSSを読み込む方法です。

その方法のパラメータにタイムスタンプを追加してあげて、「そもそもの読み込み方法を変更する(PHP編)」と同じようにする方法です。

抜粋ですが、functions.phpのwp_enqueue_styleをしているあたりに追加してる想定です。

    // $filenameはファイルへのパスを渡します。
    function le_file_date($filename)
    {
        if (file_exists($filename)) {
            return date('YmdHis', filemtime($filename));
        } else {
            return '404!!';
        }
    }

    $date = echo_file_date("assets/css/index.min.css");

    wp_enqueue_style('index-css', get_home_url() . '/assets/css/index.min.css', false, $date);

3パターン目そもそもの読み込み方法を変更する(WordPress編)で対応でした。

これでもう、CSSの読み込み・CSSが反映されないで悩むことはなさそうです!!

特に、「スーパーリロード」は、かなりお手軽ですし、楽で良い方法ですよね。おすすめです。


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。