parudou
parudou
parudou
更新日:2018/10/08

ワードプレスの正しいスタイルシートの指定方法(キャッシュ対策)

標準的なテンプレのCSS指定では、実は最悪の事態を招きます。
今は何でもキャッシュ時代なので、昔のやり方は通用しない。
ということで、今すぐにこの指定方法に切り替えてください。

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

これを<head></head>の間に入れます。

このように表示される。

<link rel="stylesheet" type="text/css" href="http://parudou3.com/wp-content/themes/parute/style.css?1538476027">

なぜこうするのか?

URLの最後に「ファイル更新日のパラメータ(?~)」を付け、
スタイルシートを更新したらURLが変わるようにしています。
これにより、キャッシュにより古いスタイルシートを使われることを防ぎます。

スタイルシートはブラウザがキャッシュします。
※訳:一度表示すると、ユーザーのパソコンに保存され、
次回からもその保存したスタイルシートを使います。

ということは、管理人がスタイルシートを更新しても、ユーザーに反映されない。
ここで多くの管理人が発狂したことだろう。

したがって、更新したらURLを変えないといけない。
そのうってつけの方法が、更新日をパラメーターにすることです。
パラメーターは何を付けても取得するファイル自体は変わらないので大丈夫。
(?以降はデータの送信。スタイルシートに無意味な数字を送信しているだけ)

これはもう、サイト作成の基本中の基本。
スタイルシートだけでなく、JSも必ずやります。

ただ、もうスタイルシートを更新しないのであれば、する必要はない。
表示の度に更新日を取得するので、ごくわずかに負荷がかかります。
まぁ、この程度は気にする負荷ではありませんが…

ソースの解説

<link rel="stylesheet" type="text/css"

ここは「スタイルシートへのリンクだよ!」という宣言。

href="<?php bloginfo('stylesheet_url');

スタイルシートがあるディレクトリまでのURLを指定。
ワードプレスは「bloginfo(‘stylesheet_url’)」と書くと、
スタイルシートのパスを表示してくれます。
当サイトの場合は「http://parudou3.com/wp-content/themes/parute/style.css」です。

echo '?' . filemtime( get_stylesheet_directory() . '/style.css');

「echo」はPHPというプログラムのコマンドで、「次の文字を表示する」というもの。
この場合は「?」を表示させます。
「.」は文字の連結。

「filemtime」は「次のパスにあるファイルの更新日を取得する」というコマンド。
スタイルシートの絶対パスを指定しています。
(URLではダメなので、「get_stylesheet_directory()」コマンドを使う)

「Unixタイムスタンプ」という形式での取得なので、意味不明な数字です。
スタイルシートを更新する度に数字が変わります。

--

ここはテンプレとして基本設定。
やっておくと幸せになれます。

是非ご感想・ご指摘等をください。

プロフィール

管理人:parudou
単なるWEBサイト作成マニアです。
底辺法人アフィリエイター。
Twitterはこちら

日記はパルどうSEOブログ

Copyright (c) parudou All Rights Reserved.