WordPressでjQueryが動かないときの解決策【独自の書き方を覚えよう】

ヨッチヨッチ

こんにちは!WordPressシステムマーケッターのヨッチです。
プロフィールを見る

WordPressには、最初からjQueryが組み込まれています。
なので、jQueryのコードを記述すればすぐに使うことができます。

ただ、なぜか動作しなくて困っている方も多いようです。
そこでこの記事では、ワードプレスのjQueryでよくあるトラブルの解決策をお伝えしています。

トラブルの原因さえわかれば、解決はすごく簡単だったりします。
もしあなたもワードプレスのjQueryで困っていたら、ここですぐに修正できるかもしれません。

まずは試してみるために、軽く内容をチェックしてみませんか?

【jQuery】WordPress独自の書き方とは?

jQueryを使ううえで、ワードプレスでは独自の書き方が必要になります。
この書き方がわからずに、動かなくてずっと悩んでいる方がたくさんいます。

独自仕様といっても、jQueryのソースコードを1行だけ書き換えればOKです。

たった1行の違いですが、それだけでjQueryが動作するかどうかが決まります。
コードを自作したり他サイトからコピペしたときは、必ずチェックしておきましょう!

まずは通常のjQueryを見てもらってから、WordPressのjQueryを紹介します。
それぞれ比較しながら、どんな違いがあるのかお伝えしていきます。

通常のjQuery

通常のjQueryだと、たとえば以下のようなコードが書かれています。

<script>
$(function(){
	$('#sample_text').text('Hello World!');
});
</script>

ここで注目してほしいのが2番目の行です。

$(function(){

いろんなサイトで見かけるソースコードも、このような書き方になっています。
WordPressでjQueryを使いたいときは、この2番目の行を変更します。

WordPressのjQuery

それでは、WordPressのjQueryを見てみましょう。

<script>
jQuery(function($){
	$('#sample_text').text('Hello World!');
});
</script>

2番目の行が、以下のように変わっています。

jQuery(function($){

このように書き換えないと、WordPressではjQueryが動作しません。
これはワードプレスの仕様なので、必ず覚えておくようにしましょう!

jQueryを記述する位置について

自作のjQueryを使うときは、コードを記述する位置も重要です。
どの位置かというと、</body>直前です。

<script>
jQuery(function($){
	$('#sample_text').text('Hello World!');
});
</script>
</body>

上のソースコードであれば、6行目が</body>です。
異なる場所に書くと動かないこともあるので、位置はしっかり確認しておきましょう。

jQueryの読み込みについて

他のサイトでjQueryのコードが公開されているとき、Scriptタグが省略されていることがあります。
<script></script>でコードが囲まれていなかったら、jQueryは動作しません。

<script>
jQuery(function($){
	$('#sample_text').text('Hello World!');
});
</script>

上のソースコードであれば、1、5行目です。

Scriptタグでコードを囲むのは、jQueryを使うときの基本です。
もし省略されていたら、あなた自身がタグを書き加えておきましょう。

【まとめ】書き方さえ合っていればjQueryは動く!

ワードプレスでjQueryが動かない原因は、書き方が間違っていることほとんどです。
なので、コードの書き方さえ改善すればちゃんと動いてくれるでしょう。

よくある書き方のトラブルは、ここまでお伝えしたとおりです。

  • ワードプレス独自の書き方に修正する
  • コードを記述する位置は</body>直前
  • jQueryのコードをScriptタグで囲む

つまり、以下のように記述すればワードプレスでも問題なくjQueryが動作します。

<script>
jQuery(function($){
	$('#sample_text').text('Hello World!');
});
</script>
</body>

もし動かないようであれば、jQueryのコード自体にエラーがある可能性があります。

  • コードの中身は問題ないか?
  • ID・Classは適切な値になっているか?
  • 変数が重複していないか?

上のようなポイントもチェックしてみましょう。

この記事の内容で、jQueryがちゃんと動作してくれれば嬉しいです。
僕と一緒にブログを楽しんでいきましょう!

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます!
こうしてブログでお会いできたご縁に感謝しています。