Webデザインに凝ってくるとHTMLとCSSによる制的なデザインだけでなく動的なデザインをしたい部分も出てきます。そこで便利なのがJavaScriptのライブラリであるjQueryですが、WordPressではjQueryのコードをそのまま記述しても動かないことがあります。その原因と対策、WordPressでjQueryを使う方法を解説します。
目次
jQueryの読み込み
WebサイトでjQueryを使うにはhead部分などでjQueryを読み込む必要がありますが、WordPressのデフォルトテーマや公式ライブラリに登録されているテーマの多くはWordPress本体に入っている標準のjQueryを読み込んでいます。
例えばデフォルトテーマのTwentySeventeenでは下記のコードをhead内で読み込んでいます。
<script type='text/javascript' src='https://lol-youseijo.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
そのため改めてjQueryを読み込ませる必要はありません。
WordPressでjQueryが使えない原因
WordPress本体に入っているjQuery（「/wp-includes/js/jquery/jquery.js」）は一般的なjQueryとは少しだけ違います。
他のスクリプトとぶつからないようにするため「noConflict」という関数が実行されており、jQueryでよく使う「$」が使えないようになっています。
これがWordPressでjQueryのコードをそのまま記述しても動かない原因です。
WordPressでjQueryを使う方法
そのためWordPressでjQueryを使う方法は以下の3つです。
- 普通のjQueryを読み込む
- $ を使わない
- $ を使えるようにする
1については普通にjQueryを読み込むだけですので割愛します。2と3について見ていきましょう。
2.$ を使わない
$ はjQueryを呼び出すための省略記号ですので使わずにコードを記述することも可能です。
例えば下記の2つのコードは同じ意味です。
<script>
$(function() {
$('#id').text();
$('.class').html()
});
</script>
<script>
jQuery(function() {
jQuery('#id').text();
jQuery('.class').html()
});
</script>
jQueryを使ってガッツリページデザインする場合はともかく、部分的にjQueryを取り入れる程度であれば省略記号を使わなくても大した手間ではないでしょう。
3.$ を使えるようにする
jQueryコードの前後を下記のコードで囲んでカプセル化してあげます。
<script type="text/javascript">
jQuery(function($){
// ここにjQueryコードを記述します。
});
</script>
上記のコードで囲んだ中では $ が使えるようになるため、Web上で見つけたコードをそのままコピペしても使えるようになります。
