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

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

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

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

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

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

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

【基礎】そもそもjQueryとは?
【基礎】WordPressでjQueryを使おう
【発展】jQueryのバージョン確認方法
【おまけ】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を活用して、より素敵なサイトを作ってみてくださいね!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説