WordPressでjQueryが動かない？正しい読み込み方法と対策を解説！

2025.02.152025.02.17

WordPressでjQueryを使いたいのに「$ is not function…」などのエラーがでて動かないと困っていませんか？

本記事では、WordPressでjQueryを適切に読み込む方法や、よくあるトラブルの解決策を詳しく解説します。

WordPressでjQueryを使う基本の考え方
1. WordPressにはjQueryが最初から入っている？
$ が使えない？WordPressとjQueryの関係
1. なぜ $ が使えないのか？
2. $ を使うための解決策
jQueryを正しく読み込む方法
WordPressでjQueryが動かない時の対策
まとめ

WordPressでjQueryを使う基本の考え方

jQueryは多くのサイトで使用されている便利なJavaScriptライブラリですが、WordPressでは少し特殊な扱いになっています。

そのため、通常のWebサイトと同じ感覚でjQueryを使おうとすると、思ったように動作しないことがあります。

ここでは、WordPressにおけるjQueryの基本的な扱いについて解説します。

WordPressにはjQueryが最初から入っている？

WordPressには標準でjQueryが含まれています。

実際、WordPressのコアファイルでは、デフォルトでjQueryが読み込まれています。

そのため、通常のWEBサイトのようにjQueryを読み込むためのコードやCDNを書いてしまうと、うまく読み込めないことがあります。

また、テーマやプラグインの影響でjQueryが無効化されていたり、異なるバージョンが読み込まれていたりすることもあります。

そのため、意図した通りに動作しないケースが発生するのです。

なかなか厄介な感じがしてきましたね。

WordPressで現在読み込まれているjQueryのバージョンを確認するには、以下のコードをfunctions.phpに追加して、コンソールにバージョンを表示させる方法があります。

function check_jquery_version() {
    global $wp_scripts;
    if (isset($wp_scripts->registered['jquery'])) {
        error_log('jQuery version: ' . $wp_scripts->registered['jquery']->ver);
    }
}
add_action('wp_enqueue_scripts', 'check_jquery_version');

これにより、WordPressでどのバージョンのjQueryが読み込まれているかを確認できます。

$ が使えない？WordPressとjQueryの関係

WordPressでは、通常のjQueryの記述方法がそのまま使えないことがあります。特に、$（ドル記号）を使ったコードがエラーになることが多いです。

なぜ $ が使えないのか？

WordPressでは、jQueryが「noConflictモード」で動作するため、グローバルな $ 記号が使用できない設定になっています。これは、他のJavaScriptライブラリ（例: Prototype.js）との競合を防ぐためです。

$ を使うための解決策

jQuery を使う$ の代わりに jQuery を使えば、問題なく動作します。
修正前：$(document).ready(function() { $('#example').hide(); });
修正後：jQuery(document).ready(function() { jQuery('#example').hide(); });
即時関数で $ を使えるようにする
$ をローカルスコープで使用できるようにするには、以下のように記述します。
(function($) { $(document).ready(function() { $('#example').hide(); }); })(jQuery);
これにより、関数内で $ を安全に使用できます。

jQueryを正しく読み込む方法

WordPressでjQueryを正しく読み込むには、wp_enqueue_script を使用するのが推奨されます。

また、読み込み順を調整したり、CDNを利用する方法もあります。

JavaScriptやCSSの正しい読み方はこちらの記事で詳しく解説していますので合わせてご覧ください。

WordPressでCSSとJavaScriptを正しく追加する方法【初心者向け完全ガイド】

WordPressでCSSやJavaScriptを正しく追加する方法を初心者向けに解説！wp_enqueue_style・wp_enqueue_scriptの使い方や、外部ファイルの読み込み方法、不要なスクリプトの削除方法まで詳しく紹介します。

WordPressでjQueryが動かない時の対策

$ is not defined エラーの解決方法

このエラーは、jQueryが正しく読み込まれていない場合や、noConflict モードが影響している場合に発生します。

解決するには、以下の方法を試してください。

wp_enqueue_script('jquery') が正しく実行されているか確認する。
$ の代わりに jQuery を使用する。
(function($) { ... })(jQuery); の形式で $ をローカルスコープで利用する。

jQueryのバージョンを変更する方法

jQueryのバージョンを変更したい場合、wp_deregister_script を使用してデフォルトのjQueryを解除し、指定のバージョンを登録します。

function add_ccs_js() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'https://code.jquery.com/jquery-3.6.0.min.js', array(), null, true);
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'add_ccs_js');