WordPressの最新バージョンではjQueryがデフォルトで読み込まれます。さてこのjQueryの関数をテーマ等で呼ぼうとすると、TypeError: $ is not a function と定義されていないというエラーが出てしまいます。今回はこのエラーの解消法と、ワードプレスの本体に組み込まれているjQueryを安全に利用する方法を解説いたします
TypeError: $ is not a functionエラーの修正方法
ワードプレスでjQueryが読み込まれていることをまずご確認ください
サイトにJqueryが正しく読み込まれているかソースコードを表示して確認します。
混在コンテンツでｊQueryがブロックされていないかを確認されてください。
HTTPSのサイトで下記のようなHTTPでの読み込みコードでJQUERYが読み込まれている場合ブラウザーが読み込みをブロックしていることがございます。
<script src="ｈｔｔｐ://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
この場合、http://をhttps://に書き換えます。
ワードプレスでjQueryが読み込まれているのにこのエラーが出る理由
このエラーは、ワードプレスで$によるjQuery標準の関数指定方法が許可されていない為です。ゆえに、jQueryの$による様々な処理は使用が出来ないとお考えください
解決方法１：$では無くjQueryを使う
下記のようにすると、正しくjQueryを呼び出して使用する事が出来ます
修正前(エラーが出ます)
$(document).ready(function(){
var myelement = $( '.elem' );
// jQuery コード
});
修正後
jQuery(document).ready(function(){
var myelement = jQuery( '.elem' );
// jQuery コード
});
解決方法２：$を使用可能にする
下記のようなコードでjQueryのプログラムをかこってしまうと$が利用できるようになります
(function($) {
// jQuery コード
var myelement = $( '.elem' );
})( jQuery );
このコードは、＄とjQueryの指定を(function($) {内だけで入れ替えてしまう処理です。
どうてもそのまま＄を利用したい場合
ｊQUERYのライブラリ等をインクルードしていて、＄を必ず利用しなければいけない時は、下記のコードを＄を利用する前に挿入することで普通に＄を利用することが可能です。
var $ = jQuery.noConflict();
jQueryがテーマでは使えない場合はワードプレスの標準のjQueryを利用できるようにします
いくつかのテーマではフロントエンド(テーマの出力サイト)の方でjQueryがそもそも読み込まれていないことがございます。
この場合、テーマのFuinctions.phpに下記を記載されてください。
add_filter('wp_enqueue_scripts',function() {
wp_enqueue_script('jquery', false, array(), false, false);
});
