【JavaScript】WordPressでjQueryが動かない理由3点とその対処法

更新日：
  • WordPressでjQueryを使おうとしたけど動かない。
  • jQueryの記述は間違っていないはずなのに読み込まれない。
こんな悩み抱えていませんか？ この記事では、WordPressでjQueryを使用しようとした時に動かない典型的な例を解説したいと思います。

WordPressでjQueryが動かない理由とその対処法

WordPressでjQueryが動かない理由は大抵3つに絞ることが出来ます。
  • WordPressのjQueryは$が記述できない
  • JavaScriptの記述ファイル自体がリンク先に存在しない
  • jQueryの読み込みタイミングが他の要素の読み込みタイミングと合致していない
一つずつ順番に確認してみましょう。

1.WordPressのjQueryは$が記述できない

WordPressのテーマによっては標準のjQueryをWordPressの機能を使って読み込んでおり、その際に$が使えなくなるためです。 以下に動かないコードの一例を示します。 
$(window).load(function () {
    $('#topImg').height();
});
このコードは標準でWordPressに搭載されているjQueryでは動作しません。 jQueryにはnoConflictという関数が用意されており、この関数は複数のjQueryを読み込んだ際に不具合が起きないようにするためのもので、 WordPressの標準装備のjQueryではこの関数が有効になっているため、$はjQueryの関数として認識されないのです。 簡潔に記述するためにこの記事では関数の仕組みまでは触れませんが、jQuery本家（英語）の参考URLを貼っておきますのでご参照下さい。

解決策

どうすればよいのかと言うと「$」を「jQuery」に置き換えるだけです。 
jQuery(window).load(function () {
    jQuery('#topImg').height();
});
このようにすれば動くようになります。

2.JavaScriptの記述ファイル自体がリンク先に存在しない

この手の問題が発生するタイミングは主に運営サイトのドメインを変更したときです。 WordPressのローカルにjQueryの記述されたjsファイルなどを配置しており直接URLを指定していた場合に発生します。 上記はF12の検証ツールを利用して現在このブログのjQueryの読み込みURLについて見てみました。 検証ツールはWeb制作には欠かせないツールなので使い方を別記事で解説したいと思います。 この、内容を見てみるとURLが https://www.hitozukiai.com/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.4 となっていますね。 https://www.hitozukiai.comの部分がドメインになりますが、ここが決め打ちでコーディングされていると他のドメインに差し替えた際にURLが見当たらないエラーが発生し動かなくなってしまいます。

解決策

urlを取得する際はドメイン部分とフォルダ階層部分を必ず分けて記述し、ドメインが変わっても対応可能なようにコーディングするのが好ましいです。 具体的にはget_template_directory_uri()というWordPressの関数を利用します。 この関数はWordPressで現在読み込んでいるテンプレートのルートディレクトリを取得するためのものです。 別の記事でget_template_directory_uri()の使い方について解説していますので見てみて下さい。

jQueryの読み込みタイミングが他の要素の読み込みタイミングと合致していない

この問題は、取得する要素が動的に生成されている場合や画像等の読み込み順序が関係してくる場合に発生します。 Webページの生成順序については深い理解が無いと調整が難しく、記述する箇所によっても動作が異なります。 以下の記事が参考になります。
【WordPress対応】jQueryを読み込まないときは実行順序が違うかも？
【WordPress対応】jQueryを読み込まないときは実行順序が違うかも？
 
jQueryを使って要素に高さや横幅などを設定したいが何故が設定できない。とお悩みですか？ この記事ではjQueryが何故読み込まれないのかを解説しています。 イマイチjQueryの書き方について理解していない方は必見です！

参考URL

jQuery.noConflict