Menu
テーマ切り替え

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

wordpress_article_0615_1

ワードプレスの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サイト制作やAIを活かした開発に取り組んでいます。このブログでは、私が実際に試して「これは使える!」と思った技術や、自作の便利ツールをシェアしています。一緒に技術を楽しんでいきましょう!

この記事をシェア:

関連記事