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

こんにちは。@tomicciです。

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

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

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

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

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

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

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

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

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

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

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

[javascript]jQuery(function() {
  // ここにコードを記述
});[/javascript] 例)
[javascript]$(function () {
$("#navi").click(function () {
$("#navi_contents").slideToggle();
});
});[/javascript] となっていたら、以下のように「$」を全て「jQuery」に置換します。

[javascript]jQuery(function () {
jQuery("#navi").click(function () {
jQuery("#navi_contents").slideToggle();
});
});[/javascript]

どうでしょうか。動きましたか・・・!?

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

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

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

1ヶ月でHP作成!「WebCamp」

【参考記事】WebCampなら1ヶ月の短期集中でWebデザイナーを目指せる

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

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

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

ABOUTこの記事を書いた人

とみっち

5年ほど前までバンド活動してました。現在はブログを運営して暮らしています。サウンドクリエイター、webクリエイター。息子は4歳になりました。長野市出身。埼玉県本庄市在住。 【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。 @tomicci 詳しいプロフィール 【主な運営サイト】 ザ・サイベース おと風景