IT

ワードプレスを使っていると、jQueryを使ったコードが動作しない時があります

WordPressを使っていると、jQueryを使ったスクリプトを使用したい場合に動作しないことがあります…

HTMLタグの貼り付け方には問題はないはずなのに、どうしても動かない!
そんな時は、原因を調べるためにブラウザのコンソールを使ってJavascriptのエラーが発生してみると、
TypeError: $ is not a function
こんな感じのエラーが表示されており、「$」を使ったコードが無効になっているのです。

WordPressでは、jQueryを他のJavascriptのライブラリを使用したコードとの衝突を回避するために、「$」を無効にしているようです。

 

“$”を使用したスクリプトを下記のように囲む

(function($){
  // ここにコードを記述
})(jQuery);
もしくは
jQuery(document).ready(function($){
  // ここにコードを記述
});

“$”を”jQuery”に置き換える

このようなコードの場合
$(function() {
  $("#menu").click(function() {
    $("#menu_area").slideToggle();
  });
});
以下のように「$」を全て「jQuery」に変更します。
jQuery(function() {
  jQuery("#menu").click(function() {
    jQuery("#menu_area").slideToggle();
  });
});
これで上手く動いてくれます!

お問い合わせフォーム

気になる方はコチラからお問い合わせ!

    必須お名前
    必須メールアドレス
    必須郵便番号
    必須ご住所
    必須電話番号
    ご相談内容
    必須メッセージ本文

    コメントを残す

    *