ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

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

この記事は、最初の投稿から1年以上が経過しています。

最終更新から24日が経過しています。

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

「jQueryを使うにはどうしたらいいの?」

「WordPressだとjQueryがうまく動かない」

悩み

こんな悩みにお答えします。

初心者の「WordPressでjQueryがうまく動かない」という人の原因はこれが多いです。

一般的なjQueryでは「 $ 」と書くものを、WordPressでは「 jQuery 」と書きます。

 // 一般的なjQueryの使い方
$(function(){
  // ここに処理を書いていきます。
});

// WordPressのときのjQueryの使い方
jQuery(function(){
  // ここに処理を書いていきます。
});

この記事では、以下のことがわかります。

  • 一般的なjQueryの使い方
  • WordPressのときのjQueryの使い方

記事を読み終えると、jQueryを使ってWebサイトにさまざまな機能を追加していくことができます。

目次
  1. 一般的なjQueryの使い方
    1. 読み込む
      1. ダウンロードしてFTPからアップロードする
      2. CDNから読み込む
    2. 書く
  2. WordPressのときのjQueryの使い方
    1. 読み込む
    2. 書く
    3. うまく動かない場合
    4. WordPressのjQueryが最新版(v3.5)に更新されました
    5. WordPressがIE11サポート廃止検討しています
  3. 動作チェック
  4. jQueryを使ってできること
    1. マウスオーバーでメニューを表示する
    2. タブ切り替えする
    3. アコーディオン
  5. まとめ

一般的なjQueryの使い方

読み込む

jQuery本体を読み込む方法は以下の2種類あります。

  1. ダウンロードしてFTPからアップロードする
  2. 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>
Google
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プラグインはできるだけ使わないほうがいい。

WordPressがIE11サポート廃止検討しています

jQueryと直接関係があるわけではありませんが、WordPressがIE11のサポート廃止を検討しています。

IE11のブラウザシェアが1%を下回ったらというアナウンスですが、これは世界のブラウザシェアです。
日本ではまだ7%程度のシェアがあるようなのでサポート廃止されると影響が大きそうです。

今後、Web制作でWordPressを使用する場合は、クライアントにIE11に対応できなくなる可能性があることを十分説明するか、そもそもWordPressが本当に必要かを検討する必要があります。

動作チェック

ここまででjQueryで実際の動きをつくっていく準備ができました。

簡単なjQueryの完成形はこんな感じです。
ボタンをクリックすると「test」というアラートがでます。

See the Pen JjYoavM by hashi84 (@hashi84) on CodePen.

jQueryのかんたんな使い方は以下の記事で解説しています。

【jQuery必要?】clickイベント使い方、書き方 3選

jQueryの使い方を知りたいですか?この記事では、jQueryの使い方をclickイベントについて、また今後jQueryを学ぶ必要があるか?について解説しています。ぜひご覧ください。

jQueryを使ってできること

jQueryの使い方を理解できてくると、以下のようなことがプラグインを使わなくてもできるようになります。

マウスオーバーでメニューを表示する

ホバー・マウスオーバーでメニューを開く方法【JavaScript】【jQuery】

マウスオーバーでサブメニューを表示する方法を知りたいですか?この記事では、JavaScript、jQueryを使ったマウスオーバーでサブメニューを表示する方法を紹介しています。ぜひご覧ください。

タブ切り替えする

【HTML】タブ切り替えする方法 CSS + JavaScript + jQuery

Webサイトでタブ切り替えする方法を知りたいですか?この記事では、タブ切り替えする方法をCSS、JavaScript、jQueryのそれぞれで紹介しています。ぜひご覧ください。

アコーディオン

HTML、CSS、jQueryでアコーディオン(折りたたみ)をつくる

Webサイトにアコーディオン(折りたたみ)をつくる方法を知りたいですか?この記事では、HTML (details + summary)、CSS (checkbox + label)、jQuery(slideToggle、toggleClass)をつかってアコーディオン(折りたたみ)をつくる方法やそのメリット、デメリットを解説しています。ぜひご覧ください。

まとめ

jQueryの導入手順(読み込み、使い方)について解説しました。

  • jQuery本体を読み込む(ダウンロード or CDN)
  • 決まった記法でjQueryの処理を書く
  • jQueryの処理は必ずjQuery本体より下に書く
  • WordPressでは、処理の先頭に書く記号は「 $ 」ではなく「 jQuery 」と書く
  • WordPressのjQuery本体はバージョンが古く一般的なjQueryと少し違うので、動かないjQueryプラグインもある

jQueryを理解していくと、以下のような動きをつくることができるようになります。

  • マウスオーバーでメニューを表示する
  • タブ切り替えする
  • アコーディオン

さらに応用すると自作のプラグイン作成も可能になります。