WordPressでjQueryが動かない時の原因と解決法

WordPressでjQueryが動かない時の原因と解決法
2018年8月9日2019年1月16日
この記事は最終更新から5年以上経過しています。内容が古くなっている可能性があります。

WordPressでブログやサイトを運営していると、jQueryを使用する事も多いと思います。

私もよく使いますが、うっかりすると「自作したjQueryが動かない…」どうするんだっけ?となる事が結構あります。

そこで今回は、ワードプレスでjQueryを使おうとしてハマる時のパターンと解決法です。

”$”を使ってしまっている

どこかで見つけたソースをコピペで使おうとして、うっかりやってしまいがちなのがこれです。

通常、下のように”$”を使って記述されていると思います。WordPress上では、これでは動きません。

NGな書き方

動く書き方

これをWordPressで動かすには下の様に”$”を”jQuery”に書き換えます。

$とjQueryを書き換えた場合の実際の動作

ジョイトイ(p.joytoy)

インリン(p.inrin)

このページ上に、実際に上の2つのコードが記述されています。どちらも指定したクラスの付けられたPタグをクリックするとテキストが「M字っ!!」と書き換わるコードですが、ジョイトイの方は”$”で書いているので動きません。jQueryに書き直したインリンの方は、クリックすればちゃんと「M字っ!!」とテキストが書き換わります。

ちなみに「インリン古っ!」と思った方も、「何それ?」と思った方も居るかもしれませんが、インリンさんは今でもお綺麗ですよ。お母さんになって頑張ってらっしゃいます。M字開脚はもう見られませんけどね。。。あまりインリンさんの事を書いて、「インリン・オブ・ジョイトイ」で検索上位とかになっても困るのでもうやめます。

とにかく、$で書いてあるコードはjQueryに書き直しましょう

読み込みタイミングが悪い

これはWordPressに限った事ではありませんが、jQuery本体より先に読み込んでいたり、HTMLの最後で読ませるべきなのにhead内で読み込んでしまっていたりしては当然動きません。適当に読み込ませると、この読み込みタイミングのせいで動かない事が結構あります。読み込ませ方が悪いのかな…?と思ったら、前にファイルの読み込ませ方をまとめた記事がありますので、こちらも参考にどうぞ。

ワードプレスでオリジナルのjavascript(jQuery)ファイルを読み込む方法

最後に

jQuery、動きました??インリンが気になって、ググってそのままネットの大海原へ旅に出ちゃったりしませんでした?

しかし、jQuery使おうとすると、結構ハマるんですよね。$書いてたり、読み込めてなかったり…散々ハマって、コード自体ミスってたり…。まぁ腕と頭が悪いという事なんですが。

みなさんのjQueryが動きますように…では!

関連のある記事

ワードプレスの管理画面メニューのラベルテキストを変更する方法

ワードプレスの管理画面メニューのラベルテキストを変更する方法

記事を読む

ブロックエディタ(Gutenberg)の編集画面にeditor-style.cssを読み込ませる方法【WordPress】

ブロックエディタ(Gutenberg)の編集画面にeditor-style.cssを読み込ませる方法【WordPress】

記事を読む

ワードプレスで管理画面やログイン画面にもファビコン・サイトアイコンを設定する方法

ワードプレスで管理画面やログイン画面にもファビコン・サイトアイコンを設定する方法

記事を読む

ワードプレスで選択した特定の記事を表示する一番(?)簡単な方法

ワードプレスで選択した特定の記事を表示する一番(?)簡単な方法

記事を読む

WordPressでカテゴリーページのタイトルを親カテゴリー付きで表示する方法

WordPressでカテゴリーページのタイトルを親カテゴリー付きで表示する方法

記事を読む

アーカイブページのタイトルから「カテゴリー:」を消す方法【ワードプレス】

アーカイブページのタイトルから「カテゴリー:」を消す方法【ワードプレス】

記事を読む

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

目次へ