■著者

キノこ

ひとり料理、ひとり飲みが大好きな健康マニア。
在宅勤務&勝手に週休3日制で働くWebデザイナー。
ツイッターは日々の色んなことをつぶやきますが、
インスタはもはやブログ&動画のサムネ倉庫。YouTubeではたまに動画配信をしてます!
よかったらぜひ、↓からフォローをっ♪

Webデザイン その他

【解決】WordPressでjQueryが動かない時の対処法

投稿日:

WordPressでjQueryを使おうとした際に、エラーが出てしまい使えず、試行錯誤した末にたどり着いた対処法です。

原因

WordPressは基本的に、wp_footer();の中にjQueryのCDNが含まれているので、
wp_footer();を実行した時点でjQueryは使えるはずなのです。
しかし、「$ is not defined」というエラーが発生する場合は、以下の原因が考えられるそうです。

  • jQueryを読み込めていないうちにコードが先に実行されている
    funcions.phpを開き、wp_enqueue_scriptでin_footerを指定しているかを確認する。
    in_footerがtrueでないと、headタグの中にファイルが読み込まれてしまう。
    参考:関数リファレンス/wp enqueue script | WordPress Codex
  • WordPressがjQueryをブロック
    WordPressは、プラグインがjQueryを使用することがあるため、衝突を防ぐ仕様になっている(noConflict()を内包している)。
    それを回避するためにはカプセル化が必要。

対処法

  1. まず、wp_deregister_scriptを使って、jQueryのスクリプトを解除し、
    次に、wp_enqueue_scriptで、jQueryを読み込みます。
    			function add_files() {
    				wp_deregister_script('jquery');
    				wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1');
    				//バージョンは随時変更
    			}
    
    			add_action('wp_enqueue_scripts', 'add_files');
    		
  2. jQueryのコードを書く(書き方が通常と異なるので注意)
    $(function(){//処理})ではなく、以下のように$をjQueryに変え、さらにfunction()の括弧内に$を入れます。

    通常:$(function(){}
    変更:jQuery(function($){}
    			jQuery(function($){
    				//処理
    			});
    		

この書き方でうまくいかない場合は、他にも書き方があるみたいなので、
「jquery wordpress カプセル化」でググってみてください〜。
それでは!

-Webデザイン, その他
-, ,


comment

メールアドレスが公開されることはありません。