Tweet

Pocket

現在ある会社のサイトを作っている。

スタティックなHTMLで書いていたときには問題なかったjQueryのライブラリの一つであるspritmenuがwordpressへ持ってきた途端に動かなくなった。

元のHTMLで動いていたので、何かとコンフリクトしたと思われたので、とりあえずコンフリクト対策したのだが、

なぜか下記の方法では動いてくれない。

<script type="text/javascript">
jQuery.noConflict()(function($){
var j$ = jQuery;
</script>

以前MODxのサイト（MODxに元々mootoolsが使われている）を作っていたときは、上記の方法で回避したような気がするのだが、今回はなぜか回避できない。

しょうがないので、何が問題なのか、プラグインをひとつずつ外してみていくことにした。

プラグインだけで18個使用しているから結構手間がかかる。

プラグインは便利な半面、コンフリクトや更新などの問題がつきまとう。

今回はspritemenuはどうしても使いたいので、問題をひとつずつつぶしていくことにした。

上から見ていったのだか、結局16個目で見つかった。

wp-jQuery-lightboxとコンフリクトしていた。

同じjQueryでコンフリクトしていたのでわけがわからない。

探していたら下記のサイトがあったので試してみたところ、spritemenuが動くようになった。

http://bliss.dip.jp/programming/wordpress/jquery/

今回修正したのは下記の記述を

<script type="text/javascript">
$(document).ready(function(){
    $('#glovalnavi').spritemenu({
        grid:"gloval-navi.png",
        buttonwidth: 150,
        buttonheight: 60,
        speed: 500,
    });
});
</script>

$(document).readyをjQueryに変更しました。
また$もjQuery

<script type="text/javascript">
jQuery(function(){
    jQuery('#glovalnavi').spritemenu({
        grid:"gloval-navi.png",
        buttonwidth: 150,
        buttonheight: 60,
        speed: 500,
    });
});
</script>

単純に$をjQueryに変更しても動きませんでした。