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

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

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

jQueryの指示や､プラグインのオプションを､HTMLソースのhead内､または､bodyを閉じる前に書いていきます｡
必ず読み込んだjQuery本体より下に書いてください｡jQuery本体より上に書くと動きません｡

<script>
// 短縮版で書くのが一般的です｡
$(function(){
  // ここに処理を書いていきます｡
});

// 正式版で書くとこうなります｡
$(document).ready(function(){
  // ここに処理を書いていきます｡
});
</script>

ここまで書いたら､一度､jQueryが正しく読み込まれているか､書き方が間違っていないかチェックします｡

<script>
// 読み込みチェック
$(function(){
  alert("test");
});
</script>

「test」というアラートがでたら成功です｡

プログラム全体にいえることですが､こういった確認をしていくことでプログラミング作業が効率的にすすみます｡
初心者のころは､こういった確認せずに作業をすすめて動かない原因が全然わからず､半日､一日を費やすということをやりがちです｡

初心者がよくやるミス

• つづりが間違っている(タイピングミス)
• どこかからコピペしてきたプログラムが間違っている
• 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');

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は長いあいだ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と直接関係があるわけではありませんが､WordPressがIE11のサポート廃止を検討しています｡

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

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

シンプルなタブ切り替え

Webサイトでタブ切り替えする方法 3選【CSS・JavaScript・jQuery】

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

地方-都道府県-市区町村が連動するタブ切り替え

【タブ切り替え】地方-都道府県-市区町村が連動【PHP + jQuery + json】

地方-都道府県-市区町村が連動してタブ切り替えする方法したいですか？この記事では、PHP,jQuery,jsonを使って地方-都道府県-市区町村が連動してタブ切り替えする方法を紹介しています。ぜひご覧ください。

jQueryのAjax(非同期通信)を使うことで､ページ再読み込みをすることなく通信し､PHPプログラムを実行することができます｡
応用次第で検索機能やメール送信機能をつくることができますが､初心者には難易度高めです｡

Ajaxを使う例として､WordPressでAjaxを使った検索機能について､以下の記事にて解説しています｡

WordPressでAjaxを使って投稿を検索する方法【jQuery】

WordPressでAjaxを使って投稿を検索する方法を知りたいですか？この記事では、WordPressでAjaxを使った検索フォームをrangeとnumberを使った投稿ID検索を例にして解説しています。ぜひご覧ください。

CSSだけの方法､PHPを使う方法とあわせ､JavaScript(jQuery)を使う方法を解説しています｡

【カレント表示】現在ページだけデザインを変える方法 6選【ナビ】

ナビの現在のページへのリンクだけデザインを変える方法を知りたいですか？この記事では、プログラムを使わずHTMLとCSSだけで設定する方法4つと、プログラムを使う方法（JavaScript、PHP）を解説しています。ぜひご覧ください。