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として活躍する近道となります。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。@tomicci 詳しいプロフィール【運営サイト】 ザ サイベース おと風景