WordPressにバージョン1系以外のjQueryを入れるとバグが発生しやすい

WordPressにバージョン1系以外のjQueryを入れるとバグが発生しやすい

jQuery 2.x と 3.x のバージョンはバグの元

WordPressを使用しているためネットサーフィンをしているときにサイトがWordPress作られている場合、たまにソースコードを見ることがあるのだが、2.x と 3.x のバージョンのjQueryを読み込んでいるサイトがたまにある。

おそらくバージョン1.xは古いと思って独自にfunction.phpを修正して2.xなどを読み込んでいるものと思われるが前述の通り2.xや3.xを入れるのはバグの元になりやすいため、やめたほうが良い。

2.x と 3.x がバグの元になる理由

まずWordPress自体がデフォルトのテーマであればjQuery 1.xを読み込むことを前提として作成されているため2.xなど別のバージョンを入れることで何かしらの不具合が発生する可能性がある。

また、プラグインなどもjQuery 1.xを読み込むことを前提として作られているものが多いため2.xや3.xを入れると正常に動作しないことがある。

違うバージョンのjQueryの読み込み方法

function.phpに以下のコードを記述する。

// jquery-3.1.1を追加
function custom_scripts() {
  wp_enqueue_script('function', 'https://code.jquery.com/jquery-3.1.1.min.js');
}
add_action('wp_enqueue_scripts', 'custom_scripts');

実はこの記述だけだとWordPressがデフォルトで読み込んでいる1.xと新しく追加した3.xなどを同時に読み込んでしまうため別の意味でも問題がある。

別バージョンのjQueryを読み込むのであればデフォルトで読み込んでいるものは以下の記述で読み込みを停止しなければならない。

// jQuery読み込みを停止
add_action('wp_print_scripts', 'deregister_script', 100);
function deregister_script() {
  wp_deregister_script('jquery');
}

jQueryのバージョンの確認方法

ChromeのデベロッパーツールでNetworkを開きFilterにjqueryと入力して絞り込んで確認する。

jquery.js?ver=1.xとなっているのがWordPressがデフォルトで読み込んでいるjQueryで2.x, 3.xなどが検出された場合、別バージョンのjQueryが読み込まれているため対処が必要だ。
WordPressにバージョン1系以外のjQueryを入れるとバグが発生しやすい