menu

【WordPress】キャッシュ対策について

2021年5月29日 WordPress

今回はWordPressのキャッシュ対策について説明していきます。

なお、今回の内容はやや難易度高めの記事になっているのでご了承ください。

キャッシュ対策

前回、ローカルでWordPressのテーマ開発ができるlocal by flywheelについて説明したと思います。

僕がWordPress開発をするときもlocal by flywheelを使用しています。

ローカルで色々とテーマを弄った後、本番公開しようと思い、テーマをアップロードしたところ、ページがぐちゃぐちゃになってしまった経験があります。めちゃくちゃ冷や汗出ましたが、バックアップとっておいたおかげで復旧できました。

なぜ起きてしまったかというと、キャッシュが原因です。

「キャッシュ」とは、一度見たサイトのデータをパソコンの中に保存して、速く表示できるようにする仕組みです。

つまり、新しく更新したCSSではなく、古いCSSのことをずっと表示させていることになります。

ブラウザによってはシークレットモードで起動すればキャッシュを削除することはできますが、一般人にはあまり馴染みのない機能なので使用することが少ないと思います。

そのため、このままでは一度訪れたことのあるユーザーに対して崩れたサイトを表示させてしまうことになります。

それはどうしても避けたいところですよね。

そこで、functions.phpで検索をかけます。

「wp_enqueue_style」「wp_enqueue_script」

この2つがCSSやJavaScriptを読み込むための関数になります。
JINのテーマを例にすると、以下の2つがメインのファイルを読み込む関数になっています。

wp_enqueue_style( 'theme-style', get_stylesheet_uri(),array(),"20210522-02" );

wp_enqueue_script('cps-common', get_template_directory_uri() . '/js/common.js', array('jquery'), "20210522-01",true);

数字が記載されているところが、今回の鍵になります。

それぞれ「パラメータ」をつけることができます。パラメータを付けることで何がいいかというと、ブラウザに対して「このファイルはあなたが保存しているファイルとは別物だよ!だから古いのは捨てて新しいのを読み込んであげて!」という指令になります。

そして肝心のパラメータをどこに書くんだという話なのですが、ココは落ち着いてWordPress Codexを読んでみましょう。

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

何が言いたいのかというと「第4引数にパラメータを入れることができまっせ」ということです。

ちなみにCodexには以下のように書いてあります。

$ver(文字列) (オプション) クエリストリングとしてファイルパスの最後に連結される、スクリプトのバージョン番号を指定する文字列 (存在する場合) 。バージョンが指定されていない場合は false に設定され、WordPress は自動的に現在の WordPress のバージョン数と同じバージョン番号を追加する。null に設定した場合はバージョン番号は追加されない。このパラメータはキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使う。したがって、バージョン番号があってそれがスクリプトに意味を持つ場合は含めるべきである。

これはどのテーマでも同じことが言えるので、キャッシュ対策したいときはこんな感じで対策していくことをおすすめします!

ちなみに私はJINのテーマのキャッシュを乗り越えるのに3時間くらい浪費しました。

テーマによっては大量にCSSファイルやJavaScriptファイルを読み込んでいることがあるので、どこがメインのCSSを読み込んでいるのか読み解くのが本当に大変なんですよね…

なので根気強く探索することがキャッシュを乗り越える唯一の手段になります!

まとめ

キャッシュ対策はWeb制作をするうえで必須の知識だと思います。

正直キャッシュに苦しむまで「パラメータ」という概念を知らなかったです。

そしてWordPressを色々と弄る上でWordPressの関数を知っておくことも必要かなと今回思いました。

また、WordPressのキャッシュ対策は色々なブログで書いてありますが、結局はCodexを見れば解決できたので、やはり公式のサイトを見るのが一番早い解決になることは間違いありません。

なので初心者の方は中々慣れないと思いますし、公式って書いてあることを読み解くのが難しいですが、困ったときに公式を読む癖をつけておくと後々に役に立つことが必ずあるので頑張って読んでみましょう!