WordPressでjQueryを使う場合には幾つかの注意が必要だ。
今日覚えた手法をワテの備忘録を兼ねてメモしておく。
一般のWEBプログラミングでjQueryを使う場合には、$記号を使えば良い。
ところが、WordPressの中では $ を使うと
Uncaught ReferenceError: jQuery is not defined.
と言うエラーメッセージが出る。
理由は良く知らない。
ではどうするかと言うと、$の代わりにjQueryそのものを使えば良い。
でも、そうすると、プログラムの中にjQueryと言う単語が至る所に出て来る。
また、自作のプログラムでは$で書いているものが殆どなので、コピペしてWordPressに組み込もうとすると$をjQueryに置き換える必要があり、面倒。
今日は、その対策を覚えたので以下、手法をメモしておく。
WordPressでも$のままjQueryを使う方法
WordPressではなく、一般のHTMLでWEBページが表示された直後に関数を実行する手法としては、
$(document).ready(function () { //【方法２Ａ】 alert("$(document).ready( はよく使う。"); });
が良く使われる。
でも、これだと$で始まっているのでWordPressの中では使えない。
$をjQueryに置き換えればWordPressの中でも使える。
jQuery(document).ready(function () { //【方法２Ｂ】 alert("jQuery(document).ready( はWordPressでも使える。"); });
もし、即時関数 function(){ … } の中身が複雑で $記号も沢山出て来る場合には、それらを全部jQueryに置換すればWordPressの中でも、この上のコードを利用する事が可能だ。
でも、それは面倒である。
WordPressで$を使う場合の手法１
では、もっと良い方法は有るかと言うとある。
その方法がこれだ。
jQuery(function ($) { //【方法４】 // WordPressで$を使う場合の手法１ //var ver1 = jQuery().jquery; // これでも良い var ver1 = $().jquery; alert(ver1); });
こんな風に書くと、jQueryと言う単語を一個だけ使えば後は、今まで通り$を使って各種の処理を行える。
この例ではjQueryのバージョンの数字を取り出してみる例である。
もし自作の関数を$を使って書いていて、それらをコピペして上のコードに組み込む場合でも、普通に$記号を使って書けるので、わざわざjQueryに置換する手間が省ける。
この手法の肝心な点は、即時関数 function($){ … } の引数に$を入れている点だ。
これによって、jQueryオブジェクトが$に渡って来る（らしい）ので、即時関数内では$を使えば普通にjQueryの処理が出来るのだ。
WordPressで$を使う場合の手法２
あるいは、別の記述方法として、
(function ($) { //【方法５】 // WordPressで$を使う場合の手法２ //var ver2 = jQuery.fn.jquery; // これでも良い var ver2 = $.fn.jquery; alert(ver2); }(jQuery));
こんな書き方も可能だ。
この場合にも、jQueryオブジェクトが即時関数 function($) { … } の引数の渡る。
$(document).on(‘ready’, は廃止された
jQueryを使っていてワテが良く戸惑うのは、従来は利用出来た記述方法が、バージョンアップしたら突然廃止される場合があるのだ。
その一つの例として、
$(document).on('ready', function () {
がjQuery 3.0 で廃止されてしまった。
推奨は、
$(document).ready(function () {
や、
$(function () {
と言う記述方法だ。
でもなあ、廃止する必要は無いと思うのだが。
今まで通りの記述方法も完全にサポートした上で、新しい記述方法を推奨すればいいのに。
それに、同じ on() でも、下記の形式なら今でも問題なく使えるし。
$(window).on('resize', function () { // これは問題なく使える });
何だか一貫性が無いなあと言う感じ。
もし on() 関数を廃止するなら、$(window).on(‘resize’ も廃止して、以下の形式に統一すればいいのに。
$(window).resize( function () { // これも問題なく使える });
まあ、jQueryを作っている人が誰なのかワテは良く知らないので、その作っている人がそう言う方針なら従うしかない。
まとめ
WordPressに於いて、jQueryを使う場合の手法を二種類紹介した。
ちなみに、ワテの場合には、
WordPressで$を使う場合の手法１
jQuery(function ($) {
が好みだ。
念のために今回紹介した全手法を含む完全なHTMLファイルを添付しておく。
もし皆さんも自分のパソコンで実行してみたい場合には、下のコードをコピーペーストして
test.html
などの名前を付けたファイルに保存する。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <script> $(document).on('ready', function () { //【方法１】 // このﾌﾞﾛｯｸは実行されない。 alert("$(document).on('ready' はjQuery3.0で廃止された。"); }); $(document).ready(function () { //【方法２Ａ】 alert("$(document).ready( はよく使う。"); }); jQuery(document).ready(function () { //【方法２Ｂ】 alert("jQuery(document).ready( はWordPressでも使える。"); }); $(function () { //【方法３】 alert("$(function () はこれが流行りか。"); }); jQuery(function ($) { //【方法４】 // WordPressで$を使う場合の手法１ //var ver1 = jQuery().jquery; // これでも良い var ver1 = $().jquery; alert(ver1); }); (function ($) { //【方法５】 // WordPressで$を使う場合の手法２ //var ver2 = jQuery.fn.jquery; // これでも良い var ver2 = $.fn.jquery; alert(ver2); }(jQuery)); </script> </body> </html>
注意事項としては、ファイルの文字コードはUTF-8にする事。
それ以外の文字コードを使うと日本語が化けるので。
そのように保存した test.html ファイルをブラウザーで開くと、alert関数が順番に実行されるだろう。
ワテの場合も、JavaScriptやjQueryを勉強し始めた当初は、色んなサイトで見付けたサンプルコードをコピペして自分のパソコンでひたすら実行してみて、動作を確かめた。
そう言う地道なやり方をすればWEBプログラミングの能力も少しずつ身に付く。
でも、お勧めはちゃんとした本を読む事だな。
ネット情報だけだと断片的な情報しか得られない。
良い教科書を一冊読み通すと、系統的な知識が身に付くので記憶にも残り易い。
本を読む
最後のやつはKindle版もあるので、スマホやタブレットなどでも手軽に読める。
と思ったら、他の二冊もKindleも紙も両方ある。
コメント