WordPressに読み込み済みjQueryを使う

テーマ等状態にもよるのだが、結構WordPressにはjQueryが読み込まれている。

既に読み込まれているのだから使おうとして、
jQueryを使い慣れている人は『$』で使おうとするだろうが、
wordpressで使えないことに気づくかと思う。

先程にも書いたがテーマ等状態にもよるから、そもそも無い可能性もなくはない。
その対応方法。

headerにあるのに使えない場合は『jQuery.noConflict();』されている状態なので、
基本『$.~』と書かずに『jQuery.~』と書けば使える。
例えばバージョン出すなら『$.fn.jquery』と書きたくなるが『jQuery.fn.jquery』と書く。

これを踏まえて無い場合を考えて、追加するには

<script>window.jQuery || document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"><\/script>')</script>

※この書き方についてはこちらの記事(jQueryをjavascriptで呼び出す)を参照

既存がバージョンが低く、上げたい場合は

<script type="text/javascript">if(parseFloat(jQuery.fn.jquery) < 3){document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"><\/script>')};</script>

バージョンは文字列なので、そのままだと比較できない。
小数点まで判定なら『parseFloat()』、整数部だけでいいなら『parseInt()』とかに変換する。

処理内容自体は『(function($){』から『})(jQuery);』の間に書く。
この内部でだけは『$=jQuery』になる。

<script type="text/javascript">
(function($){
    alert($.fn.jquery);
})(jQuery);
</script>

このように$を使った処理が可能。

コメント

タイトルとURLをコピーしました