ヨッチ こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。
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がちゃんと動作してくれれば嬉しいです。
僕と一緒にブログを楽しんでいきましょう！
