【WordPress】デザイン変更したのに反映されない時の原因と対策

こんにちは、ぷぷのすけです。

ホームページのデザイン変更した時にレイアウトが崩れたりする事ってありますよね。
そういう現象が起きるたびにキャッシュの消し方やスーパーリロードのやり方を
説明したりするのも面倒ですし、お客様やサイトにアクセスした人にも手間を
おかけする事になります。
ここではそう言った場合の原因と対策を紹介したいと思います。

デザインが崩れる原因

JavaScriptやCSSを変更した場合、ホームページのデザインが崩れるのは

ブラウザにキャッシュが残っているのが原因です。

JavaScriptやCSSのキャッシュが残っていると古いデータを元に表示されるので

デザインが崩れて表示されることがあります。

じゃあ、ブラウザにキャッシュさせなきゃいいじゃないと思うかもしれませんが

キャッシュは表示スピードを上げるために必要な機能です。

キャッシュ機能を有効にしつつデザイン崩れを防ぐ方法

JavaScriptやCSSファイルにクエリーを使用し、

タイムスタンプを付けるとデザイン崩れを防ぐことが出来ます。

・JavaScriptやCSSを任意の場所で指定したい場合

<link href="<?php echo get_stylesheet_uri().'?ver='.date('YmdGis', filemtime(get_template_directory().'/style.css')); ?>" rel="stylesheet">

<script src="<?php echo get_template_directory_uri().'/js/script.js?ver='.date('YmdGis', filemtime(get_template_directory().'/js/script.js')); ?>"></script>

冗長的な書き方ですがJavaScriptやCSSファイル名の後ろに

ファイルの日時をクエリーパラメーターとして追加してあげると

ブラウザのキャッシュが更新されます。

・functions.phpに設定する場合

wp_enqueue_style('sample_style', get_template_directory_uri().'/style.css', array(), date('YmdGis', filemtime(get_template_directory().'/style.css')));

wp_enqueue_script('sample_script', get_template_directory_uri().'/js/script.js', array(), date('YmdGis', filemtime(get_template_directory().'js/script.js')), true);

上記のようにfunctions.phpにwp_enqueue_styleやwp_enqueue_scriptを使用する方法もあります。