WordPressでjQueryを使うにはどうすればいい？超簡単な設定方法

こんにちは！ ライターのナナミです。

WordPressのサイト作成、はかどってますか？

せっかく作るなら、要素を動かしたりしてリッチなサイトを作りたいですよね。
そんな時には、JavaScriptの王道ライブラリ、jQueryが使えると楽チンです。

「jQuery？何それ知らない…」
「WordPressでjQueryを使ってみたいけど、どうすればいいの？」

今回はそんな疑問にお答えしていきます。
WordPressでjQueryを使えるようにしましょう！

下記の流れで、どのようにすればいいのかを解説していきます。

今までjQueryを知らなかった人も、そうでない人も、素敵なサイトが作れるようサポートさせていただきます！

jQueryとは？

jQueryとはJavaScriptというプログラミング言語のライブラリです。

ライブラリは、色々な処理をいい感じにまとめてくれている便利機能だと思ってください。

jQueryはJavaScriptのライブラリの中でも王道中の王道で、JavaScript自体よりも簡単で使いやすく、ブラウザの互換性も高い便利なライブラリです。

これを使うことで、クリックした時に要素をくるっと回転させてみたり、スクロールした時に記事がふわっと出てくるアニメーションをつけたりすることができます。

詳しくは下記の記事を読んでみてくださいね。

>>jQuery徹底解説！どんなことができるようになるの？

WordPressでjQueryを使おう

さて、そんな便利なjQuery。
WordPressで使うにはどうすればいいのでしょうか。

ぶっちゃけ何もしなくていいです。

むしろ何もしないほうがいいです。

なんとWordPressには、デフォルトでjQueryが読み込まれているのです！
なので下手に何かをしてしまうと、読み込まれているjQueryと衝突してしまってきちんと使えなくなってしまったりします。

もう何も考えず、そのまま使っちゃいましょう。

他のバージョンのjQueryを使いたいときは

でも、どうしてもこのバージョンのjQueryが使いたい！

という時もあるかもしれませんね。

そんなときは、デフォルトのjQueryを下記のコードで読み込まないようにしちゃいましょう。

PHP

<?php
wp_deregister_script('jquery'); //wp_headの前に書く
?>

あとは、使いたいjQueryを読み込むコードを書けばOKです。

WordPressのjQueryのバージョン

現在使用しているjQueryのバージョンは、下記のコードをコンソールで実行することで確認することができます。

jQuery

window.alert($.fn.jquery);

下記のように、アラートとして表示してくれます。

2018年7月現在、WordPress4.9.7ではjQuery1.12.4が使われているようです。

コンソールって何…？
という方は、下記の記事で確認してみてくださいね。

>>超便利！ブラウザのコンソール機能とは？

今からでも遅くない！jQueryの勉強方法

今日初めてjQueryを知って、使ってみたいと思ったけどどう勉強すれば…

という向上心のある皆様にちょっとおまけ情報です。

下記の記事では、jQueryをどのように学ぶとよいのかを詳しく解説しています。
ぜひ併せて読んでみてください。

>>jQueryマスターへの近道！初心者はまず何をすればいい？

まとめ

いかがでしたか？

特に準備の必要もなく、リッチなサイトを作る手段があるのはありがたいですね。
今までjQueryに触れてこなかった方も、これを機会にチャレンジしてみるのはいかがでしょうか？

WordPressのjQueryを活用して、より素敵なサイトを作ってみてくださいね！