はじめに
サイトの高速化、でもプラグインが動かない…
WordPressで自作テーマを作っていると、「サイトの表示速度をもう少し速くしたいな…」と感じることがありますよね。その原因の一つが、WordPressに標準で搭載されているjQueryのバージョンが少し古いことです。
「どうせならCDNで配布されている最新版のjQueryを読み込ませて、サイトを高速化しよう！」
そう考えてfunctions.phpを編集してみたところ…
「あれ！？今まで動いていたスライダーが動かない！」
「メニューが開かなくなった…」
なんて経験はありませんか？
これは、多くのWordPressプラグインが動作の前提としている「依存関係」を壊してしまったことが原因です。
この記事では、そんな「良かれと思ってやったのにサイトが壊れてしまった…」というお悩みを解決するため、プラグインとの連携を保ったまま、安全にjQueryを最新バージョンに入れ替えるWordPressの「正しいお作法」を、初心者の方にも分かりやすく解説します。
なぜ？よくあるfunctions.phpの記述でプラグインが動かなくなる理由
下記の記事で次のようなコードを紹介しています。
// functions.php
// WPのjQueryを止める
function stop_jquery() {
if(!is_admin()) {
// WordPress標準のjQueryを強制的に読み込まないようにする
wp_deregister_script('jquery');
}
}
add_action('init', 'stop_jquery');
このコードは、確かにWordPress標準のjQueryを読み込まなくするには有効です。
しかし、このwp_deregister_script('jquery');だけを記述する方法は、プラグインの表示を崩してしまう大きな原因になってしまうようです。
なぜ問題なのか？「依存関係」を例え話で解説
ここで、WordPressの仕組みを「工事現場」に例えてみましょう。
- WordPress本体 → 現場全体を管理する「現場監督」
- 各プラグイン → 特定の仕事をする「専門の作業員」(スライダー職人、メニュー職人など)
- jQuery → みんなが共通で使う便利な電動工具「インパクトドライバー」
多くの作業員（プラグイン）は、現場監督（WordPress）が用意してくれた共通の道具「インパクトドライバー（jQuery）」があることを前提に現場へやってきます。
しかし、先程のコードは、現場監督が作業員に何の断りもなく、現場からインパクトドライバーを撤去してしまうようなものです。
いざ作業をしようとした作業員たちは、「あれ？道具がないと仕事ができない…」と途方に暮れてしまいます。
これが、プラグインが動かなくなる現象の正体です。
解決策：プラグインを壊さずにjQueryを最新版に入れ替える方法
では、どうすればよかったのでしょうか？ 正解は、「道具を勝手に撤去する」のではなく、「古い道具を、同じ名前の新しい道具にそっと入れ替えてあげる」ことです。
作業員（プラグイン）は「インパクトドライバー（jQuery）」という名前の道具さえあればいいので、それが新しくなっていても気づかずに作業を続けてくれます。
正しいコードの書き方
functions.phpに、以下のように記述します。以前のstop_jquery関数は削除し、こちらのコードに置き換えてください。
<?php
// テーマのCSSやJavaScriptを読み込むための関数
function my_theme_scripts() {
// サイトの表側（管理画面以外）で実行する
if ( ! is_admin() ) {
// ① WordPress標準のjQueryの登録を一旦解除する
wp_deregister_script('jquery');
// ② 新しいjQueryを、同じ名前「jquery」で再登録する
wp_register_script(
'jquery', // ハンドル名（必ず 'jquery' にする）
'[https://code.jquery.com/jquery-3.7.1.min.js](https://code.jquery.com/jquery-3.7.1.min.js)', // 使いたいjQueryのCDN URL
array(), // 依存関係（jQuery自体には無いので空でOK）
'3.7.1', // バージョン番号
true // trueにすると</body>タグの直前で読み込まれ、表示速度上有利
);
}
// ③ 実際にjQueryを読み込む命令（WordPressの他の処理で自動的に呼ばれることも多い）
wp_enqueue_script('jquery');
/* --- 以下、ご自身のテーマのCSSなども一緒に記述できます --- */
// 例：style.css を読み込む
wp_enqueue_style(
'my-theme-style',
get_stylesheet_uri()
);
// 例：main.css を読み込む
wp_enqueue_style(
'my-theme-main-style',
get_theme_file_uri('/main.css'),
array('my-theme-style') // style.cssの後に読み込む設定
);
}
// WordPressがスクリプトやスタイルを読み込む正しいタイミングで、上記の関数を実行する
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>
このコードのポイントは、wp_deregister_script('jquery');で一旦登録を解除した直後に、必ず同じハンドル名（第一引数）の'jquery'でwp_register_script()を実行している点です。
これにより、現場監督（WordPress）は、作業員（プラグイン）に気づかれることなく、古いインパクトドライバーをピカピカの最新モデルに入れ替えることができるのです。
さいごに
今回は、プラグインの動作を壊さずにWordPressのjQueryを最新版に入れ替える方法について解説しました。
- NGな方法:
wp_deregister_script('jquery');だけでjQueryの読み込みを停止する。 - OKな方法:
wp_deregister_script()したあと、すぐに同じハンドル名'jquery'でwp_register_script()する。
WordPressのテーマやプラグインは、このような「依存関係」を前提に作られています。何かを無効化したいと思ったときは、「それを頼りにしている機能はないか？」と考えて、今回のように「無効化＋代替手段の再登録」をセットで行うのが、安定したサイト運営のコツです。
これで、サイトのパフォーマンスとプラグインの安定性を両立できますね！
