WordPressでjQueryを問題なく使用する方法
WordPressには、デフォルトでjQueryが実装されています。ただし、これには少々クセがありまして、「$()関数」が使えないんです。
理由は、ほかのJavaScriptライブラリにも「$()関数」が使われている場合にケンカ（衝突。コンフリクトというらしい）するのを防ぐためで、ソースコードの一番最後に「jQuery.noConflict();」という記述が入っています。
このような措置が取られている場合、スクリプトのソース上で対処する方法もありますが、色々試した結果、
「WordPress標準のjQueryを読み込まないようにする」
↓
「CDNやダウンロードしたjQueryを普通に読み込む」
という方法が良さそうです。
特にWordPress以外でのコーディングに慣れていらっしゃる方は、まさにこの方法で対処できるかと思います。
コードですが、header.phpに記述する場合は下記のようにします。
（ダウンロードしたjQueryファイル使用例）
|
1 2 3 4 5 6 |
<!-- WordPress標準のjQueryを読み込まない--> <?php wp_deregister_script('jquery'); ?> <!--用意したJQueryを読み込む --> <script type="text/javascript" src="<?php bloginfo(template_url);?> /common/js/jquery-2.2.1.min.js"></script> |
ほかにも、WordPress特有の「functions.php」に記述する方法もあります。
（CDN使用例）
|
1 2 3 4 5 6 |
/* WordPress標準のjQueryを読み込まず、用意したJQueryを読み込む */ function my_scripts_method() { wp_deregister_script('jquery'); wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js', array(), '2.2.2'); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); |
この場合は、wp_head()部分で読み込まれる形となります。
ちなみに上記の事を行ってもうまく動かない場合は、jQueryの読み込み以外の問題である場合も考えられます。
例えば、jQueryは読み込まれているはずなのにLightBoxが動かない！といった場合（私もぶつかりました^^;）は、該当の呼び出しソースの位置を変えるとうまく動作したりする事もありますのでお試しを。
私もぶつかった問題で、LightBoxの場合は「</body>」の直前に下記を入力するといいみたいですよ。（ファイルの場所はご自身の環境に合わせて下さい。）
|
1 2 3 4 5 |
<!--lightboxx--> <link rel="stylesheet" href="<?php bloginfo(template_url);?>/js/lightbox/css/lightbox.css"> <script type="text/javascript" src="<?php bloginfo(template_url);?>/js/lightbox/js/lightbox.js"></script> </body> |
困っている方は一度お試し下さい。
もういっこ追加で補足すると、
プラグインでLightBox系を使用する場合、そのプラグイン自体がjQueryを別で読み込んできて動作に支障を来す場合もあるようです。
jQuery系のプラグインを使用する場合は注意してくださいね。
公開日：2016年3月21日
最終更新日：2016年4月8日
