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

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

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

先程にも書いたがテーマ等状態にもよるから、そもそも無い可能性もなくはない。
ある場合にそれを使用、またはアップデートする方法。

Headerタグ内にあるものを使いたい

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>

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

既存と新バージョン、並立させたい

既存が読み込まれる前に

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 下記は外部ファイルにしても良し -->
<script>
jQuery.noConflict();
var j3$ = jQuery;
(function($){
    // この中では$がjQueryとして使える。
    alert($.fn.jquery);
})(j3$);
</script>

これでまぁエラーは起きない。