ワードプレスの正しいスタイルシートの指定方法(キャッシュ対策)
標準的なテンプレの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タイムスタンプ」という形式での取得なので、意味不明な数字です。
スタイルシートを更新する度に数字が変わります。
--
ここはテンプレとして基本設定。
やっておくと幸せになれます。
是非ご感想・ご指摘等をください。