WordPressでjQuery依存テーマが壊れる本当の原因 - Web開発における知見共有系ページ

jQuery依存のテーマが壊れる原因
- なぜjQuery依存テーマは壊れやすいのか
WordPressのjQueryは普通のjQueryではない
- 具体的に何が起きるか
`$`が使えない理由
正しい書き方
よくある壊れ方
実際に確認する方法
失敗しやすい勘違い
注意点：更新停止テーマは危険
まとめ

jQuery依存のテーマが壊れる原因

WordPressテーマが突然壊れるとき、原因として「PHPのバージョン」や「プラグインの競合」が疑われがちです。
しかし実際には、jQueryの読み込み仕様の変化が原因になっているケースが非常に多いです。

しかも厄介なことに、このタイプの不具合はエラー画面が出ません。
管理画面も表示され、ページも開きます。
ただし「ボタンが効かない」「メニューが開かない」「スライダーが止まる」といった“静かな故障”になります。

つまり、WordPressテーマは壊れているのに、壊れていると気付きにくいのです。

なぜjQuery依存テーマは壊れやすいのか

原因は、テーマが「jQueryというライブラリ」ではなく、特定の読み込み状態のjQueryに依存しているからです。

多くの古いテーマは、次の前提で作られています。

グローバル変数 `$` が使える
`document.ready` が必ず動く
jQueryは同期的に読み込まれる
WordPress本体より先にjQueryが存在する

このどれかが崩れると、テーマのJavaScriptは動作しません。

そして現在のWordPressでは、この前提が成立しない場面が増えています。

WordPressのjQueryは普通のjQueryではない

ここが最も重要なポイントです。
WordPressが読み込むjQueryは、CDNで配布されている一般的なjQueryとは異なります。

WordPressでは次のように登録されています。

wp_enqueue_script('jquery');

これにより、WordPressが管理するスクリプト依存関係の中に組み込まれます。
そしてこのjQueryには、ある特徴があります。

noConflictモードで動作している

つまり、通常のWebページと違い `$` が自動では使えません。

具体的に何が起きるか

次のコードは一般的なjQueryコードです。

$(function(){
  $('.menu').click(function(){
    $('.nav').toggle();
  });
});

しかしWordPressでは、これが動かない場合があります。
理由は `$` がjQueryを指していないからです。

ブラウザのコンソールには次のエラーが出ます。

`$ is not a function`

テーマ開発者から見ると「jQueryを読み込んでいるのに動かない」状態になります。

`$`が使えない理由

`$` はjQueryの専用記号ではありません。
単なるJavaScriptの変数名です。

そのため、他のライブラリと衝突します。
代表的なものは以下です。

Prototype.js
MooTools
古いスライダーライブラリ
一部の広告タグ

WordPressはプラグイン共存を前提にしているため、衝突回避のために自動で次を実行します。

jQuery.noConflict();

これにより、グローバル `$` は解放されます。
結果として、jQueryは `jQuery` という名前でしか参照できなくなります。

正しい書き方

WordPressで安全に動作させるには、次のように書きます。

jQuery(function($){
  $('.menu').click(function(){
    $('.nav').toggle();
  });
});

この `$` はローカルスコープの変数です。
そのため競合が起きません。

ここを理解せずに「jQueryをCDNに差し替える」と、テーマが壊れる原因になります。

よくある壊れ方

1. CDN版jQueryに置き換えた

表示速度改善のために次のような処理をする例があります。

wp_deregister_script('jquery');
wp_register_script('jquery','https://code.jquery.com/jquery-3.7.1.min.js');

これを行うと、WordPressの依存関係管理が崩れます。
結果として、プラグインが「まだ読み込まれていないjQuery」を参照します。

つまり、読み込み順序が壊れます。

2. defer属性を付けた

<script src="jquery.js" defer></script>

deferを付けると、DOM解析後に実行されます。
しかしテーマは「読み込み直後にjQueryが使える」前提です。

そのため `document.ready` が発火前にコードが実行され、イベント登録が失敗します。

WordPressの高速化記事で紹介されがちな方法です。
しかし、ヘッダで動作するスクリプトが存在すると、初期化処理が間に合いません。

実際に確認する方法

テーマがjQueryに依存しているかは、ブラウザコンソールで確認できます。

F12を押し、Consoleで次を実行します。

typeof jQuery

`function` が返れば読み込まれています。
次に確認します。

typeof $

`undefined` の場合、noConflict状態です。
ここでエラーが出ているテーマは、古い書き方をしています。

失敗しやすい勘違い

多くの人が「jQueryのバージョンが古いから壊れた」と考えます。
しかし実際には、壊れているのはjQueryではありません。

テーマがWordPressのjQuery仕様に従っていないのです。

つまり問題はライブラリではなく、読み込み方法です。

注意点：更新停止テーマは危険

特に注意が必要なのは、更新されていない有料テーマです。
古いテーマは次のコードを含んでいることがあります。

<script src="js/jquery.min.js"></script>

これはWordPressの管理外でjQueryを読み込んでいます。
結果として「2重読み込み」が発生します。

これが最も壊れやすいパターンです。

プラグイン：WordPressのjQueryを使用
テーマ：独自jQueryを使用

同じjQueryでもインスタンスが別になります。
イベントが登録されず、UIが反応しません。

まとめ

jQuery依存のテーマが壊れるのは、jQueryが古いからではありません。
WordPress特有のスクリプト管理とnoConflict仕様を理解していないコードが原因です。

そして多くの場合、壊れるきっかけはWordPressアップデートや高速化対応です。
サイトが壊れるのは、変更を加えた瞬間ではなく「前提が崩れた瞬間」です。

対処として最も安全なのは、jQueryを削除することではありません。
まずは「WordPressがどのようにjQueryを読み込んでいるか」を確認することです。

それだけで、原因不明の不具合の多くが説明できるようになります。