javascript - jQuery が Wordpress 内で動作しない

Question

私はここで見つけることができるこの小さなjQueryスクリプトを持っています: http://jsfiddle.net/RUqNN/45/

このスクリプトを自分のワードプレステンプレートに組み込むと、機能しません。

jquery ソースリンクを確認し、コードを書き直しましたが、何も機能しません。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
    <body>
      <script type="text/javascript">
        $(document).ready(function() {
          $(".move").toggle(
            function() {
              $("#teetimetag").animate({
                right: "0px"
              }, "normal");
            },function() {
              $("#teetimetag").animate({
                right: "-200px"
              }, "normal");
          });
        });
    </script>
      <div id="teetimetag">
         <img class="move" src="http://test.tooheavytoskydive.com/wp-content/themes/newtheme/images/flag.png" style="float: left;" />
        <div style="margin: 15px 0 0 50px;">
          <a href="http://test.tooheavytoskydive.com/reservations/" style="color: #FFF; font-weight: bold; font-size: 17px;">Reserve your Tee-Time</a>
        </div>
      </div>
    </body>
    </html>

score 1 · Accepted Answer

Web サイトで次の JavaScript エラーが表示されます:「$ は関数ではありません」。jQuery が他のライブラリと競合しているようです。これは、jQuery.noConflict() を呼び出し、すべての $ を「jQuery」に置き換えることで解決できます。コードは次のようになります。

jQuery.noConflict();
jQuery(document).ready(function() {
          jQuery(".move").toggle(
            function() {
              jQuery("#teetimetag").animate({
                right: "0px"
              }, "normal");
            },function() {
              jQuery("#teetimetag").animate({
                right: "-200px"
              }, "normal");
          });

});

score 0 · Accepted Answer

テンプレートの functions.php ファイルに js ファイルを登録する必要があります。

wp_register_script('jquery', 'http://code.jquery.com/jquery-1.7.2.min.js');

http://codex.wordpress.org/Function_Reference/wp_register_script

score -1 · Accepted Answer

原則として、いずれかのショートカットを使用していない限り、$変数 for を使用しないでください。以下は、jQuery をショートカットして変数を安全に使用する方法の例です。jQuery$

jQuery(function ($) {
    /* You can safely use $ in this code block to reference jQuery */
});

wordpress で jquery をロードするには、次の 2 つのバージョンのいずれかを使用します。Plugin Pageまたはでコードを含めますfunction.php

function include_jQuery() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'include_jQuery');

off の代わりに意味のある関数名を使用できますinclude_jQuery。

または、次のコードを使用できます。

function include_jQuery() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery'); 
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.3'); 
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'include_jQuery');

上記のテクニックを私が個人的に学んだこのリンクも気に入るかもしれません。Ericm Martinに大変感謝しています。

javascript - jQuery が Wordpress 内で動作しない

3 に答える 3

Related

Reference