【WordPress】JSファイルの変更/更新内容が反映されないときの対処法（functions.php更新, wp_enqueue_script, FTP, JavaScript)

wp_enqueue_scriptでJavaScriptファイル（.js）を読み込んでいるときに、テーマファイルエディタのfunctions.phpや、読み込んでいるJavaScriptファイルを修正したり、あるいはサーバー上でファイルを直接変更したときに、変更内容が反映されないことがあります。

ここでは、WEBサイト上でwp_enqueue_scriptで読み込んだJavaScriptファイルの変更内容が反映されない原因と対処法についてまとめています。

変更が反映されない原因

wp_enqueue_scriptで読み込んだJavaScriptファイルの変更内容が反映されない原因はブラウザ上でJavaScriptファイルがキャッシュされるためです。

同じスクリプトタグの表記で読み込んだ内容は、そのファイルを中身を変更したとしてもキャッシュがクリアされるまでは初回に読み込んだ内容が反映され続けます。

対処法

スクリプトファイルのキャッシュが残ってしまう対処法はいくつかあります。

一番おすすめなのは「wp_enqueue_scriptでバージョンを指定する」です。以下でその方法を解説します。

対処法1：wp_enqueue_scriptでバージョンを指定する

wp_enqueue_scriptの基本構文

wp_enqueue_scriptでは、引数を5つ指定することができます。

wp_enqueue_style( $handle , $src, $deps, $ver, $args );

1. $handle: スクリプトの一意な識別子（ハンドル）
2. $src: スクリプトのURL
3. $deps: 依存するスクリプトの配列（オプション）
4. $ver: スクリプトのバージョン番号（オプション）
5. $args: スクリプトをフッターで読み込むか、deferやasyncで読み込むかの指定

$handleと$src以外はオプションなので省略することができます。

引数（$var）を省略すると何が起きるか？

例えば、バージョンを指定する引数$varの部分を省略した表記は以下になります。

wp_enqueue_script( 'common-js', get_stylesheet_directory_uri() . '/common.js', array() );

この場合、ブラウザ側に表示するscriptタグのsrcで指定するファイルのバージョンは現在のWordPressのバージョンが自動で指定されます。

例えば、WordPressのバージョンが6.5.4であれば、ファイル名にパラメータがついてcommon.js?ver=6.5.4"のようになります。

<script src="https://prograshi.com/wp-content/themes/new/common.js?ver=6.5.4" id="common-js-js"></script>

この状態でブラウザ上でこのJSファイルを読み込むと、「common.js?ver=6.5.4」がキャッシュされて、common.jsを変更しても、変更前の状態でロードされます。

このため、変更内容が反映されなくなります。

【対処法】バージョンを指定する

ファイルの内容を変更したときに、ブラウザに変更内容を読み込ませるためにはファイル名またはパラメータを変更する必要があります。

そこで便利なのがバージョンの指定です。バージョンを指定するときは以下のように記述します。

wp_enqueue_script( 'common-js', get_stylesheet_directory_uri() . '/common.js', array(), '1.0.1');

この状態でブラウザ上でこのJSファイルを読み込むと、ファイル名の後ろのパラメータが「common.js?ver=1.0.1」になります。

ブラウザ上で読み込んだコードは以下のようになります。

<script src="https://prograshi.com/wp-content/themes/new/common.js?ver=1.0.1" id="common-js-js"></script>

もし、読み込んでいるJavaScriptファイルに変更を加えたら、wp_enqueue_scriptのバージョンを変更します。（例 1.0.1 → 1.0.2）

すると後ろのパラメータが変わって、ブラウザが別ファイルと認識して新たに読込を実行します。

wp_enqueue_script( 'common-js', get_stylesheet_directory_uri() . '/common.js', array(), '1.0.2');

対処法2：キャッシュクリアする

変更するのはごく稀でわざわざバージョンを変えるほどでもないという場合は、ブラウザのキャッシュをクリアして読みこみます。

ChromeのAddonでキャッシュをクリアしてくれる便利なアドオンがあるのでそれらを使えば簡単にできます。

「Clear Cache」は割と評価も高く優良なアドオンです。

対処法3: ハンドル名を変更する

スクリプトタグで読み込むソースの内容が変わればブラウザは再度読み込みを行うため、バージョンの変更ではなくハンドル名を変更する方法でも対応できなくもありません。

wp_enqueue_styleの１つ目の引数の$handleの部分です。

wp_enqueue_style( $handle , $src, $deps, $ver, $args );

例えば以下のようにします。

wp_enqueue_script( 'common-js', get_stylesheet_directory_uri() . '/common.js', array() );

↓　変更後

wp_enqueue_script( 'common-js-xxx', get_stylesheet_directory_uri() . '/common.js', array() );

これでブラウザがファイルを再ロードします。

ご参考