WordPressでjQueryを使用する


WordPressのサイトでjQueryを使用したい場合も多いかと思います。
通常通りjQueryを読み込ませようとすると、
WordPressでは標準でjQueryが読み込まれていてるので重複してしまします。
そこでwp_enqueue_script関数を使用すると、重複せずにスクリプトを読み込ませることができます。

<head>
<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('action', '/wp-content/themes/テーマのフォルダ名/js/action.js', array('jquery')); ?>
<?php wp_head(); ?>
</head>

このようなコードをhead内、もしくはfunction.phpに記述します。
wp_enqueue_script関数に関しては、Shifftさんの記事、公式サイトが参考になりました。

wp_enqueue_scriptで外部のjQueryライブラリを使う

Function Reference/wp enqueue script

もう一つ注意点があります。
WordPressではjQueryの他、prototype.jsなども読み込まれていて、
衝突をさけるため、WordPress側のjQueryにてnoConflict()という関数が使用されています。
そのため使用するスクリプト内の $jQuery と置き換える必要があります。
例えば以下のようなコードの場合、

 $(document).ready(function(){
    
    $("h4").click(function () {
      $("p").slideToggle();
    });

  });

このように変更します。

 jQuery(document).ready(function(){
    
    jQuery("h4").click(function () {
      jQuery("p").slideToggle();
    });

  });

タグ: , ,

記事公開日:
最終更新日:

“WordPressでjQueryを使用する” への10件のフィードバック

  1. avatar nakamura より:

    FAQ MANAGERのところでいつもお世話になっております。今回は別件でお力添えいただけないかと連絡しました。
    このスレッドが適切でなければ場所を変更します。

    当方はタグ・クラウドで、WP-CUMULUSを使っていますが、脱FLASHとするため、探し当てた
    JS-Cumulus – WP-Cumulus in JavaScript v0.2
    http://www.jeroenvanwarmerdam.nl/content/resources/javascript/jscumulus/js-cumulus.html
    を使いたいのです。が、これはプラグインではないので、簡単に実装できそうもありません。
    jqueryを使うようですが、phpから自力で出力する必要がありそうです。phpコードを直接書き込めるwidgetを使うとして、phpコードをどう書いたらよいか、ご教示いただけないでしょうか?なお、今回のタグクラウドは、カスタム分類のfaq-tagではなく、投稿や固定ページによる従来型のタグによるタグ・クラウドです。

    ぶしつけなお願いで大変心苦しいのですが、ヒントだけでもいただければ幸いです。

  2. avatar kimuray より:

    ざっと見てみましたが、タグクラウド自体をjavasciriptに記述して、ソースを吐き出している感じですね。
    なかなか解説サイトや日本語の情報がありませんでしたが、こちらのnegi.libさんの、

    CUMULUS FLASHからJSに変更

    という記事が参考になりそうです。

  3. avatar nakamura より:

    おはようございます。探索情報ありがとうございます。
    もう使っている人がいるんですね。まずは、これを読んでできるところまでやってみます。
    ありがとうございました。

  4. avatar nakamura より:

    いつもお世話になっております。本件、お蔭様で実装できました。
    ところで、ご紹介頂いた日本語のサイトでは、js-cumulus.js紹介サイトのサンプルで使っているconsole.log.jsを使っていません。

    IE8以下で表示した場合、紹介サイトのサンプルは「Stack overflow at line:1」というAlertが出ますが、日本語サイトでは出ません。(当方は、ひとまず紹介サイトを参考にしましたので、現在はalertが出る状態です)
    line:1
    はconsole.log.jsの(精確にはconsole.log.min.jsの)1行目です。

    一般論として、console.log.jsは何の為に使っているのでしょう?セキュリティやメモリー使用等、必須な用件なのでしょうか?

    • avatar kimuray より:

      console.log.jsで少し検索してみました。
      ダウンロードサイトの説明文みたいなのに、
      「Cross-Browser solution for console logging in JavaScript」
      と書いてあったので、クロスブラウザ対策のスクリプト?なのかなあ、と思います。
      このスクリプト自体の情報が少なく、何とも言えないところですが^^;

  5. avatar nakamura より:

    ありがとうございました。そういうことですか。
    日本語サイトの方は、console logging in JavaScriptがないためか、
    IEではタグクラウドが左上にひょうじされてしまいます。しかし、モダンブラウザでは、
    設計通り右サイドバーに表示されます。

    でも、console logging するために、かなりメモリを使うのかもしれません。
    IEの開発者ツールでデバッグすると、「スタック領域が不足しています。」となります。

    ただ、日本語サイトのソースをチェックしてみたら、phpで出力する配列の最後の要素の次に「,」が入ってました。[a,b,c,d,]というように。IEで表示がオカシイのはこれにも原因があるのかもしれませんね。

    とろあえず、私の方は、日本語サイトのようなソースを吐き出すよう再調整し、alertが出ないようにやってみます。もしかしたらconsole loggingなしでもクロスブラウザになるかもしれませんので。

  6. avatar nakamura より:

    その後一つ確認できたことがあります。
    ダウンロードサイトのサンプルコードから、console logging を呼び出す部分を削除した状態で試したところ、alertはなくなりました(当然ですが)。むしろIEでは動きが良くなったようです。今のところ、次の点を除き不具合はないようです。
    不具合といえば、IE7,IE6では、タグクルドの「中身」が表示用のdivから抜け出して左上に移動してしまうことです。しかし、これは、console logging を外さなくても既に起きていました。

    ということで、IE7,IE6の表示不具合(多分、IE6,7におけるcssの適合性によるもの)を解決すれば良さそうです。ですが、この世界は、かなり難しそうですね。

    • avatar kimuray より:

      なるほど~。
      6,7に関しては使用している方の割合は減ってきてはいるので、
      割切って「対策をしない」という考え方もあるでしょうけど、
      なかなかそうは言っても・・という場合もあるでしょうし。
      IE対策はやはり色々悩まされるものがありますね^^;

  7. avatar nakamura より:

    position: absolute;指定した要素がはみ出す、という事例があり、その場合は親要素にwidth: 100%;を指定すると良い、という記事がありました。この場合は、タグであるli要素がabsoluteですが、その親ulにwidth: 100%;を入れてみましたが、変化はありませんでいた。IE7,6のcssバグだとすればこれでイケる筈なのですが、どうやら別の原因かもしれませんね。

    思い切ってIE7以前では、タグクラウドのブロック自体を無視するしかなさそうです。また何かわかったら書き込ませていただきます。

  8. [...] WordPressでjQueryを使用する | WP MEMO WordPressのサイトでjQueryを使用したい場合も多いかと思います。 通常通りjQueryを読み込ませようとすると、 WordPressでは標準でjQueryが読み込まれていてるので重複してし … 「$」じゃなくて「jQuery」を使うのですねー。 WordPressでjQueryを動かすときに参考にさせていただきました。わかりやすく書いてくださっています。 [...]

コメントを残す

*上記画像の英数字を入力してください。