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を読み込ませない --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
これで、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);?>を入れて絶対パスにしないとエラーになってしまうのです。
いかがでしょう。参考になれば幸いです!
[…] 参考HP http://sensebahn.com/develop/389 参考HP http://webdesignrecipes.com/anythingslider-in-wordpress-with-jquery/#&panel1-1 […]
非常に簡潔でわかりやすかったです。ありがとうございます!
お役に立てて嬉しいです!
[…] 参考にしたサイトは以下です。 http://sensebahn.com/develop/389 http://kininarunet.com/jquery-pagetop.html […]
[…] WordPressでjQueryを使う一番シンプルな方法 WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 顔面・画面蒼白!WordPressの記事内ではjavascriptは動 […]
[…] WordPressでjQueryを使う一番シンプルな方法 : Sensebahn […]
[…] WordPressでjQueryを使う一番シンプルな方法 : Sensebahn […]
[…] ※参考にしたサイト WordPressでjQueryを使う一番シンプルな方法 header.phpのwp_head()の上に下記のように記述しています。 <?php […]
[…] WordPressでjQueryを使う一番シンプルな方法 […]
[…] ※参考にしたサイト WordPressでjQueryを使う一番シンプルな方法 […]
[…] さらに調べてみると、Sensebahnさんの記事にヒット。 WordPressに組み込まれているjQueryを無効化して、 自分で用意したjQueryを読み込ませる方法。 […]