jQueryを利用した自作スクリプトが動かない場合の対処方法 WordPress

このサイトのスマホ版のメニューがイケてないので、メニューを自作しました！

 

ローカルの静的HTMLで作成、イメージ通り動作することを確認し、サイトに組み込んだら、

 

動かない。。。。

 

「なんでじゃい！」ということで、いろいろ原因を切り分けるために他サイトにも実装してみたのですが、どうもWordPressのサイトでのみ動かないので、WordPressが悪さをしていると判断し調査をしました。

 

結果、無事解決したのですが、同じ悩みを抱えてそうな人が多いのではと思い、原因とその解決方法についてまとめてみましたので、本日はこちらを紹介します。

 

jQueryが動かないことの確認

まず、事象を確認しましょう。

 

簡単な例として「jQueryで文字を置き換え」はdivタグで括られており、id=”jQuery”が指定されています。

このid=”jQuery”で指定されているdivタグを「Hello World」で置き換えるよう処理を実行します。

 

<div id="jquery">jQueryで文字を置き換え</div>
<div>
    <script type="text/javascript">
        $("#jquery").html("Hello World")
    </script>
</div>

 

動きませんね。。。

Javascriptが動いていないってことは無いと思いますが、念のため確認しておきます。

 

<div id="js">JavaScriptで文字を置き換え</div>
<div>
    <script type="text/javascript">
        var e1 = document.getElementById('js');
        e1.innerText = 'Hello World';
    </script>
</div>

 

こちらは動いてますね。

 

なぜでしょうか・・・？

続けて原因を説明していきます。

 

ちなみにWordPressで投稿フォームにJavaScriptを記述して実行するにはプラグインが必要なので詳しく知りたい方はコチラを参照してください。

 

WordPressでjQueryが動かない原因

実は、WordPressにはすでにjQueryがインストールされているため、ヘッダーの要素を読みだす「wp_head()」関数を実行することで、jQueryが呼び出されます。

 

以下は、検証サイトpenguinweb.netのソースです。テーマはWordPressのデフォルトテーマ「Twenty Fourteen」でヘッダーのカスタマイズは行っていません。

 

デフォルトで呼び出されるようになっているのは、管理画面や有名プラインでjQueryを利用しているためです。

 

これが理由なら特に影響はないのですが、実はプラグインで利用しているjQueryとコンフリクトしないように、「$()」での関数呼び出しができないよう制限されてしまっているのです。

 

そのため、先ほどのHello Worldの例で挙げた、

$("#jquery").html("Hello World")

 

という、従来の$を利用した関数の記述では実行できないのです。

 

良かれと思ってやってくれてるのですが、jQueryを利用した自前のスクリプトを実行したい場合は、この問題を解決しなければなりません。

 

ただ、対応方法はありますので、続いて回避方法について紹介します。

 

WordPressでjQueryを実行する方法

対応方法は以下の3つです。

• 「$()」ではなく「jQuery()」を使う
• カプセル化をする
• WordPressのデフォルトのjQueryは使わずに自前で呼び出す。

 

それぞれ説明していきます。

 

「$()」ではなく「jQuery()」を使う

これが一番簡単でわかりやすいと思います。

 

先ほどの「Hello World」のソースを例に挙げると、

jQuery("#jquery").html("Hello World")

 

のように、「$」を「jQuery」にするだけです。

 

<div id="jquery2">jQueryで文字を置き換え</div>
<div>
    <script type="text/javascript">
        jQuery("#jquery2").html("Hello World")
    </script>
</div>

 

カプセル化をする

こちらも先に負けないくらい簡単です。

 

無名関数の中で実行することで、外部ソースの同じ名前の関数とのコンフリクトを避ける方法ですね。

（詳しくは、コチラのサイトが参考になります）

 

実行結果とソースは以下のとおりです。

 

<div id="jquery3">jQueryで文字を置き換え</div>
<script type="text/javascript">
(function($){
    $("#jquery3").html("Hello World")
})(jQuery);
</script>

 

若干ステップ数が増えてしまいすが、他のライブラリとの共存という意味ではこの方法は一番安全かもしれません。

 

WordPressのデフォルトのjQueryは使わずに自前で呼び出す。

抜本的に解決する方法ですね。

タイトルで何をしようとしているかはわかるかと思いますので、具体的な手順を説明していきます。

 

こちらは方法が2つあるのでいずれか好きな方を選択してください。

 

wp_head()の前に以下の記述する

wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), '1.12.4');

 

バージョンは利用したいものに書き換えてください。

 

function.phpに以下を記述する

function stop_wordpress_jquery() {
    //管理画面はデフォルトのjQueryを呼び出す
    if ( !is_admin() ) {
        wp_deregister_script('jquery');
        wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), '1.12.4');
    }
}
add_action('init', 'stop_wordpress_jquery');

 

function.phpに記述すると、管理画面にも影響するので管理画面では動作しないようにしています。

 

この方法は管理画面に限らず、「利用中のプラグインが動かない」などの影響がでる可能性があるので、あまりオススメはしません。

 

最後に

僕はWordPressでjQueryを使いたい場合は、「$()」ではなく「jQuery()」を使う方法を好んで記述しています。

 

どの方法も目的は達成できますので、自分のとって都合の良いやり方を選択してみてください。