Categories: JQueryWordPress

WordPress標準のjQueryをやめて、外部のjQuery読み込む

WordPress標準のjQueryをやめて、外部のjQuery読み込むには、initフックで wp_deregister_script() を使って、標準jQueryを外して、wp_enqueue_script() で、新たに登録し直します。  

add_action('init', 'my_init');
function my_init() {
	if ( !is_admin() ) {
		wp_deregister_script('jquery');
		wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array(), '1.6.1');
	}
}

google CDN

上記の例ではgoogleのCDN(Contents Delivery Network)で、最新版は、 https://developers.google.com/speed/libraries/#jquery で確認できます。

バージョン1x系
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js

バージョン2x系
ttps://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js

バージョン3x系
https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.js

バージョン3x系スリム版(Ajax機能なし)
https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.slim.js

 

バージョン1x系縮小版
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

バージョン2x系縮小版
https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js

バージョン3x系縮小版
https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js

バージョン3x系スリム版(Ajax機能なし)縮小版
https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.slim.min.js

 

jQuery CDN

本家jQueryのCDNの最新版は、 http://code.jquery.com/ で確認できます。

バージョン1x系
http://code.jquery.com/jquery-1.12.4.js

バージョン2x系
http://code.jquery.com/jquery-2.2.4.js

バージョン3x系
http://code.jquery.com/jquery-3.1.0.js

バージョン3x系スリム版(Ajax機能なし)
http://code.jquery.com/jquery-3.1.0.slim.js

 

バージョン1x系縮小版
http://code.jquery.com/jquery-1.12.4.min.js

バージョン2x系縮小版
http://code.jquery.com/jquery-2.2.4.min.js

バージョン3x系縮小版
http://code.jquery.com/jquery-3.1.0.min.js

バージョン3x系スリム版(Ajax機能なし)縮小版
http://code.jquery.com/jquery-3.1.0.slim.min.js

 

MSN CDN

MSNのCDNの最新版は、 http://www.asp.net/ajax/cdn#Using_jQuery_from_the_CDN_21 で確認できます。

バージョン1x系
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js

バージョン2x系
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js

バージョン3x系
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.js

バージョン3x系スリム版(Ajax機能なし)
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.slim.js

 

バージョン1x系縮小版
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js

バージョン2x系縮小版
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js

バージョン3x系縮小版
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js

バージョン3x系スリム版(Ajax機能なし)
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.slim.min.js

最新版確認日:2016/07/12

バージョン1x系と2x系の違い

IE8以前のバージョンまで対応しているのが1x系、 IE8以前は見捨てて、IE9以降のブラウザに対応して安定動作を優先しているのが2x系ということらしいです。

バージョン3x系の違い

3x系では、本格的にIE8を見捨ててるようです。
その他、いちばん気になったのは、Hide()とShow()の扱いの変更でしょうか。
これまで

Hide

としていた要素に対して、$(“.test”).show();で表示できた要素ができなくなる、つまり上書きしなくなるということのようです。

Hide

として、CSSで予めdisplay:none;としておき、.removeClass(“hide”)のように操作するか、ready()内で、$(“.test”).hide()とするのがいいようです。

こちらが参考になります→http://qiita.com/fmy/items/abdeeb9abaf56058c20e

.js と .min.js の違い

中身は全くおんなじ。
圧縮されているので、コードを解読するひつようがないのなら、読み込みが軽くなる縮小版を使うべき。

.slim(スリム版) の違い

スリム版は、Ajax機能を省いたもので、軽量化されています。Ajaxは使わねぇ。って言う場合は、スリム版を使ったほうがいいですね。
で、どれくらい違うかって言うと。

  • jquery-3.1.0.js 273.8KB
  • jquery-3.1.0.slim.js 218.6KB
  • jquery-3.1.0.min.js 86.4KB
  • jquery-3.1.0.slim.min.js 69.0KB
  • ちょっとでも軽量化を。といった感じでしょうか。
nakaike