WordPressでjQueryを使用する場合、デフォルトで読み込まれているjQuery本体のバージョンではプラグインとの相性が悪い、エラーが出るので削除したい。
そんな時は、このコードをコピペでＯＫ！っていう方法の紹介です。
デフォルトjQuery削除コード
functions.phpへ以下のコードを書き込むことで、jQueryは削除されます。
function delete_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
}
}
add_action('init', 'delete_jquery');
functions.phpは、管理画面サイドメニューの「外観」→「テーマの編集」→「テーマのための関数(functions.php)」から編集できます。
もしくは、FTPから「/wp-content/themes/【テーマディレクトリ】/functions.php」から編集しましょう。
※編集に失敗すると画面が映らなくなる場合があるので、functions.phpのバックアップは取っておきましょう。
失敗した時は、バックアップしておいたfunctions.phpをFTPからアップしなおすと不具合は解消されます。
コードの説明
if (!is_admin()) { //管理画面以外の場合
wp_deregister_script('jquery'); //jQueryの読み込みを削除する
}
まず、if (!is_admin()) で、管理画面はjQuery削除の対象外とします。
管理画面からもjQueryを削除してしまうと、管理画面で動かない部分が出てくるので気を付けましょう。
wp_deregister_scriptは、wordpressが準備してくれている、デフォルト設置のscriptを削除するための関数です。
wp_deregister_script(‘jquery’)のように、引数に「jQuery」を設定することで、jQuery本体の読み込みを削除してくれます。
add_action('init', 'delete_jquery') //ページを読み込むときに、jQuery削除の関数がはしる
「add_action」は第1引数の処理時に、第2引数を処理しますということです。
第1引数の「init」は、ページを開くときの初期設定を行うタイミングと思ってください。
第2引数の「delete_jquery」は、先ほど設定した関数ですね。
まとめると、ページを開いた初期設定タイミングで、デフォルト設定のjQueryを削除しますよという処理になります。
任意のバージョンのjQueryの読み込み
デフォルトのjQueryを削除したものの、jQueryは一切使わないよっていうことは、最近ではあまりないと思います。
通常、代わりのバージョンのjQueryの読み込みが必要となるはずですので、その手順も記載しておきます。
方法その1：CDNで読み込む方法
CDN（Contents Delivery Network）とはインターネット上からjQueryを読み込むので、わざわざjQueryをダウンロードしてきてサーバに設置などしなくてもいい方法です。
この場合は、使用するテーマの<head>内に、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
と書き込んでやれば完了です。
もしくは、<head>内に書き込まなくても、先ほど「functions.php」に記載したコードを以下のように変更することでも可能です。
function delete_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), '3.5.1', true ); //初期設定のタイミングで差し替えようのjQueryを読み込む
}
}
add_action('init', 'delete_jquery');
バージョンに関しては、必要なバージョンに書き換えて読み込んでください。
バージョンは以下のサイトから確認することができます。
https://developers.google.com/speed/libraries#jquery
方法その1：jQueryをサーバに設置して読み込む
任意のバージョンのjQueryをダウンロードしてきて、サーバに設置し、読み込む方法です。
ダウンロードしてきたjQueryをFTPから「/wp-content/themes/【テーマディレクトリ】/js/」内に配置します。
配置できたら、使用するテーマの<head>内に、
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.5.1.min.js"></script>
と書き込んでやればOKです。
もしくは、CDNの場合と同様に「functions.php」を変更することでも可能です。
function delete_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', get_template_directory_uri().'/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
}
}
add_action('init', 'delete_jquery');
まとめ
jQueryなどのプラグインを使用する場合は、jQuery本体のバージョンでの不具合ことがあります。
別バージョンを追加で読み込む場合でも、デフォルトのjQueryを読み込んだままだと本体を重複して読み込むことになり、処理の遅延やエラーの原因にもなります。
functions.phpにコードを数行追加するだけで解決できますので、ぜひ参考にしてください。