WordPressには標準でjQueryが同梱されている。
これはWordPressで制作されているサイトで必ず読み込まれるわけではなく、プラグインでjQueryを必要とするものがあった時に読み込まれるようになっている。
そのような条件で実際にjQueryが読み込まれるとき、デフォルトではHTMLのhead要素内で読み込まれてしまう。(※追記参照)
具体的にはwp_head()関数が記述されている部分に出力されることになるので、head要素の最下部あたりになるのではないでしょうか？
<html>
<head>
(ここでjQueryが読み込まれる)
</head>
<body>
</body>
</html>
jQueryのコードはそのhead要素内にインラインで出力されるわけではなく、別ファイルとして存在するものを以下のコードによって読み込む形になる。
<script src='http://ドメイン名/wp-includes/js/jquery/jquery.js?ver=バージョン番号'></script>
<script src='http://ドメイン名/wp-includes/js/jquery/jquery-migrate.min.js?ver=バージョン番号'></script>
※ 私の開発環境ではデフォルトでwp_head()部分に出力されているのですが、プラグイン側の設定によってはwp_footer()部分での出力になるケースがあるかもしれません。
jQueryを必要とするプラグインでは、出力先をwp_head()またはwp_footer()のどちらかにするかの設定を「wp_enqueue_script」というWordPress専用関数によって選ぶことができます。(後述)
jquery-migrate.min.jsとは何か？
jquery.jsはjQuery本体のファイルです。
そして、jquery-migrate.min.jsはjQueryの過去バージョンとの互換性を維持するためのファイルになります。
WordPressと同じく、jQueryもアップデートを重ねるにしたがって非推奨の関数や、廃止になった関数が存在します。
様々なプラグインがインストールされることを想定されるWordPressでは、jQueryの過去バージョンでしか正常に動作しないプラグインがあった場合でも不具合が発生しないようにデフォルトでjquery-migrate.min.jsが読み込まれるようになっています。
全体の手順
全体の流れとしては以下の順番で作業を行います。
- まずはWordPress同梱のjQueryの読み込みを中止します。
- その後でGoogle CDNのjQueryをwp_footer()部分に出力。
WordPress同梱のjQueryの読み込みを中止する
WordPressに登録されているJavaScriptの読み込みを中止するにはwp_deregister_script関数を使います。
jQueryを解除するためには以下のように書きます。
wp_deregister_script( 'jquery' )
参考ページ：関数リファレンス/wp deregister script – WordPress Codex 日本語版
function.phpに書く際には上記コードをユーザー定義関数として包んでフックさせる必要があるので、以下のようなコードになるでしょう。
function load_google_cdn() {
//jQueryを登録解除
wp_deregister_script( 'jquery' );
}
add_action( 'init', 'load_google_cdn' );
注意点：上記コードはWordPress管理画面にも効果が及ぶため、使用しているプラグインによっては管理画面上での動作に問題が出るかもしれません。そのような問題が出た場合には以下のようにis_admin関数を使って管理画面は除外すれば良いでしょう。(私の環境では管理画面を除外しなくても問題が起きていません)
function load_google_cdn() {
if ( !is_admin() ){
//jQueryを登録解除
wp_deregister_script( 'jquery' );
}
}
add_action( 'init', 'load_google_cdn' );
Google CDNのjQueryをwp_footer()部分に出力させる
WordPress同梱のjQueryを解除したら、次にGoogle CDNのjQueryを出力します。
登録にはwp_enqueue_script関数を使います。
wp_enqueue_script( ハンドル名, ファイルのパス, 依存するスクリプトのハンドル名, バージョン番号, フッターで読み込むかどうか )
参考ページ：関数リファレンス/wp enqueue script – WordPress Codex 日本語版
実際の記述例としては以下のようになります。
wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), NULL, true );
私は個人的な昔からの流れでバージョン1.10.2を使用していますが、URLのバージョン番号の部分は最新のものなどお好きなものに変更してください。
Google CDNに置いてあるjQueryにはどのバージョンがあるのかは、以下のページでわかります。
参考ページ：Google CDNにホストされているjQueryのバージョン一覧
もちろんこのコードもfunction.phpに書く際にはユーザー定義関数で包んでからフックさせる必要があるので、以下のようにしてからfunction.phpに追記することになります。
function load_google_cdn() {
if ( !is_admin() ){
//jQueryを登録解除
wp_deregister_script( 'jquery' );
//Google CDNのjQueryを出力
wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), NULL, true );
}
}
add_action( 'init', 'load_google_cdn' );
もし、wp_footer()部分ではなくwp_head()部分で読み込みたいのなら、上記コードを以下のように変更すればOKです。(第5引数をfalseに変更、または省略)
wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), NULL, false );
さらにもし、以下のようなコードにすれば(第4引数をNULLではなくバージョン番号に変更)、
wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), '1.10.2', true );
HTML上で出力される際には以下のようにURLの末尾にバージョン番号が付加されます。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=1.10.2'></script>
Twitterでフォローする
