Title: プラグインを使わないでjQueryを実装
Last modified: 2012年6月20日

---

# プラグインを使わないでjQueryを実装

 *  解決済 [ishikoro](https://ja.wordpress.org/support/users/ishikoro/)
 * (@ishikoro)
 * [14年、 4ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%81%a7jquery%e3%82%92%e5%ae%9f%e8%a3%85/)
 * お世話になります。
 * メニューにjQueryを使って色が変化するアニメーションを実装したいと思い、調べると
   プラグインを使わないでJqueryを実装する方法があることがわかりました。
 * そこで、header.phpの<head>内に以下のコードを追加しました。
 * <script type=”text/javascript” src=”js/jquery.js”>
    $(function(){ $(document).
   ready(function(){ $(“.menu li a”).hover(function() { $(this).stop().animate({
   color: “#0096c1”}, 800);//ONマウス時のカラーと速度 },function() { $(this).stop().
   animate({color: “#111” }, 800);//OFFマウス時のカラーと速度 }); }); </script>
 * しかし、全く機能しません。
    問題点がわかる方、ご指導よろしくお願いいたします。

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

 *  [wizfreek](https://ja.wordpress.org/support/users/wizfreek/)
 * (@wizfreek)
 * [14年、 4ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%81%a7jquery%e3%82%92%e5%ae%9f%e8%a3%85/#post-149317)
 * 参考になれば。
    [参考サイト](http://kachibito.net/web-design/wordpress-with-jquery.html)
 *  トピック投稿者 [ishikoro](https://ja.wordpress.org/support/users/ishikoro/)
 * (@ishikoro)
 * [14年、 4ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%81%a7jquery%e3%82%92%e5%ae%9f%e8%a3%85/#post-149318)
 * wizfreek様
 * コメントありがとうございます！
 * 私もちょうどその参考サイトを何度も読んでいたところでした。
 * <?php wp_head(); ?> によってwordpress本体に元から入っているjQueryが読み込まれ
   ているということで、更にそちらのjQueryに対応させた記述では$をjQueryに全て書き換える
   必要があると理解し、実行しました。
 * <script type=”text/javascript” src=”js/jquery.js”></script>
    <script type=”text/
   javascript”> jQuery(function(){ jQuery(function(){ jQuery(document).ready(function(){
   jQuery(“.menu li a”).hover(function() { jQuery(this).stop().animate({color: “#
   0096c1”}, 800);//ONマウス時のカラーと速度 },function() { jQuery(this).stop().
   animate({color: “#111” }, 800);//OFFマウス時のカラーと速度 }); }); }); </script
   >
 * しかし、全く何の変化もありません。。
 * jQueryを他に読み込む必要があるということでしょうか？
    もしくは上記のコードに誤り
   があるのでしょうか？
 * ご指導よろしくお願いいたします。
 *  トピック投稿者 [ishikoro](https://ja.wordpress.org/support/users/ishikoro/)
 * (@ishikoro)
 * [14年、 4ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%81%a7jquery%e3%82%92%e5%ae%9f%e8%a3%85/#post-149320)
 * <script type=”text/javascript” src=”js/jquery.js”></script>
    <script type=”text/
   javascript”> jQuery(function(){ jQuery(document).ready(function(){ jQuery(“.menu
   li a”).hover(function() { jQuery(this).stop().animate({color: “#0096c1”}, 800);//
   ONマウス時のカラーと速度 },function() { jQuery(this).stop().animate({color: “#
   111” }, 800);//OFFマウス時のカラーと速度 }); }); </script>
 * 上記の最上段の<script type=”text/javascript” src=”js/jquery.js”></script>この
   部分を<script type=”text/javascript” src=”[http://ajax.googleapis.com/ajax/libs/jquery/1.3.6/jquery.min.js”></script&gt](http://ajax.googleapis.com/ajax/libs/jquery/1.3.6/jquery.min.js”></script&gt);
   
   に変更したり試しましたが、どうもうまく行きません。
 *  [wizfreek](https://ja.wordpress.org/support/users/wizfreek/)
 * (@wizfreek)
 * [14年、 3ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%81%a7jquery%e3%82%92%e5%ae%9f%e8%a3%85/#post-149384)
 * jquery単体では、colorやbackground-colorのような整数値の値をとらない属性に対して
   は、
    animate関数は対応していないようです。
 * [juquery UI](http://jqueryui.com/)というライブラリを読み込めば
    対応できるよう
   です。
 *  トピック投稿者 [ishikoro](https://ja.wordpress.org/support/users/ishikoro/)
 * (@ishikoro)
 * [14年、 3ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%81%a7jquery%e3%82%92%e5%ae%9f%e8%a3%85/#post-149387)
 * wizfreek様
 * そうなんですか。。
 * jquery UIも試したのですが、読み込みがうまくできずに挫折しました。。
 * ありがとうございます！なんとかもう少し頑張ってみます。
 *  [wizfreek](https://ja.wordpress.org/support/users/wizfreek/)
 * (@wizfreek)
 * [14年、 3ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%81%a7jquery%e3%82%92%e5%ae%9f%e8%a3%85/#post-149402)
 *     ```
       <?php
       wp_deregister_script( 'jquery' );
       wp_deregister_script( 'jquery-ui-core' );
       wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
       wp_enqueue_script('jquery-ui-core','http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js', array('jquery'));
       ?>
       <?php wp_head(); ?>
       <script type="text/javascript">
       jQuery(document).ready(function(){
       jQuery(".menu li a").hover(function() {
       jQuery(this).stop().animate({color: "#0096c1"}, 800);
        },function() {
       jQuery(this).stop().animate({color: "#1a1a1a" }, 800);
        });
        });
       </script>
       ```
   
 * でどうでしょうか？一応私の環境下ではこれで動きました。
 * 参考サイト
    [http://creamo.jp/wordpress/jquery-load-wordpress/](http://creamo.jp/wordpress/jquery-load-wordpress/)
   [http://kachibito.net/web-design/jqueryui-background-color-change.html](http://kachibito.net/web-design/jqueryui-background-color-change.html)
 * わたしも色々調べながら組んだのでスマートな方法ではないかもしれません。
    今後他の
   jqueryのプラグインを使うとすれば、外部ファイル化して、 wp_enqueue_script()を使
   って呼び出した方が良いと思います。
 * ちなみに、自分のテーマ内からjsファイル等を読み込む場合は、相対パスではなく、
   
   絶対パスを指定する必要があるので、
 * <script type=”text/javascript” src=”js/jquery.js”></script>
 * では無く、
 * <script type=”text/javascript” src=”<?php bloginfo(template_derectory);?>/js/
   jquery.js”></script>
 * などで、使用しているテーマまでのパスを指定する必要があります。
 *  トピック投稿者 [ishikoro](https://ja.wordpress.org/support/users/ishikoro/)
 * (@ishikoro)
 * [14年、 3ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%81%a7jquery%e3%82%92%e5%ae%9f%e8%a3%85/#post-149414)
 * wizfreek様
 * ご指導ありがとうございます！
 * 参考サイトも非常に参考になります！
 * ご指導頂いた通り実行してみるとうまくいきました。
 * 大変助かりました。
 * また、返信が遅くなりまして申し訳ありませんでした。

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

 トピック「プラグインを使わないでjQueryを実装」には新たに返信することはできません。

## タグ

 * [jquery head hover 色　変える　メニュー](https://ja.wordpress.org/support/topic-tag/jquery-head-hover-%e8%89%b2%e3%80%80%e5%a4%89%e3%81%88%e3%82%8b%e3%80%80%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc/)

 * フォーラム: [プラグイン](https://ja.wordpress.org/support/forum/plugins/)
 * 7件の返信
 * 2人の参加者
 * 最後の返信者: [ishikoro](https://ja.wordpress.org/support/users/ishikoro/)
 * 最後の活動: [14年、 3ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%81%a7jquery%e3%82%92%e5%ae%9f%e8%a3%85/#post-149414)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック
