2022年04月27日

jquery：1.jQueryの導入と記述の基本

jQueryはJavaScriptをより簡単な文法で利用できるスプリプト言語です。

利用者は

①jQueryライブラリ

②jQueryで記述したユーザプログラム

をデバイス側に送り込むことで、デバイス側のユーザ操作を処理する事ができる様になります。

メモ

WordPressはWordPress独自のjQueryライブラリを維持管理しています。

よって他のjQueryライブラリを読み込まなくてもjQueryは使えますが、記述方法が他のライブラリとは異なります。

そこで本サイトではWordPressのjQueryの解説は行っていません。

どうしてもこれを利用したい場合は本サイトの事例の「$」を「jquery」に置き換えて試してみてください。

ここでは下記の順番でjQueryを解説していきます。

■$(function(){ XX }); の必要性

jQueryライブラリの種類

jQueryライブラリにはダウウンロードして使う方法と、jQueryライブラリのURL（CDN）を指定する方法があります。

CDN方式の方が簡単なので、このサイトではCDNを使う方法で解説していきます。

CDNを提供しているJQueryライブラリには下記のような物があります。

①GoogleのCDN

②jQueryのCDN

③MicrosoftのCDN

私は①のGoogleのCDNを利用しています。

次にGoogleのライブラリにも下記の種類があります

　 GoogleのjQueryライブラリ

GoogleのJQueryには1系、2系、3系があり、それぞれ維持更新されています。

・1.x系はIE8以前をサポートする

・2.x系はIE9以降をサポートする

・3.x系は再設計された最新のもの

当然、3系が最新です。

しかし、他のライブラリ(bootstrap3等)も併せて使いたい場合は、そのライブラリが何系使っているか？で3系が使えない時もあります。

その様な時は、そのライブラリに合わせた1系等を使うか？bootstrap3でなく4を使う等々の対策が必要になります。

また最新ライブラリバージョンは下記URLを開いて「Jqueryの項目」を見て下さい。最新のバージョンが判ります。

googleライブラリバージョン

現在は下記になっています。

jQuery
3.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
2.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
1.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

次は上記のライブラリを何処で定義するか？になります。

jQueryの定義場所

header.phpで定義する

WordPressの画面は必ず『header.php』が呼び込まれます。

そこで、このファイルの中の<head>～</head>の間に下記を記述します。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='<?php echo get_stylesheet_directory_uri();?>/js/my-jquery.js'></script>

1行目

ここでGoogleのJQueryライブラリの3系を読み込んでいます。

2行目

jQueryで記述したユーザプログラムファイルを読み込んでいます。

上記では「JSフォルダ」の中の「my-jquery.js」ファイルを読み込んでいます。

get_stylesheet_directory_uri()の使い方はリンク先を見て下さい。

以上でjQueryライブラリとユーザのjQueryプログラムがデバイスに送付されます。

function.phpで定義する

WordPressでは『function.php』が最初に実行されます。

この中でJQueryライブラリやユーザプログラムを定義します。

下記は最低限のサンプルです。

function theme_setting() {
	/* スクリプトファイルの読み込み */
   wp_enqueue_script('jQuery' , 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js');	// GoogleのjQueryライブラリ
   wp_enqueue_script('my_js' , esc_url(get_stylesheet_directory_uri()) . '/js/my_jquery.js');							// 自分で作成したプログラム
   /* CSS関連ファイルの読み込み */																					
}
add_action('wp_enqueue_scripts', 'theme_setting');

詳細な使い方はアクションフックのwp_enqueue_scripts を見て下さい。

上記のアクションフックはheader.phpの<head>～</head>の中のWordPressの必須関数wp_head()で展開されデバイスに送信されます。

私は『header.php』でなく『function.php』方式を利用しています。

理由は『header.php』がスッキリして見やすくなるからです。

jQueryjQueryプログラムの推奨構造

私はデバイス側に送られる[js]ファイルの構造を下記の様にしています。

①JavaScript で記述されたユーザ関数

②総てのページで動くjQury処理

③特定ページだけで動くjQuery処理

①JavaScript で記述されたユーザ関数

私の場合は、下記を先頭に記述しています。

function rgb_hex(color){
  return "#" + color.match(/[\d]+/g).map(function(rgb){return ('0' + parseInt(rgb).toString(16)).slice(-2)}).join('');
}

■上記はRGBコード rgb(255,255,255) をHEXコード #ffffff に変換する関数です。

ここで記述する事により、何処からでもこの関数が利用できる様になります。

上記は RGBデータをHEXデータに変換するを関数化したものです。

②総てのページで動くjQury処理

メニュー等の総てのページに表示されるものは、このタイプになります。

$(function(){
    jQueryやJavaScriptで記述した処理
});

■$(function(){ XX });は、ドキュメントが読み込まれた後に実行する処理を意味します。

上記は、$(document).ready(function(){ XX });の省略形になります。

③特定ページだけで動くjQury処理

$(function(){
    if( location.pathname.split('/')[2] ){ return; }//TOPページ以外は終了
    TOPページの時に処理する内容（jQueryやJavaScriptで記述）
});

■始めにページ判断をして、余計なページでは処理しない様にします。

TOPページ、商品詳細ページ、商品一覧ページ等々で動く処理はこのタイプになります。

ページの判断の方法は locationオブジェクトを参照して下さい。

$(function(){ XX }); の必要性

WordPressの処理順番は下記になります。

①functions.phpの処理

②header.phpの送信

③文書の送信

④footer.phpの送信

jQueryライブラリとjQueryプログラムは上記の②でデバイスに送付されます。

jQueryプログラムの中のJavaScriptで記述した関数はこの時点でメモリに登録されます。

しかし一般のjQueryプログラムはドキュメントが読まれた後に実行する関数（④のあと）としてメモリに登録される必要がありますます。

この指定が上記の「$(document).ready(function(){ XX });」の省略形の「$(function(){ XX });」になります。

もし「$(function(){ XX });」の形式で記述しないと、プログラムはメモリ上にはありますがドキュメントが読まれた後に実行する関数という属性が無いので動きません。

よって、この指定は必須になります。

関数一覧

1.JavaScript/jQueryとは