WordPressでjQueryが動かない時の原因と解決法
WordPressでブログやサイトを運営していると、jQueryを使用する事も多いと思います。
私もよく使いますが、うっかりすると「自作したjQueryが動かない…」どうするんだっけ？となる事が結構あります。
そこで今回は、ワードプレスでjQueryを使おうとしてハマる時のパターンと解決法です。
～ 目次 ～
”$”を使ってしまっている
どこかで見つけたソースをコピペで使おうとして、うっかりやってしまいがちなのがこれです。
通常、下のように”$”を使って記述されていると思います。WordPress上では、これでは動きません。
NGな書き方
|
1 2 3 |
$("p.joytoy").on("click",function(){ $(this).text("М字っ！！"); }); |
動く書き方
これをWordPressで動かすには下の様に”$”を”jQuery”に書き換えます。
|
1 2 3 |
jQuery("p.inrin").on("click",function(){ jQuery(this).text("М字っ！！"); }); |
$とjQueryを書き換えた場合の実際の動作
ジョイトイ（p.joytoy）
インリン（p.inrin）
このページ上に、実際に上の2つのコードが記述されています。どちらも指定したクラスの付けられたPタグをクリックするとテキストが「M字っ！！」と書き換わるコードですが、ジョイトイの方は”$”で書いているので動きません。jQueryに書き直したインリンの方は、クリックすればちゃんと「M字っ！！」とテキストが書き換わります。
ちなみに「インリン古っ！」と思った方も、「何それ？」と思った方も居るかもしれませんが、インリンさんは今でもお綺麗ですよ。お母さんになって頑張ってらっしゃいます。M字開脚はもう見られませんけどね。。。あまりインリンさんの事を書いて、「インリン・オブ・ジョイトイ」で検索上位とかになっても困るのでもうやめます。
とにかく、$で書いてあるコードはjQueryに書き直しましょう。
読み込みタイミングが悪い
これはWordPressに限った事ではありませんが、jQuery本体より先に読み込んでいたり、HTMLの最後で読ませるべきなのにhead内で読み込んでしまっていたりしては当然動きません。適当に読み込ませると、この読み込みタイミングのせいで動かない事が結構あります。読み込ませ方が悪いのかな…？と思ったら、前にファイルの読み込ませ方をまとめた記事がありますので、こちらも参考にどうぞ。
ワードプレスでオリジナルのjavascript（jQuery）ファイルを読み込む方法
最後に
jQuery、動きました？？インリンが気になって、ググってそのままネットの大海原へ旅に出ちゃったりしませんでした？
しかし、jQuery使おうとすると、結構ハマるんですよね。$書いてたり、読み込めてなかったり…散々ハマって、コード自体ミスってたり…。まぁ腕と頭が悪いという事なんですが。
みなさんのjQueryが動きますように…では！
