2020.06.10

WordPressでデフォルトのjQueryを削除したいんだ！

WordPressでjQueryを使用する場合、デフォルトで読み込まれているjQuery本体のバージョンではプラグインとの相性が悪い、エラーが出るので削除したい。
そんな時は、このコードをコピペでＯＫ！っていう方法の紹介です。

デフォルト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にコードを数行追加するだけで解決できますので、ぜひ参考にしてください。

カテゴリー

新着記事

よく読まれている記事

サイト情報

へっぽこコーダーの備忘録