【WordPress】jQueryの導入手順(読み込み、使い方)【JavaScript】

「jQueryを使うにはどうしたらいいの?」
「WordPressだとjQueryがうまく動かない」
こんな悩みにお答えします。
初心者の「WordPressでjQueryがうまく動かない」という人の原因はこれが多いです。
一般的なjQueryでは「 $ 」と書くものを、WordPressでは「 jQuery 」と書きます。
// 一般的なjQueryの使い方 $(function(){ // ここに処理を書いていきます。 }); // WordPressのときのjQueryの使い方 jQuery(function(){ // ここに処理を書いていきます。 });
この記事では、以下のことがわかります。
- 一般的なjQueryの使い方
- WordPressのときのjQueryの使い方
記事を読み終えると、jQueryを使ってWebサイトにさまざまな機能を追加していくことができます。
- 目次
一般的なjQueryの使い方
読み込む
jQuery本体を読み込む方法は以下の2種類あります。
- ダウンロードしてFTPからアップロードする
- CDNから読み込む
jQuery本体といってもバージョンがいくつもあり、どれを使っていいのか迷うと思います。
2020年4月の段階だとjQuery3.4.1が最新ですが、jQuery2系で十分だと思います。使用したいjQueryプラグインが動かない場合は、適宜バージョンを変更してみてください。
ダウンロードしてFTPからアップロードする
- jQuery公式からjQuery本体をダウンロードします。
- ディレクトリ構成やファイル名によりますが、jsフォルダにjquery.jsをアップロードした場合は、以下のscriptをhtmlのhead内にコピペしてください。
-
<script src="./js/jquery.js"><script>
CDNから読み込む
以下のscriptをHTMLのhead内にコピペしてください。
jQuery公式かGoogleのどちらを使うかは好みでかまいません。
特に理由はありませんが、私の好みはGoogleのほうです。
- jQuery公式
-
jQuery 3.x <script src="https://code.jquery.com/jquery-3.4.1.min.js"><script> jQuery 2.x <script src="https://code.jquery.com/jquery-2.2.4.min.js"><script>
-
jQuery 3.x <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><script> jQuery 2.x <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"><script>
書く
jQueryの指示や、プラグインのオプションを、HTMLソースのhead内、または、bodyを閉じる前に書いていきます。
必ず読み込んだjQuery本体より下に書いてください。jQuery本体より上に書くと動きません。
<script> // 短縮版で書くのが一般的です。 $(function(){ // ここに処理を書いていきます。 }); // 正式版で書くとこうなります。 $(document).ready(function(){ // ここに処理を書いていきます。 }); </script>
ここまで書いたら、一度、jQueryが正しく読み込まれているか、書き方が間違っていないかチェックします。
<script> // 読み込みチェック $(function(){ alert("test"); }); </script>
「test」というアラートがでたら成功です。
プログラム全体にいえることですが、こういった確認をしていくことでプログラミング作業が効率的にすすみます。
初心者のころは、こういった確認せずに作業をすすめて動かない原因が全然わからず、半日、一日を費やすということをやりがちです。
- 初心者がよくやるミス
-
- つづりが間違っている(タイピングミス)
- どこかからコピペしてきたプログラムが間違っている
- jQuery本体より下に書いていない
WordPressのときのjQueryの使い方
WordPressの場合とても便利なプラグインがたくさんあるので、基本的にはjQueryを使ってカスマイズをする必要はないです。
ただ、仕事としてカスタマイズが必要で希望する動きや機能のプラグインがない場合や、オリジナルの機能を実装したい場合は、jQueryの知識が必要になることがあります。
読み込む
WordPressの場合は、デフォルトでjQueryが読み込まれているので特に何もする必要がありません。
念のため、htmlソースを確認してもらい、jQueryが読み込まれていることを確認してみてください。
chromeの場合だと、右クリック→「ページのソースを表示」からhtmlソースを確認できます。
ドメイン、バージョンのところはサイトによってそれぞれ違います。
<script type='text/javascript' src='//localhost/wp5/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
デフォルトjqueryを読み込まない場合は以下を書きます。
wp_deregister_script('jquery');
基本的には、自動で読み込まれるので必要ありませんが、特定のページだけデフォルトjqueryを読み込むというような場合は以下を書きます。
wp_enqueue_script('jquery');
書く
jQueryの指示や、プラグインのオプションを、header.phpのhead内、または、footer.phpのbodyを閉じる前に書いていきます。
必ず読み込んだjQuery本体より下に書いてください。jQuery本体より上に書くと動きません。
<script> // 短縮版で書くのが一般的です。 jQuery(function(){ // ここに処理を書いていきます。 }); // 正式版で書くとこうなります。 jQuery(document).ready(function(){ // ここに処理を書いていきます。 }); </script>
ここまで書いたら、一度、jQueryが正しく読み込まれているか、書き方が間違っていないかチェックします。
<script> // 読み込みチェック jQuery(function(){ alert("test"); }); </script>
「test」というアラートがでたら成功です。
うまく動かない場合
WordPressデフォルトのjQueryと、使用したいjQueryプラグインの相性やバージョンが対応していないことが考えられます。
WordPressデフォルトのjQueryの読み込みをやめて、一般のjQueryを読み込む場合は、functions.phpに以下のように書きます。
function custom_print_scripts() { if (!is_admin()) { //デフォルトjquery削除 wp_deregister_script('jquery'); //GoogleCDNから読み込む wp_enqueue_script('jquery-js', '//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js' ); } } add_action('wp_print_scripts', 'custom_print_scripts');
注意点として、ひとつのjQueryプラグインのためにデフォルトjQueryを削除してしまうと、WordPressのプラグインが動かなくなることがあります。
複数のWordPressプラグインを使用している場合は注意してCDNやダウンロードしたjQueryに切り替えてください。
もし、これによってWordPressプラグインが動かなくなって困る場合は、jQueryプラグインの使用はあきらめてデフォルトjQueryに戻してください。
カレンダー系のプラグインはWordPressデフォルトjQueryでないと動きませんでした。
WordPressのjQueryが最新版(v3.5)に更新されました
WordPressのデフォルトjQueryは長いあいだjQuery1.x系から更新されていませんでしたが、WordPress5.6でjQueryの最新版(おそらくjQuery3.x系)が導入されるようです。
もし、長らく更新されていないWordPressプラグインを使う場合(すでに使っている場合)、jQeuryのバージョンアップが原因でプラグインが動かなくなっても対応してくれるかどうかわかりません。
何年も更新されていないjQuery依存のプラグインは今後使わないほうがよいでしょう。
また、自分でつくったプラグインや機能の場合も、jQuery3.x系に対応できるようにしておく必要があります。
以下の記事によると、WordPressのjQueryが最新版になるのは2020年内という見通し。
WordPress同梱のjQueryがついに最新版にアップデート - ニュース - Capital P - WordPressメディア
WordPressにはjQueryが同梱され、サイトの随所で利用されているが、そのバージョンがついに最新版(現時点では3.5系)にアップデートされることがmakeブログで発表された。これまでは1.x系にパッチを当てたもの […]
(2020.12.27追記)
2020.12.9リリースのWordPress5.6より、WordPress同梱のjQueryが3.5にバージョンアップされました。
- POINT
-
- WordPressのjQueryがバージョンアップされたので、新しいバージョンに対応する必要がある。
- WordPressをアップデートするときは、不具合がおきる可能性があるのでテスト環境などで十分チェックする必要がある。
- 数年更新されていないWordPressプラグインはできるだけ使わないほうがいい。
動作チェック
まとめ
jQueryの導入手順(読み込み、使い方)について解説しました。
- jQuery本体を読み込む(ダウンロード or CDN)
- 決まった記法でjQueryの処理を書く
- jQueryの処理は必ずjQuery本体より下に書く
- WordPressでは、処理の先頭に書く記号は「 $ 」ではなく「 jQuery 」と書く
- WordPressのjQuery本体はバージョンが古く一般的なjQueryと少し違うので、動かないjQueryプラグインもある
jQueryを応用していくともっといろいろな動きをつくったり、便利なプラグインを使っていくことができます。