WordPressでjQueryを使う一番シンプルな方法

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);?>を入れて絶対パスにしないとエラーになってしまうのです。

 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。