iPhone6とWordPress情報を中心に、あなたの生活・知識を向上させるサイト
2014/05/03
サイトデザインを変更するためにCSS（カスケード・スタイル・シート）を修正。
ワクワク気持ちでサイトを確認…んっ？？変更されてないじゃんΣ(ﾟдﾟﾉ;)ﾉ
あなたのファンの方がサイトを再訪問してくれても、せっかくの変更が反映されていない！
こんな経験はありませんか？そんなモヤモヤは終わりにしましょう。
CSSを変更したらスグにサイト反映されるように設定してしまいましょう。
サイトの大切な情報を修正するので必ずバックアップをとってから作業してください。
photo credit: Alex E. Proimos via photopin cc
スポンサーリンク
photo credit: laRuth via photopin cc
ブラウザの仕様により、一度閲覧したサイトの情報をパソコン内に保存します。そして２回目以降は全てのデータをサーバーからダウンロードせずにパソコン内のデータを参照する事により表示速度を速くします。これがキャッシュと呼ばれるものです。
CSS（カスケード・スタイル・シート）を更新保存したとしても、閲覧しているパソコンがCSSが修正された事がわからないのでパソコン内のデータを読み込んでしまいます。
つまりCSSを変更した時にブラウザに対して『CSSを変更したよ』と伝えられればいいわけです。どうすれば良いのか？簡単に言えばパソコン内に保存したデータとは違うデータになっていますよ。という事を伝えられればいいわけですね。
それを実現させる方法は、修正するごとに読み込むCSSの名称を変更すればいいんです。
『そんなの面倒くさすぎ！！』
ごもっともです^^;
という事で、今回はCSSを修正するたびに自動で名称を追加してくれるようにstingeを変更する方法をご紹介します。
ちなみにボクが使っているのは【stinger3ver20131016】ですが【STINGER3_ver20130327】でも同様の手順で変更可能です。
他のバージョンでも応用が可能だと思いますが、修正等は必ずバックアップをとってから修正してください。
今回変更する箇所は、
《WordPress管理画面》⇒《外観》⇒《テーマ編集》をクリックします。
まず修正するコードは［ヘッダー（header.php）］にあります。
|
1 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /> |
を
|
1 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" /> |
に変更します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!---css切り替え---> <?php if(is_mobile()) { ?> <link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" /> <?php } else { ?> <meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /> <?php } ?> <?php wp_head(); ?> </head> |
↑コレが
|
1 2 3 4 5 6 7 8 9 10 11 |
<!---css切り替え---> <?php if(is_mobile()) { ?> <link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" /> <?php } else { ?> <meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" /> <?php } ?> <?php wp_head(); ?> </head> |
このようになります。黄色ラインが変更箇所です。
パソコン用のみで良ければモバイル用CSSを修正する必要はありません。モバイル用CSSを即時反映させたい場合は以下も実施してください。
パソコン用CSS修正箇所の少し上にある
|
1 |
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" /> |
を
|
1 |
<link rel="stylesheet" href="<?php bloginfo('template_url'); echo '/smart.css?' . filemtime( get_stylesheet_directory() . '/smart.css'); ?>" type="text/css" media="all" /> |
に修正します。
パソコン用とモバイル用CSS両方を修正した場合は
|
1 2 3 4 5 6 7 8 9 10 11 |
<!---css切り替え---> <?php if(is_mobile()) { ?> <link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" /> <?php } else { ?> <meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /> <?php } ?> <?php wp_head(); ?> </head> |
↑コレが
|
1 2 3 4 5 6 7 8 9 10 11 |
<!---css切り替え---> <?php if(is_mobile()) { ?> <link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="<?php bloginfo('template_url'); echo '/smart.css?' . filemtime( get_stylesheet_directory() . '/smart.css'); ?>" type="text/css" media="all" /> <?php } else { ?> <meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" /> <?php } ?> <?php wp_head(); ?> </head> |
手順は以上となります。
この手順によって【filemtime】という関数が追加されます。これはファイルの更新時間を取得する関数なのです。つまりCSSの名称の後にCSSを修正した時間が追加される事になります。
上記修正作業後にページのソースを確認するとスタイルシートの名称の後に【?○○○○○○○○】○は数字が追加されます。
↓このようになります
【style.css】の後に【?1381161540】が付いていると思います。この数字の羅列がファイルを更新すると自動で付加されます。
今回の作業でCSSを修正したらスグにサイト反映されるようになり、サイトの修正作業がラクになります。些細なことですが、一度変更しておけば今後もモヤモヤが少しは解消されるかと思います。
また元に戻したいのであれば、上記の逆で簡単に戻せます。
スポンサーリンク
少しづつWordPressでのサイトの更新に慣れてきた@livett_1です。 …
最強の純国産無料WordPressテーマ【STINGER】の『SNSボックス』（ …
ん～何かサイトの表示スピードが遅い気がする！ でもなぜか分からない。立ち上げたば …
インターネット閲覧の際、パスワードやID管理はどうしてますか？ まさか同じパスワ …
769gで最軽量のノートパソコンNEC《LaVie Hybrid ZERO》を約 …
【iPhone】の操作の快適さは日に日に感じている@livett_1です。 さて …
パソコンについて詳しい事は分からない。でも一度使ったらその快適さに驚愕。 ノート …
『おわっっっ～～Σ(ﾟдﾟﾉ;)ﾉ頭がクラクラする～』 ファイテンの店舗で【RA …
えっ！！ メインアドレスとして使用しているGmailに2014/4/29付けであ …
パソコンのセキュリティソフトは何を使っていますか？ あらゆるセキュリティの総合満 …
Comment
[…] ヘッダー部分の下記のところを変更したら、解決した。お知恵を拝借したのはここ。管理人さんありがとう。 […]
[…] 今回参考にさせて頂いたサイトは、livet1.com様です。（本当に自分はこの記事を見つけたおかげで助かりました） […]
[…] CSSを変更しても表示が変わらない。自動的にスグ表示を変更させる設定方法。【STINGER改造】 […]