2023.08.02

jQueryが動かない！WordPressでjQueryが動かない時のチェックリストと動かなくなる可能性を減らす方法

WORDPRESS

WordPressに慣れきっていない状態だと、どうしても jQueryが動かない！となることはありますよね。

この記事では、jQueryが動かない時の原因を、WordPressならではのものに限定してチェックリストとしてまとめています。

また、jQueryを使用する際に二度と迷わないようにする方法もあわせて解説していますのでぜひ読んでみてください。

この記事を読んでほしい人

WordPressでjQueryが動かなくて悩んでいる人
WordPressでのjQueryの書き方を知りたい人
jQueryが動かない！と悩んでいるのが初めてではない人

先に結論を書いておきます。

WordPressではデフォルトでjQueryが読み込まれるので、自分でjQueryの読み込みの記述を書く必要はない
WordPressのjQueryでは、ドル記号[$]での記述はしない。または後述の方法で使えるようにする
jQueryを使っているファイルがjQuery自身のファイルより前に読み込まれていないか確認する

WordPressでjQueryが動かない時のチェックリスト

ここからは、WordPressでjQueryが動かない時のチェックリストを紹介していきます。

おそらく順を追って確認していくとjQueryが動くようになるかと思いますが、全て試してもjQueryが動くようにならない場合は、jQueryのコードを記述しているファイルで記述が間違えていることの不具合がある可能性も考えられます。

この記事では、jQueryが動かない時の”WordPressならではの”原因を確認していくことを念頭においてください。

自分でjQueryを読み込む処理を記述していないか

WordPressでは、デフォルトでjQueryが読み込まれています。

なので自分でjQueryのファイルを用意したり、jQueryの読み込みをする必要は基本的にありません。

これは、通常のテーマではWordPressのデフォルトjQueryを読み込む記述が含まれているためです。

ただし、自作テーマの場合はfunctions.phpでデフォルトのjQueryを読み込む必要があります。

自作テーマの場合はWordPressデフォルトのjQueryを読み込む必要アリ！

<?php
function my_custom_theme_scripts() {
    // jQueryの読み込み
    wp_enqueue_script( 'jquery' );
}

add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

WordPressでは基本的にはデフォルトで入っているjQueryを使用しましょう。

以前は、WordPressデフォルトのjQueryバージョンが1.x系と古かったので、自分でjQueryを読み込む人が多かったのですが、WordPress 5.6からjQueryバージョンが3.x系となったのでjQueryを自分で読み込む必要がなくなりました。

jQueryファイル内で、ドル記号[$]を使っていないか

WordPressデフォルトのjQueryではドル記号[$]を使用できません。

ドル記号[$]を「jQuery」に置き換えて記述します。

// NG
$(document).ready(function() {
    $('p').text();
});

// OK
jQuery(document).ready(function() {
    jQuery('p').text();
});

ただ、毎回「jQuery」と記述するのは面倒ですよね。

以下のように記述すると「(function ($)」内では今まで通りドル記号[$]が使用できます。

WordPressでもドル記号[$]を使用する方法がある！

// (function ($) 内は$が使える
(function ($) {
    // OK
    $("p").text();
})(jQuery);

WordPressでドル記号[$]を使用できない理由

ドル記号[$]がWordPressがデフォルトで読み込むjQueryと他のライブラリが競合することを防ぐために、「jQuery.noConflict()」という関数が実行されているため。

jQueryを使っているファイルがjQueryより前に読み込まれていないか

こちらはWordPressならではじゃないかもしれませんが、念のため紹介しておきます。

こちらはシンプルで、functions.phpで自分のJSファイルを読み込む際、「wp_enqueue_script」第3引数に「array(‘jquery’)」と記載してあげるだけです。

<?php
add_action('admin_enqueue_scripts', 'add_custom_script');
function add_custom_script()
{
	wp_enqueue_script('custom_script', assets_dir() . '/js/custom_script.js', array('jquery'), '1.0', true);
}

こうすることでjQueryが読み込まれた後に任意のファイルを読み込むことが可能になります。

第3引数に記載した「jquery」がデフォルトのjqueryという意味になります。

使用中のテーマやプラグインがjQueryを変更していないか

テーマやプラグインがデフォルトのjQueryから変更している可能性もあります。

こちらの確認は大変ですが、テーマを変更して確認したり、一つずつプラグインを無効 / 有効化して確認していきます。

WordPressでjQueryを使用する際に動かなくなる可能性を減らす方法

動かなくなる可能性を減らす方法は、自分の中で記述などのルールを決めてしまうことです。

ルールを決めるということは、縛りを作るということなので、判断材料が一定になったり、考えることが少なくなるメリットがあります。

以下は、私も業務で使用しているルールとなります。

自分でjQueryの読み込みをしない

これはWordPressデフォルトのjQueryを使用する。ということです。

自分でjQueryを読み込むと、他のテーマやプラグインとの兼ね合いでの不具合が発生する可能性があるなどのデメリットはありますが、メリットはあんまりないかな、と思っているので、デフォルトのjQueryを使用するように統一します。

ドル記号[$]を使用できるようにする記述をメモしておく

以下のような記述をメモしておき、必要な時にすぐ使えるようにしておきましょう。

// (function ($) 内は$が使える
(function ($) {

})(jQuery);

jQueryを使うライブラリ（slick.jsのような）はWordPressバージョンを作って保管しておく

slick.jsのようなjQueryを使用しているライブラリで、そのまま使用するとエラーがあるもの（ドル記号[$]で記述されているもの）は、ライブラリのコードを以下のコードで囲うなどして保管しておきます。

// (function ($) 内は$が使える
(function ($) {

})(jQuery);

WordPressバージョンをうまく作れなかった場合で、使用する場合は、ドル記号[$]で記載する必要がありますよね。

念のためそのような場合にjQueryを自分で読み込む記述を以下に掲載します。

jQueryを自分で読み込む方法

function change_jquery_with_cdn()
{
    if (!is_admin()) {
        // WordPressにデフォルトで読み込まれるjQueryを削除
        wp_deregister_script('jquery');

        // 新しいバージョンのjQueryをCDNから読み込む
        wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), '3.6.0', true);
    }
}
add_action('wp_enqueue_scripts', 'change_jquery_with_cdn');

以下説明です。