1. TOP
  2. カスタマイズ・小技
  3. 更新時にCSSを即反映させる方法

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

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

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

ワードプレスの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にて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。


応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。

■BTC
1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ
■ETH
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B

ホームページ制作ならRU DESIGN

関連記事

Bootstrap 5 ドロップダウンについて
2025/02/14
Bootstrap 5は、ウェブデザインを迅速かつ効率的に行うための人気のフレームワークです。その中でもドロップダウンメニューは、コンテンツを整理し、ユーザーイ...
Bootstrap 5 ツールチップ(Tooltip)について
2025/02/14
Bootstrap 5のツールチップは、ユーザーが要素にマウスを合わせたときに、その要素に関する追加情報を提供する小さなポップアップボックスです。以下は、ツール...
Bootstrap 5 アラート(Alert)の作成について
2025/02/12
Bootstrap 5のアラートコンポーネントは、ユーザーに通知やメッセージを表示するためのスタイル化されたボックスです。アラートは、情報、成功、警告、エラーな...
Bootstrap5 フォームの作成について
2025/02/12
Bootstrap 5のフォームコンポーネントは、ユーザー入力を受け取るためのさまざまな要素を提供します。テキストボックス、チェックボックス、ラジオボタン、ドロ...
Bootstrap5 ボタン(Button)の作成と使い方
2025/02/12
Bootstrap 5のボタンコンポーネントは、ウェブサイトやアプリケーションでユーザーがアクションを実行するための重要な要素です。ボタンはさまざまなスタイル、...