2020.04.11 2020.10.04

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

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

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

この記事では､以下のことがわかります｡

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

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

目次

一般的なjQueryの使い方
1. 読み込む
  1. ダウンロードしてFTPからアップロードする
  2. CDNから読み込む
2. 書く
WordPressのときのjQueryの使い方
まとめ

一般的なjQueryの使い方

読み込む

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

ダウンロードしてFTPからアップロードする
CDNから読み込む

jQuery本体といってもバージョンがいくつもあり､どれを使っていいのか迷うと思います｡
2020年4月の段階だとjQuery3.4.1が最新ですが､jQuery2系で十分だと思います｡使用したいjQueryプラグインが動かない場合は､適宜バージョンを変更してみてください｡

ダウンロードしてFTPからアップロードする

jQuery公式から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でないと動きませんでした｡