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

スポンサーリンク

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

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

 

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

 

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

Uncaught ReferenceError: jQuery is not defined.

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

理由は良く知らない。

 

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

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

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

 

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

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
スポンサーリンク
スポンサーリンク

WordPressでも$のままjQueryを使う方法

WordPressではなく、一般のHTMLでWEBページが表示された直後に関数を実行する手法としては、

        $(document).ready(function () {
            //【方法2A】
            alert("$(document).ready( はよく使う。");
 
        });

が良く使われる。

でも、これだと$で始まっているのでWordPressの中では使えない。

$をjQueryに置き換えればWordPressの中でも使える。

        jQuery(document).ready(function () {
            //【方法2B】
            alert("jQuery(document).ready( はWordPressでも使える。");
 
        });

もし、即時関数 function(){ … } の中身が複雑で $記号も沢山出て来る場合には、それらを全部jQueryに置換すればWordPressの中でも、この上のコードを利用する事が可能だ。

でも、それは面倒である。

WordPressで$を使う場合の手法1

では、もっと良い方法は有るかと言うとある。

その方法がこれだ。

        jQuery(function ($) {
            //【方法4】
            // WordPressで$を使う場合の手法1
 
            //var ver1 = jQuery().jquery;   // これでも良い
            var ver1 = $().jquery;
 
            alert(ver1);
 
        });

こんな風に書くと、jQueryと言う単語を一個だけ使えば後は、今まで通り$を使って各種の処理を行える。

この例ではjQueryのバージョンの数字を取り出してみる例である。

 

もし自作の関数を$を使って書いていて、それらをコピペして上のコードに組み込む場合でも、普通に$記号を使って書けるので、わざわざjQueryに置換する手間が省ける。

 

この手法の肝心な点は、即時関数 function($){ … } の引数に$を入れている点だ。

これによって、jQueryオブジェクトが$に渡って来る(らしい)ので、即時関数内では$を使えば普通にjQueryの処理が出来るのだ。

WordPressで$を使う場合の手法2

あるいは、別の記述方法として、

        (function ($) {
            //【方法5】
            // WordPressで$を使う場合の手法2
 
            //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で$を使う場合の手法1

        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 () {
            //【方法1】
            // このブロックは実行されない。
            alert("$(document).on('ready' はjQuery3.0で廃止された。");
 
        });
 
 
        $(document).ready(function () {
            //【方法2A】
            alert("$(document).ready( はよく使う。");
 
        });
 
        jQuery(document).ready(function () {
            //【方法2B】
            alert("jQuery(document).ready( はWordPressでも使える。");
 
        });
 
 
        $(function () {
            //【方法3】
            alert("$(function () はこれが流行りか。");
 
        });
 
 
        jQuery(function ($) {
            //【方法4】
            // WordPressで$を使う場合の手法1
 
            //var ver1 = jQuery().jquery;   // これでも良い
            var ver1 = $().jquery;
 
            alert(ver1);
 
        });
 
 
        (function ($) {
            //【方法5】
            // WordPressで$を使う場合の手法2
 
            //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も紙も両方ある。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

JavaScriptjQueryWordPress
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント