【WordPress/cocoon】jQueryの「$ is not defined」エラーを回避するための知識

CocoonでjQueryのエラーを回避CMS
Photo by Markus Spiske on Unsplash

WordPress/Cocoonで jQuery のタイミングの話を Sagasoon.

過去の記事で、「jQueryを使ったときに $ is not defined エラーがでる問題」をご紹介しました。

【wordpress/cocoon】jQueryの「$ is not defined」エラーを回避する方法
WordPressでCocoonを利用している場合、jQueryでエラーが起きたことありませんか?「$ is not defined」などのエラーが出て、ご自身のscriptや、巷のスクリプトが動かないなんてこと、経験ありませんか?今回は、その回避方法をご紹介いたします。

そもそも、なんでこんなんなるの?という話、ちょっとだけ書いておきます。

そもそものエラーの意味

エラー自体は、「$ という表現が使えません」という内容です。
javascriptのプログラムの中で $ から始まる表現を使ってるよね、と。
それが使えませんよーというエラーですね。

$ってなんだよってお話ですが、 jQuery で使う書き方で $(“div”) みたいなものがあります。
この $ が使えないよってことです。

エラーの原因

「$ が使えないよ」っていうエラーなのはわかったけど、$ 使えないって jQuery が使えないってことか?

となりますが、それは、半分正解で半分不正解。

まだ使えない

というニュアンスです。

まだ使えないので、$は、そこの位置で使わないで

というエラーと思えばOK。
☆もちろん、この意味でない場合もありますが。

いつならいいの?

「まだ使えない」って、「時間が関係するの?」

と思ってしまいますよね。
そうじゃないです。

プログラムの順番的に、そこのタイミングでは、まだ使えない

というニュアンス。

下記の図をみてください。

(A)と(B)という時間的なタイミングがあります。
WordPressが始まり、(A)jQueryを読み込みが始まるところと、(B)読み込み終わったところです。

jQueryのルールにそったプログラミングは、(A)の位置では、まだ使えません。
jQueryがまだ読み込まれてないわけなので。
(B)の位置になると、jQuery のルールが分かるようになるので、これ以降通るプログラミングコードは、jQueryのルールに従ったものでも動作します。

したがって、今回の問題は

(A)のタイミングで動作するようなプログラミングをしてしまっていた

という話に落ち着きます。

AとBの位置って、コード上、どう判断すればいいか

全く以て、これが一番難しい話です。
jsのソースをみて、htmlのソースをみて、どこがAの位置に該当し、どこがBの位置に該当するかってのは、最初は全然分からないです。
少し勉強した人でも、onLoad以降ならOKとか、readyなんたら大丈夫とか、正確ではない話をしたりしますので、難しいです。

ただ、WordPressとCocoonのセットで考える場合は、このタイミングを分かっていれば良いかと。

  • ウィジェットのカスタムHTMLなどで jQuery は使えない
  • テーマエディタのjavascript.jsの中では jQuery は使える

まずは、このレベルが分かると、だいぶエラーが減るかと思いますよ。

実際にはウィジェット上で jQueryのコード自体は書けますが、タイミング的にエラーになるケースがあるので最初は書かないほうが得策。

まとめ

タイミングという、実によく分からない話が主軸になってしまいましたが、雰囲気掴んでいただけたでしょうか。
「お風呂に入るなら、お風呂に水をためた後に、沸かしてから入る」的なところです。水風呂は厳しいです。

WordPressに関連することは、下記のカテゴリから閲覧可能ですので、こちらもどうぞ。

WordPress関連の記事
WordPressに纏わる記事一覧です。インストール・バックアップ、プラグインの紹介や作成、Javascriptのお話や、その他 WordPressサイトの管理方法。はたまたSEO対策まで記載しています。
炭酸野郎

今日も何かを Sagasoonを運用してます。炭酸野郎です。
皆さんの「何か」が探せるべく、記事書いてます。
新卒で中堅SIerに就職→10年ちょいで退職→フリーランス→起業。副業としてのブログに目覚める(今ここ)。
時間作って、色々なことがやりたいお年頃です!

炭酸野郎をフォローする
CMS wordpress Cocoon IT
炭酸野郎をフォローする
SAGASOON

コメント

タイトルとURLをコピーしました