WEB制作

WordPressテーマ更新時のcssキャッシュ対策

カラム落ちを恐るチワワ
クライアント
クライアント
すいません、サイトのここを修正してほしいのですが…
webデザイナー
webデザイナー
わかりました!はい、直りました!
クライアント
クライアント
あれ、まだ直ってないですよ
webデザイナー
webデザイナー
あ〜、キャッシュですねw F5押してくださ〜い、すいません〜!

なんて簡単に済めば良いですが、公開前ならともかく、運用中のサイトだとなかなかそうもいきません。
WordPressテーマのcssを編集したら都度読み直すようにしないといけないですね。
いろいろとやりようは考えられますが、私としましてはテーマのVersion情報をクエリでつけるのが良いんではないかなと思います。

理由は、設計として美しいからです。

style.cssにversionナンバーをクエリで追加する方法

WordPressをインストールした際にデフォルトで設定されているテーマ「TwentySeventeen」を見てみますと、style.cssを読み込むときこんな感じになっていると思います。

このstyle.cssについているver=4.9.9というクエリは、WordPress本体のバージョンの数字です。

wp enqueue style関数でstyle.cssを読み込んでいる場合、第4引数$verを指定しないと自動的にWordPressのバージョンが追加されるんですね。

今回はここをテーマのVersionに置き換えていきます。

使うのはwp_get_theme関数です。

wp_get_theme関数でテーマのVersion情報を取得する

細かいことはCodex読めというわけで、

Codexにこういうふうに書いてありました。そのまま使えますね。使います。

wp enqueue styleを使っている場合(子テーマ使用)

プラグインのcssだったりなんだり、読み込むファイルが増えてくると、header.phpじゃなくてfunctions.phpからcssを読み込ませたくなるのが人情というものです。

こんな感じで、子テーマのfunctions.phpに親テーマのstyle.cssと子テーマのstyle.cssを並べて書いてあげると気持ち良いです。

header.phpなどにベタっと書いてある場合

そんなにたくさんcss読み込まないよという場合などは、header.phpにベタっと、さらっと書くこともあります。それはそれで美しいですね。

やることは同じです。

こんな感じです。

style.cssのversionを更新するのを忘れずに

さて、これでstyle.cssのversionがクエリで追加されるようになりますが、肝心のstyle.cssのほうを更新しないと意味がありませんw

style.cssの冒頭にこんな感じのコメントが入っているはずです。

このVersionのところの数字を1.1から1.2にしたり1.15にしたりしましょう。

とりあえずこれをやっておけば、「更新されてないんですけど!」という声は聞かなくて済むかと思われます。

それでは皆さま、良いWordPressライフをお過ごしください。

ABOUT ME
ヒカセン
ヒカセン
イーガオでweb制作をしています。どちらかというとエンジニアよりもデザイナー寄り。自転車の交通マナーにうるさい。