サポート » プラグイン » jquery.jsの読み込みについて

  • 解決済 rooster0364

    (@rooster0364)


    ページ内リンクのスクロールをやりたくて、これにjquery(jquery.js)が必要とのことでサンプルスクリプトに同梱されていました。

    WrodPressではjquery.js自動に読み込みされますので不要かと思い、アップせずにテストしたところ、動作しません。そこで同梱のjquery.jsをアップしてヘッダーで読みこんだところ、動作しましたが、出力されたソースを見るとjquery.jsを2つ読み込んでいます。

    2つのjquery.jsを確認したところ、そもそもwp-includesから読みこまれたものと中身がまったく違うのですが、こういった場合は2つ読みこまなければならないのでしょうか?

    また、その際に気がついたのですが、Crayon Syntax Highlighterというプラグインを使っているとwp-includesから二重に読みこまれています。

    jqueryはどのように管理?というか制御すればよいのでしょうか?

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • nekomimiTaicho

    (@nekomimitaicho)

    使われているテーマはなんですか?

    中身が違うjQueryではなく、ヴァージョンなどもあったほうがいいです。
    (だって違うといわれてもほかの人にはまったくわかりません)

    トピック投稿者 rooster0364

    (@rooster0364)

    nekomimiTaichoさまありがとうございます。

    wp-includesから読みこまれたものはv1.8.3(jQuery v1.8.3 jquery.com | jquery.org/license)
    動作するもの(スクリプトに同梱されていたもの)はv1.4.2(jQuery JavaScript Library v1.4.2)です。
    なんかバージョンの表記の仕方も全然ちがうのですが、名前は同じjquery.jsです。

    テーマは自作です。気になったので一応、Twenty Twelveでも試しましたが、同梱のjquery.jsを読み込まなければ動作しないというまったく同じ現象でした。

    モデレーター gatespace

    (@gatespace)

    実際にどういうタグを書いてjQueryとか埋め込んでます?

    あと、WordPress同胞のjQueryと通常のjQueryとは似て異なる物ですので、
    この辺も読んでください
    http://ja.forums.wordpress.org/topic/14958?replies=3

    トピック投稿者 rooster0364

    (@rooster0364)

    gatespaceさんありがとうございます。
    自分でも色々と調べてみてWrodPressでは$をjQueryを変えなければいけないというのを知りました。同梱のjquery.jsを使う分には$のままでも動作しましたが、それは置いておいてこの部分を書き換えました。そのスクリプトが下です。

    <script type="text/javascript">
    jQuery(function(){
    	jQuery("#toTop a").click(function(){
    		jQuery('html,body').animate({ scrollTop: jQuery(jQuery(this).attr("href")).offset().top }, 'slow','swing');
    	return false;
    	})
    });
    </script>

    とりあえず、今の段階ではヘッダー内に直接記述しています。(php wp_head(); の直前)
    サンプルではこのスクリプトの直前にjquery.jsを読み込むようになっていましたので、ソースを確認したところ自分の場合はこのスクリプトの後にjquery.jsが読み込まれていました。

    そこで、下記のようにスクリプトの前にwp-includesのjquery.jsを強制的に読み込んでみたところ、動作しました。(当たり前ですが、この記述では自動で出力されるjquery.jsと二重に呼び出す形となっています。

    <script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
    <script type="text/javascript">
    jQuery(function(){
    	jQuery("#toTop a").click(function(){
    		jQuery('html,body').animate({ scrollTop: jQuery(jQuery(this).attr("href")).offset().top }, 'slow','swing');
    	return false;
    	})
    });
    </script>

    このことから、同梱されているものと違うため動作しないということではなく、スクリプトの読み込みの順番で動作していないということのようです。
    自動でjquery.jsを読み込まないようにすればよいとは思いますが、そもそも先にjquery.jsを呼ぶということはできないでしょうか?

    トピック投稿者 rooster0364

    (@rooster0364)

    追記です。
    はじめにありましたCrayon Syntax Highlighterというプラグインを使っているとwp-includesから二重に読みこまれるは勘違いでした。申し訳ありません。

    モデレーター gatespace

    (@gatespace)

    WordPress本体に組み込まれているjQueryやプラグインから呼ばれるライブラリは全て
    wp_head() で処理されています。
    ですので、jQueryに依存するスクリプトはその「後ろ」に書かないといけません。

    具体的には wp_enqueue_script という関数を使った方が、WordPress側で読み込み順を調節してくれるので楽です

    wp_enqueue_script のススメ
    http://dogmap.jp/2008/07/12/wp_enqueue_script/

    デフォルトテーマの Twenty Twelve の functions.php でこのような処理を行っているので参考にしてみてください。

    トピック投稿者 rooster0364

    (@rooster0364)

    なるほど!そういうことなのですね。
    よく自作テーマなどで(php wp_head(); を/headの直前に入れると書かれているので、その間には何も記述してはいけないと思い込んでいました。スッキリです。
    wp_enqueue_scriptも参考にしてみます。
    ありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「jquery.jsの読み込みについて」には新たに返信することはできません。