WordPressの最新バージョンではjQueryがデフォルトで読み込まれます。さてこのjQueryの関数をテーマ等で呼ぼうとすると、TypeError: $ is not a function と定義されていないというエラーが出てしまいます。今回はこのエラーの解消法と、ワードプレスの本体に組み込まれているjQueryを安全に利用する方法を解説いたします

jQuery-Revolutionizing-WordPress

TypeError: $ is not a functionエラーの修正方法

ワードプレスでjQueryが読み込まれていることをまずご確認ください

サイトにJqueryが正しく読み込まれているかソースコードを表示して確認します。

混在コンテンツでjQueryがブロックされていないかを確認されてください。
HTTPSのサイトで下記のようなHTTPでの読み込みコードでJQUERYが読み込まれている場合ブラウザーが読み込みをブロックしていることがございます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

この場合、http://をhttps://に書き換えます。

ワードプレスでjQueryが読み込まれているのにこのエラーが出る理由

このエラーは、ワードプレスで$によるjQuery標準の関数指定方法が許可されていない為です。ゆえに、jQueryの$による様々な処理は使用が出来ないとお考えください

解決方法1:$では無くjQueryを使う

下記のようにすると、正しくjQueryを呼び出して使用する事が出来ます

修正前(エラーが出ます)

$(document).ready(function(){
   var myelement = $( '.elem' );
   // jQuery コード
});

修正後

jQuery(document).ready(function(){
   var myelement = jQuery( '.elem' );
   // jQuery コード
});

解決方法2:$を使用可能にする

下記のようなコードでjQueryのプログラムをかこってしまうと$が利用できるようになります

(function($) {
     // jQuery コード
   var myelement = $( '.elem' );
})( jQuery );

このコードは、$とjQueryの指定を(function($) {内だけで入れ替えてしまう処理です。

どうてもそのまま$を利用したい場合

jQUERYのライブラリ等をインクルードしていて、$を必ず利用しなければいけない時は、下記のコードを$を利用する前に挿入することで普通に$を利用することが可能です。

var $ = jQuery.noConflict();

jQueryがテーマでは使えない場合はワードプレスの標準のjQueryを利用できるようにします

いくつかのテーマではフロントエンド(テーマの出力サイト)の方でjQueryがそもそも読み込まれていないことがございます。
この場合、テーマのFuinctions.phpに下記を記載されてください。

add_filter('wp_enqueue_scripts',function() {
    wp_enqueue_script('jquery', false, array(), false, false);
});

ワードプレスのエラー修正、移行・カスタマイズのご相談・ご依頼はワードプレスドクターまで