WordPressでjQueryが動かないときの対策

こんにちは。@tomicciです。

WordPressで運営しているブログやサイトで、jQueryを使ったスクリプトを使用したい場合に動作しないことがあります。。

HTMLタグの貼り付け方には問題はないはずなのに、どうにもこうにも動かない。
そんな時は、原因を調べるためにブラウザのコンソールを使ってJavascriptのエラーが発生していないかチェックをしましょう。

僕はFirfoxの場合はFirebug、ChromeやIEでデバッグをおこなう場合は「F12」キーで起動する開発ツールのコンソールを使用しています。※Windowsユーザーです。

「TypeError: $ is not a function」
こんな感じのエラーが表示されていたら、「$」を使ったコードが無効になっています。

WordPressでは、jQueryやPrototypeといった、他のJavascriptのライブラリを使用したコードとの衝突（コンフリクト）を避けるために、「$」を無効にしているみたいですね。

ということで、早速、解決策を以下に記載します！

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

(function($){
  // ここにコードを記述
})(jQuery);

もしくは、下記のように記述します。

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

"$"を"jQuery"に置き換える

jQuery(function() {
  // ここにコードを記述
});

例）

$(function () {
  $("#navi").click(function () {
    $("#navi_contents").slideToggle();
  });
});

となっていたら、以下のように「$」を全て「jQuery」に置換します。

jQuery(function () {
  jQuery("#navi").click(function () {
    jQuery("#navi_contents").slideToggle();
  });
});

どうでしょうか。動きましたか・・・！？

プロから直接学べるプログラミングスクールの紹介！PHPコースあり！

WordPressの勉強につまづいたら、マンツーマンでプロから習うのがオススメ。

担当の指導者（メンター）が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます！

WordPressコース

【参考記事】HTMLの勉強ならTechAcademy（テックアカデミー）のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します！卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

初心者の方はもちろん更なるスキルアップを目指す方も、現場のクリエイターと実務経験を積むことで、WEB業界への就職や自宅でSOHOとして活躍する近道となります。