WPサイトが重くなる原因の１つ？「wp_enqueue_script」でjQueryの多重読み込みを解消する方法
便利なJavaScriptjライブラリ『jQuery』。
なんぞそれ？という方のためにもイメージしやすいように簡単に説明すると、
JavaScript（以下、JS）というサイトを動的に動かす指示を出したりすることができるコードがあるんですが、このJSコードをもっと容易に書くことができる便利なライブラリなんです。
”スクロールさせたらメニューを固定させたい！”
”スルスルっとアンカーリンク先やトップページにスクロールさせたい！”
”写真のスライドショーを入れたい！”
などなど、サイトを動的にできるとっても便利で楽しいJS。
JSプラグインを多用していたら、一度はぶつかる壁？
jQueryと同じような位置づけでPrototypeというのもあるんですが、
数年前、Prototypeを使ったプラグインとjQueryと使ったプラグインとがドバっと出て「便利便利～♪」と色々混ぜて使っていたら、jQueryとPrototypeが競合（コンフリクト）して上手くプラグインが動かない…という、JSプラグインを色々使い始めたらぶつかる壁なんかもありました。（懐かしい笑）
私の場合は、”超多機能で便利でこの機能は全部使う予定！” とか ”結構ややこしいから自分でソース書くの億劫…、時間が惜しい” というような場合でない限り、自分で書いてしまうのが一番シンプルでいいや。という結論に至ってます＾＾；
まずは読み込み元などを確認、そして解決策を考える。
静的なWebサイトを制作している時はCDNを使用して読み込んでいるので、WordPress（以下、WP）で作っているこのサイトにも適用させていたのですがサイトの読み込み速度をチェックしようととりかかった日曜日。
まずソースをチェックしたところ、「あれ・・・jQueryが複数読み込まれてる！」と気づきました。
なんてこった！
- <?php wp_head(); ?> でWPに元々内包されているjQuery
- 私が書いたjQuery
- 使用しているプラグインのjQuery
冒頭で便利便利といったjQuery。
細かいことを話すと、コードのバージョンも色々あって日々最新化されているのですが、プラグインによっては最新版jQueryだと上手く動かない…なんてことも出てきたり。
そしてjQueryを複数読み込むと、上手く動かないこともありますがサイトの読み込み速度が低下する原因の１つでもあります。
jQueryに限った話ではなく、色々なコードを読み込むとその分だけ通信量が増える＝サイトが重くなることになる訳ですね。
ということで、私のサイトで読み込まれていた複数のjQueryを１本化させます！
ここから本題。wp_enqueue_script関数で、jQuery読み込みを一本化
wp_head(); で読み込まれるのを除外しても、使用してるWPプラグインで使ってるjQueryはプラグインのファイルから直接カスタマイズかなー・・・とか考えながら、検索してみたところ
スマートなやり方が！ 「wp_enqueue_script関数」
function.phpに追記するだけでokで、とってもシンプル。
wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false )
$handle スクリプトの識別名
$src スクリプトへのパス(オプション)
$deps 依存するスクリプトの識別名を配列で列挙(オプション)
$ver バージョン(オプション)jquery や prototype.js, scriptaculous なんかはデフォルトで登録されているので、$handle を渡すだけでOK。
wp_enqueue_script のススメdogmap.jp
WordPress 同梱の jQuery 以外を使う方法dogmap.jp
上記のサイトを参考に、私のサイトで入れてるコードはこちら。
function load_jquery() {
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', array(), '1.8.2');
}
}
add_action('init', 'load_jquery');
Googleが提供しているCDNを使用しています。
jQuery ver.1.8.2は最新版ではないのですがこのバージョンで不自由もなく、先に述べたように最新版にすると不具合が出てくる可能性もあっていちいちチェックするのが・・・なので、このバージョンを使用しています。
このようにこの関数を使うことで、wp_head();から呼び出して読み込んでいたjQueryだけでなく、WPプラグインから呼び出していたjQueryも消し去り、まさに一本化できました！やった！
