ハシウェブ

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

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

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

「jQueryを使うにはどうしたらいいの?」
「WordPressだとjQueryがうまく動かない」

悩み

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

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

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

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

目次
  1. 一般的なjQueryの使い方
    1. 読み込む
      1. ダウンロードしてFTPからアップロードする
      2. CDNから読み込む
    2. 書く
  2. WordPressのときのjQueryの使い方
    1. 読み込む
    2. 書く
    3. うまく動かない場合
    4. WordPressのjQueryが最新版に更新されます
  3. まとめ

一般的な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が最新版に更新されます

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系にパッチを当てたもの […]

POINT
  • WordPressのjQueryが数年ぶりにバージョンアップ予定なので、新しいバージョンに対応できるように準備しておく必要がある。
  • 数年更新されていないWordPressプラグインはできるだけ使わないほうがいい。

まとめ

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

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

これを応用していくともっといろいろな動きをつくったり、便利なプラグインを使っていくことができます。

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