WordPress独自のjQueryを読み込まずに普通のjQueryを読み込む方法

WordPressでjQueryを使おうとすると少し面倒な事態が起きます。

WordPressは手動でjQueryを読み込まなくても最初から勝手に読み込んだ状態になっているのですが、このjQueryのせいで「$」を使ったスクリプトが正しく動かなかったりする場合が結構あります。

理由はjQuery.noConflict();という関数がWordPress内で実行されていて、「$」などを使うjQueryと似たようなフレームワークと他のフレームワークが衝突することを避けているためです。

なのでjQueryを使うときは「$」が使えないし、かといって手動で普通のjQueryを読み込むと2重で読み込んでしまうのでエラーになりかねません。

 

というわけで、WordPressに最初から読み込まれているあの使いづらいjQueryを読み込まないようにして、普通のjQueryだけを読み込むようにする方法を紹介します。

 

WordPress jQueryを読み込まない

解決は簡単で、以下のコードをheader.phpの<head>内にコピペします。

<?php wp_deregister_script('jquery'); ?>
<!-- WordPressのjQueryを読み込ませない -->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 

WordPress独自のjQueryを読み込まないようにし、手動でjQueryをcdnで読み込んでしまいます。

やること自体はたったこれだけです。

 

jQueryをダウンロードして読み込むのもできなくはないですが、無駄に面倒だしcdnの方が速度が早いのでわざわざダウンロードするメリットはありません。