【WordPress】テーマのstyle.cssを変更したさいに疑似キャッシュクリアさせ、確実に最新状態を閲覧してもらいたいとき!

man in white thobe sitting on gray concrete floor 未分類
Photo by cottonbro studio on Pexels.com
未分類

WordPressのテーマのstyle.cssは、header.php内で以下のようなphpで出力されている。

↓ php


<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">

↓ 出力されるhtmlコード(※例はサイトurlがsample.comで、テーマ名がsample_themeだったとき)


<link rel="stylesheet" type="text/css" href="http://sample.com/wp-content/themes/sample_theme/style.css">

このstyle.cssを変更した場合、普通は.cssのあとに更新日付をパラメータ名にして付与し、style.css?20230728のようにすることで、

ブラウザのキャッシュに残っっているstyle.cssとは別のファイルと認識することで、擬似的にキャッシュをクリアできる。

ただし、先ほどの一つ目のテンプレートタグのように


<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>?20230728">

のように記述してもこれがだめ!

テンプレートタグの挙動なのか、末尾につけた

?20230728

がきれいにパージされて、それがない形のstyle.cssのみが出力されてしまう。

結果、擬似的にキャッシュがクリアされないで、古いスタイルで表示される。

なので、あくまでphpで出力するときはphpで解決できる。以下のように書き換える。


<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">

こうすることで、フロントでも

style.css?20230728

が出力される。(結果、ブラウザのキャッシュクリアをせずとも、ブラウザが別のcssとして更新して表示してくれる。

※余談ですが、そもそも本記事で取り上げたテーマディレクトリ直下のstyle.cssファイルは、カスタマイズして変更しない方が本当は管理上よいです。

なぜかというと、Wordpressの”テーマのアップデート”を行った際に、この、テーマ直下のstyle.cssというファイルが新バージョンに自動更新されてしまい、自分の行ったカスタマイズ内容が全て消えるからです。

以上です!

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    タイトルとURLをコピーしました