Late ran ラテラン は、ウェブクリエイターのためのキュレーションマガジン

メニュー
検索

2016/3/2更新

実は仲が悪い!?WordPressでjQueryが効かない訳

mainimg

 

WordPressサイトを構築しているときに、「jQueryが効かない!」という事例に出会ったことはありませんか?

肝心のjQueryも読み込んで、記述も問題ないのになぜか動かないjQueryのスクリプト。

パニックに陥りそうなそこのあなた、大丈夫です、落ち着いて。

この現象の裏にはこんな事実が隠されていました。

 

 

『jQueryが効かない理由』

WordPressではprototype.jsというJavascriptライブラリが使用されています。

このprototype.jsとやはりJavascriptライブラリの一つであるjQueryの「$」がコンフリクトしているため、jQueryが効かなくなるようです。

WordPressは「<?php wp_head(); ?>」を設置することでjQuery本体を読み込んでくれます。ところが、このWordpressに含まれているjQuery本体に、ちょっとした細工がされています。

なんと他のJavaScriptライブラリと競合しないようにするjQuery.noConflict()という関数が実行されています。

これが実行されているがために、jQueryの「$」が効かないという現象が発生します。

 

『jQueryを動かすには』

ではどうすればjQueryは動いてくれるのでしょうか?

解決策はいくつかあります。

 

①「$」を「jQuery」に置き換える

例えば

$(function(){

$(‘#menu’).slideToggle();

});

 

という記述を

 

jQuery(function(){

jQuery(‘#menu’).slideToggle();

});

に変更します。

 

 

②Wordpress独自のjQuery本体の読み込みをやめる

WordPressのheader.phpのhead内に次の記述を入れることでWordpress独自のjQuery本体の読み込みを止められます。

 

<?php wp_deregister_script(‘jquery’); ?>

 

後は配布されているjQuery本体をきちんと読み込ませましょう。これでjQueryはきちんと動きます。

 

 

③noConflict()を使う

$(“p “).addClass(“line”).show();

この記述を以下のように変えます。

 

$j=jQuery.noConflict();

$j(“p ).addClass(“line “).show();

 

 

WordPress初心者にありがちな失敗

少しデベロッパーツールでhead内を確認してみてください。

jQuery本体を2度読み込んでいませんか?

先にも述べたように、Wordpressは「<?php wp_head(); ?>」を設置することでjQuery本体を読み込んでくれます。

WordPress初心者の方はわりとこの点を見落としがちで、自分でjQuery本体を設置してしまいます。

自分でjQuery本体を設置すること自体はいいのですが、Wordpressが読み込んでいるjQuery本体を除く必要があります。

心当たりはありませんか?

jQuery本体を2重に読み込むと、jQueryが正常に動作しない場合があります。またWordpressの動作が重たくなることもあるのでお気を付けください。

 

 

wp_head()でjQuery本体が読み込まれないときは

もしも「<?php wp_head(); ?>」でjQuery本体が読み込まれないときは、wp_enqueue_script関数を使用して読み込ませましょう。

以下の記述を「wp_head();」の上に設置します。

 

wp_enqueue_script(“jquery”);

 

これでjQuery本体の設置は完了です。簡単ですね。

 

 

一見仲が悪そうなWordpressとjQuery。

ですが、実は仲が悪いのではなくお互いがうまく機能しあうためにjQueryが遠慮していたのですね。

遠慮した結果、「$」がうまく機能しなくなってしまいましたが、上記のように対処すればきっとスクリプトは思い通りに動いてくれるでしょう。

ぜひ試してみてください。

 

Search