Hatena::ブログ(Diary)

システム開発と英語勉強の日々

2013-06-18

[]Wordpressで修正したCSSを即効でWebサイトに反映させるテクニック

最近、Wordpressを使用する機会が多くなったのでWordpressネタも少しずつ投稿していこうかなと思っています。。
f:id:cobolty999:20130618095522j:image

今回はCSSを即座にWebサイトに反映させる技術です。

WordPressでスタイルシート(style.css)を編集したあと、Webサイトに確認しにいっても
変更個所が確認できないことありますよね。

これは、ブラウザがcssのキャッシュファイルを保持しているために、修正前のCSSファイルを見てしまうからです。
ブラウザでキャッシュを全部クリアしたりすれば、解決するのですがいちいちCSSを変更するたびにやるのもめんどくさいですよね。

そういうときは、header.phpソースコードを下記のように修正してみてください。

header.php

■修正前

<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />


■修正後

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


何をやっているかというと、cssのファイル名の後ろにタイムスタンプ(クエリ情報)を付加しています。
style.css?1301234568

このようにクエリ情報を付加することで、最新のcssファイルを見に行くので古い情報が反映されることがなくなります。

だんべぇだんべぇ 2013/11/01 15:28 やりたかったことが出来ました。CSSの変更がなかなか反映してくれなくて困っておりました。あざーす

cobolty999cobolty999 2013/11/19 10:07 だんべぇさんコメントありがとうございます。

あいねあいね 2014/01/30 10:51 助かりましたー!
キャッシュを消去しても変更が反映されなくて困っていましたが、ソースコードの修正で一発でした♪ ありがとうございます!

cobolty999cobolty999 2014/01/31 22:39 あいねさん
コメントありがとうございます^^

超初心者&#10084;超初心者❤ 2014/05/28 13:46 すごいです!!いろいろ試しまくっても全然ダメで困り果てていましたが、一気に解決です!
感謝です〜!!!

onanistonanist 2014/10/14 21:23 すごすぎる!まさにこれではまってました。感謝感謝です!

野獣先輩野獣先輩 2015/01/20 13:50 まさに困ってるところでこちらの内容を見させていただき完全解決しました!
ありがとうございます〜

cobolty999cobolty999 2015/01/20 20:44 >超初心者❤さん
ありがとうございます。
> onaさん
あっざーす
> 野獣先輩さん
解決されて、何よりです^^

zen73zen73 2016/05/09 02:24 CSSの編集が即座に反映したのを見た時の嬉しさといったら…,ありがとうございます。
wordpress初心者であっても,cobolty999さんのような方がいらっしゃるから,これからの難題も乗り越えていけそうな気持にさせていただいております。

cobolty999cobolty999 2016/05/14 08:08 zen73さん、メッセージありがとうございます
お役に立てて、うれしいです

CrazyPopinaCrazyPopina 2017/02/03 10:13 ためになりました。ありがとうございます。

kiko-corobekiko-corobe 2017/04/26 11:07 ありがとうございました!!ずっと悩んでたので解決できて助かりました!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/cobolty999/20130618/1371516774


Connection: close