WordPressでjQueryを使う一番シンプルな方法
WordPressでjQueryを使う一番シンプルな方法 http://ift.tt/2h87voK
WordPressを使ってサイト構築するとき、jQueryを使ってカスタマイズすることが多いと思います。
このサイトでもAjax+pushStateなどの技術を使うためにjQueryを多用しています。
WordPressでjQueryを使う
じつはWordPressにはjQueryもパッケージされているので、自分のサーバーにjQueryを置いたりGoogleなどのCDNを読みこまなくても、header.phpに<?php wp_head(); ?>と書けば必要に応じて勝手に読み込まれます。
しかし問題があります
WordPressにパッケージされているjQueryは、WordPressの独自仕様になっていて、ちょっと使いづらいんです。
具体的には、jQuery.noConflict();という関数が実行されていて(参考記事)、要はjQueryと似たような記法のjQuery以外のJavaScriptフレームワークとケンカしないようになっているのですが、故にjQueryを使うときの記法を変えないといけないし、jQueryプラグインがうまく動作しないこともあります。厄介ですね。
かと言って、自前でjQueyを読み込むと、WordPressプラグインが勝手にWordPress内のjQueryも読み込んでしまって、二重読み込みでエラーが出ます。
解決するには
もう、WordPressの独自仕様によるjQueryを「読み込ませない」設定にするのが一番早くて確実な解法かと思います。
次のコードをWordPressテーマのheader.phpの<head></head>の中に入れます。
header.php
<? php wp_deregister_script('jquery'); ?>
<!-- WordPressのjQueryを読み込ませない --> |
これで、WordPress独自仕様によるjQueryの読み込みをやめて、Googleが配信してくれているjQueryだけを読み込むことができます。もちろん自前でサーバーに設置しても良いですし、WordPressテーマの中にjQueryを置いても良いです。
ちなみにWordPressテーマの中にjQueryを置く場合は、上記と同じ場所を次のような書き方にします。
header.php
<? php wp_deregister_script('jquery'); ?>
<!-- WordPressのjQueryを読み込ませない --> < script type = "text/javascript" src="<?php bloginfo(template_url);?>/js/jquery.js"></ script >
|
<?php bloginfo(template_url);?>を入れて絶対パスにしないとエラーになってしまうのです。