【ワレコのjQuery講座】WordPressでjQueryのon readyのやり方

WordPressでjQueryを使う場合には幾つかの注意が必要だ。

今日覚えた手法をワテの備忘録を兼ねてメモしておく。

一般のWEBプログラミングでjQueryを使う場合には、$記号を使えば良い。

ところが、WordPressの中では $ を使うと

Uncaught ReferenceError: jQuery is not defined.

と言うエラーメッセージが出る。

理由は良く知らない。

ではどうするかと言うと、$の代わりにjQueryそのものを使えば良い。

でも、そうすると、プログラムの中にjQueryと言う単語が至る所に出て来る。

また、自作のプログラムでは$で書いているものが殆どなので、コピペしてWordPressに組み込もうとすると$をjQueryに置き換える必要があり、面倒。

今日は、その対策を覚えたので以下、手法をメモしておく。

WordPressでも$のままjQueryを使う方法
1. WordPressで$を使う場合の手法１
2. WordPressで$を使う場合の手法２
$(document).on(‘ready’, は廃止された
まとめ

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>