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