WordPressとjQuery

WordPress と jQuery
2013/05/19 瀬戸貴弘

自己紹介
Twenty Thirteen
jQuery
瀬戸貴弘
Twitter
: as.chachamaru
: エンジニア
: @as_chachamaru
Facebook
職業
Android アプリ (Java ）
Web アプリ (PHP ・ MySQL)
WordPress
その他
最近の使っている開発言語（仕事・プライベート）

jQueryWordPress本体のjQuery
WordPress本体には標準でjQueryが組み込まれており、自由に使える仕組みがあります。
デフォルトテーマを含め、WordPress本体のjQueryを使っているテーマもたくさんあります。

jQueryWordPress本体に組み込まれているJQuery
<script type='text/javascript' src='http://XXXX/wp-includes/js/jquery/jquery.js?ver=1.9.1'></script>
<script type='text/javascript' src='http://XXXX/wp-includes/js/jquery/jquery-migrate.js?ver=1.1.1'></script>
テーマTwentyThirty のソースをみてみます。jquery.js を読み込むスクリプトコードがあります。

jQueryWordPress本体に組み込まれているJQuery
http://XXXX/wp-includes/js/jquery/jquery.js?ver=1.9.1
jQueryを読み込んでいるURLをみれば本体のjQueryかどうかわかります。Wp-includes にあるjquery.js は本体の
jQueryです。jQueryがうまく動作しないとき、本体のjQueryを使っていることが原因のこともありますので判断できる
ようにしてください。

jQueryWordPress本体に組み込まれているｊQuery
WordPress本体のjQueryを使って
　　　　　　　　
　　　　簡単なサンプルコードを記述してみる
WordPress本体のjQueryを使って動作をみてみます。

WordPress本体に組み込まれているｊQuery
http://semooh.jp/jquery/api/css/css/name%2C+value/
jQuery
検索すればjQueryのサンプルコードがたくさん見つかります。
今回は「jQuery日本語リファレンス」のサンプルコードを実行してみます。

jQueryWordPress本体に組み込まれているｊQuery
投稿にサンプルコードを記述します。　　　※javascript部分は　Custom CSS and JavaScript　プラグイン使用
pタグで囲まれた文字をマウスオーバで赤色にする。
$(function(){
});

WordPress本体に組み込まれているｊQuery jQuery
投稿に記述した内容が反映されていることが確認できます。
pタグ
ソースには
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
$("p").mouseover(function () {
$(this).css("color","red");
});
});/* ]]> */
</script>

マウスオーバでテキストが赤くなるはずだがならない！なぜ？
ｐタグで囲まれた文字をマウスオーバしてみます。文字色が赤くなるはずです。
しかし、赤くなりませんでした。なぜでしょう？
ソースには
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
});
});/* ]]> */
</script>

Google Chrome　の Developer Tools でみてみると　Javascript　エラーになっています。
jQuery
'＄' は関数ではない！というエラーです。

Firefox の firebug でみると　'$' は定義されていないことがわかります。
jQuery
注目

ｊQuery のリファレンスでは’＄’を使ってくださいと書いてます。
しかしWordPress本体のjQueryでは' $ ' が使えないと言われました。
jQuery
jQuery リファレンス
通りに書いたのに
なぜ動かないんだ！

WordPress本体のjQuery と jQuery公式サイトからのjQuery を比較ツールで差分をみてみました。
　※jQuery ダウンロード :　http://jquery.com/download/
jQuery
WordPress本体ｊQuery公式

WordPress本体のjQueryは語尾に次のコードが追加されている。
jQuery.noConflict();
同じバージョンなので差分がないと思われましたが違いがでてきました。
この違いが、WordPress本体のjQueryでは'$'が使えない原因となります。

http://semooh.jp/jquery/api/core/jQuery.noConflict/_/
'$' がprototype.js など他のライブラリで定義されていればその関数の意味になるし、未定義なら未定義のまま。
この関数を実行すると、$関数の動作が先に定義されている動作に戻る。
jQuery 日本語リファレンスでは上記のように書かれています。

ｊQueryの'$'関数が使えなくなったら困る！
　　　　　　　どうしたらいいの？

'ｊQuery' という　function() が存在することがわかります。これは '$' と同じ意味なので代わりに使えます。
注目

【対策1】 '$’ を全て 'jQuery' に置き換えます。マウスオーバで文字が赤く変わることが確認できます。
jQuery(function(){
jQuery("p").mouseover(function () {
jQuery(this).css("color","red");
});
});
$(function(){
});
});

【対策2】 (function($) { ・・・・・ })(jQuery); で囲みます。　マウスオーバで文字が赤く変わることが確認できます。
(function($) {
$(function(){
});
});
})(jQuery);
$(function(){
});
});

【結論】
コンフリクト（衝突）対策
WordPress本体のjQueryは
されてるから気をつけてください。

息抜き jQuery
ここで一区切り。リフレッシュ！ここで一区切り。リフレッシュ！ここで一区切り。リフレッシュ！ここで一区切り。リフレッシュ！

クイズしてみよう！ jQuery
あ
A
【ルール】
箱があります。箱には箱固有の識別子が書かれています。
左の箱ではAが箱の識別子になります。
箱固有の識別子は変更されることはありません。
箱には文字が書かれています。
左の箱では「あ」になります。

あ
A
【ルール】
い
B
う
C
え
D
お
E
文字の箱文字しゃべる君
文字しゃべる君というおもちゃ
があります。右の文字の箱を
文字しゃべる君にセットすると
セットした順番にしゃべってくれ
ます。

【ルール】
あ
A
い
B
う
C
え
D
お
E
追（A)
追（C）
追（E）
削（C）
追（B）
紙には文字しゃべる君へのセット順番が書かれています。
追（A) とは、識別子Aの箱をセットするという意味です。
削（C) とは、識別子Cの箱を削除します。

【ルール】
え
D
文字の箱
文字しゃべる君
追（A)
追（C）
追（E）
削（C）
追（B）
い
B
お
E
あ
A
う
C
あおい
サンプルです。文字の箱を文字しゃべる君にセットしていきます。箱は削除したら再度使えません。

【問題】みなさんで問題を解いてみましょう！
あ
A
い
B
う
C
え
D
お
E
追（A)
追（B）
追（C）
削（A）
追（D）
削（C）
なんとしゃべるでしょうか？

【解答】
お
E
文字の箱
追（A)
追（B）
追（C）
削（A）
追（D）
削（C）D
え
う
C
い
B
あ
A
いえ

【ルール追加】
い
B
う
C
え
D
お
E
追（A , か)
追（F , き）
ルールを追加します。追（識別子 , 文字）の形式は箱を新しく作ってか
ら、その箱を文字しゃべる君にセットします。ただし、既に指定した識別
子の箱がある場合は新たに箱は作れず既存の箱をセットします。箱の
名前の重複は認めません。
Aは既にあるので新たに作れない
Fはないので箱を新たに作れるF
き
あ
A

あ
A
い
B
う
C
え
D
お
E
追（A)
追（E,た）
追（F,さ）
削（A）
追（A,け）

【解答】
い
B
う
C
え
D
文字の箱
追（A)
追（E,た）
追（F,さ）
削（A）
追（A,け）
A
け
F
さ
お
E
あ
A
おさけ
名前Eの箱は既に存在します。なので新しく作れません。既存のEの箱をセットします。
名前Fの箱は元々ありませんでした。なので新しく作れます。作ってセットします。
名前Aの箱は元々ありましたが削除されています。なので名前Aの箱は存在しないので新しく作ることができます。

い
B
う
C
え
D
お
E
追（F , き, A)
ルールを追加します。
追（識別子 , 文字 , 関連）の形式は、依存として必ず一緒でなけ
ればならない箱の識別子を指定します。関連先の箱も一緒にセット
されそちらが先になります。
F
き
あ
A
あ
A

い
B
う
C
え
D
お
E
追（F , き, A)
F
き
あ
A
あ
A
人に例えます。Fさんは新人さんでまだ一人では何もできません。なのでAさんを頼ることにしました。
Fさんは必ずAさんと一緒に行動します。そして頼れるAに先導してもらいます。
追（F , き, A)　では、FはAと必ず一緒に行動しますのでFとAの箱がセットされます。そして頼りがいのあるAが先です。

あ
A
い
B
う
C
え
D
お
E
追（F , た, A)
削（B）
追（B , ま）

【解答】
う
C
え
D
お
E
文字の箱
追（F , た, A)
削（B）
追（B , ま）
B
ま
F
た
あたま
あ
A
FはAと必ず一緒になります。そしてAの方が先になるので　A→F　の順で箱がセットされます。
Bの箱は元々ありましたが削除されました。新しくBの名前で作っても重複がおこらないので作れます。

文字しゃべる君　BOSS
0 1
文字しゃべる君が進化した！
並列作業ができるようになりました。
0番にセットした文字 + 1番にセットした文字
をしゃべってくれます。
お
E
D
え
う
C
い
B
あ
A
あいうえお

あ
A
い
B
う
C
え
D
お
E
文字の箱
追（A , , ,1)
ルールを追加します。
追（識別子 , 文字 , 関連 , 対象）　の形式は、文字をセットする対象を
選択できるようになりました。対象を指定しない場合は0を対象と
します。
BOSS
0 1
あ
A

あ
A
い
B
う
C
え
D
お
E
文字の箱
追（D)
追（F,,,1）
追（G,つ, E）
削（D）
追（H,れ,,1)
BOSS
0 1
F
か

【解答】
文字しゃべる君BOSS
0 1
あ
A
い
B
う
C
文字の箱
追（D)
追（F,,,1）
追（G,つ, E）
削（D）
追（H,れ,,1)
え
D
H
れ
F
か
G
つ
お
E
おつかれ
FとHが右側に、それ以外が左側にセットされることがわかれば、後は今までと同じです。

息抜き jQuery
WordPresWordPresに戻ろう！に戻ろう！WordPresWordPresに戻ろう！に戻ろう！

Twenty Thirteen　はごちゃごちゃしてるので、jQuery検証用の簡単なテーマを作ってみました。
※ style.css と index.php のみ。　テーマ名「Super simple」
/*
Theme Name: Super simple
Author: seto
Description: 勉強会用
*/
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
ヘッダー
<hr><hr>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
【<?php echo the_title(); ?>】<br>
<?php the_content(); ?><hr>
<?php endwhile; ?>
<?php else : ?>
記事なし
<?php endif; // end have_posts() check ?>
</div>
</div>
<hr>
フッタ
<?php wp_footer(); ?>
</body>
</html>
jQuery
style.css Index.php

Index.php の構成をわかりやすく図にします。特に wp_head() と wp_footer() の存在に注目してください。
wp_head()
<!DOCTYPE html>
<head>
<?php wp_head(); ?>
</head>
ヘッダー
<hr><hr>
<?php endwhile; ?>
<?php else : ?>
記事なし
<hr>
フッタ
</body>
</html>
Index.php
wp_footer()
jQuery
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>

WordPress と jQuery jQuery
WordPress3.6 β3 +　テーマSuper simple でサイト表示させると、こんな感じになります。
ソースにｊQuery.js が読み込まれてないことにも注目してください。
つまり、wp_head() や wp_footer() を記述するだけでは jquery.js は読み込まれません。

jQuery
xxx/jquery.js
jquery
jquery-ui-core
WordPress標準に含まれている箱
Wordpress
xxx/jquery.ui.core.min.js
さらに図を変えてみます。見覚えのある図になりましたね。wp_head や wp_footer　が箱をセットする場所です。
WordPress には最初からスクリプトの入った箱がいくつか準備されています。【デフォルトScripts】 http://p.tl/xX26
・
・
・
wp_head()
wp_footer()
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>

WordPress標準のスクリプトを使うには箱の名前を知る必要があります。【デフォルトScripts】 http://p.tl/xX26
箱の名前箱の中

jQueryWordPress と jQuery
WordPress本体のjQuery を
　　　　　　　　　読み込んでみましょう！
<script type='text/javascript' src='http:/●●●/jquery.js?ver=1.9.1'></script>

jQuery
xxx/jquery.js
jquery
jquery-ui-core
Wordpress
jqueryという名前の箱を　wp_head() の位置にセットします。箱の中のスクリプトが出力されます。
・
・
wp_head()
wp_footer()
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
・
・
追（jquery)
登録スクリプト

xxx/jquery.js
jquery
jquery-ui-core
Wordpress
・
・
wp_head()
wp_footer()
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
・
・
追（jquery)
wp_enqueue_script('jquery');
「追」はWordPressでは使えません。代わりに「wp_enqueue_script」を使います。

wp_head() より上に wp_enqueue_script('jquery') を記述します。
wp_head() の場所でセットされているスクリプトを出力するので、wp_head() より後に記述してはいけません。
wp_head()
<!DOCTYPE html>
<head>
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
</head>
ヘッダー
<hr><hr>
<?php endwhile; ?>
<?php else : ?>
記事なし
<hr>
フッタ
</body>
</html>
Index.php
wp_footer()
jQuery
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
xxx/jquery.js
jquery

出力されたソースをみてみます。
ｊquery.js を読み込むスクリプトが出力されていることがわかります。
jQuery

既にwp_head() を使って
　　　　　jQuery が読み込まれている。
このjQuery 削除したいな・・・

jQuery
jquery-ui-core
Wordpress
箱の名前を指定して削除します。
・
・
wp_head()
wp_footer()
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
・
・
xxx/jquery.js
jquery
削（jquery)

jquery-ui-core
Wordpress
・
・
wp_head()
wp_footer()
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
・
・
xxx/jquery.js
jquery
削（jquery)
「削」はWordPressでは使えません。代わりに「wp_deregister_script」を使います。　
xxx/jquery.js
jquery
wp_deregister_script('jquery');

wp_head() より上に wp_enqueue_script('jquery') を記述します。
そして、その下に wp_deregister_script('jquery') を記述して削除します。
wp_head()
<!DOCTYPE html>
<head>
<?php wp_deregister_script('jquery'); ?>
<?php wp_head(); ?>
</head>
ヘッダー
<hr><hr>
<?php endwhile; ?>
<?php else : ?>
記事なし
<hr>
フッタ
</body>
</html>
Index.php
wp_footer()
jQuery
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
xxx/jquery.js
jquery

出力されたソースをみてみます。　
ｊquery.js を読み込むスクリプトが出力されていないことがわかります。　
jQuery

ここでちょっと検証！
次のようにしたらどうなる？
<?php wp_head(); ?>
削除してからセット処理

jQuery
xxx/jquery.js
jquery
jquery-ui-core
Wordpress
削除した箱をセット依頼するとどうなるか？
・
・
wp_head()
wp_footer()
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
・
・
追（jquery)
　存在しない

ｊquery.js を読み込むスクリプトが出力されていないことがわかります。　削除されてるので当然な結果です。
jQuery

既にwp_head() を使って
　　　　　jQuery が読み込まれている。
このjQuery を変更したいな・・・
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
wp_enqueue_script('jquery' , スクリプトのパス);
第2パラメータにスクリプトへのパスを指定します。同じ箱の名前がなければ新しく作りセットします。
既に同じ名前の箱があれば、既存の箱（※パスを上書きしない）でセットします。
追（jquery , パス)

上記のようにwp_enqueue_script('jquery' , jquery.jsの新パス)　を追加しました。どうなるでしょう。
　※ ｊquery.jsの新パス : http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
wp_head()
<!DOCTYPE html>
<head>
<?php wp_enqueue_script('jquery' , jquery.jsの新パス); ?>
<?php wp_head(); ?>
</head>
ヘッダー
<hr><hr>
<?php endwhile; ?>
<?php else : ?>
記事なし
<hr>
フッタ
</body>
</html>
Index.php
wp_footer()
jQuery
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
jquery.jsのパス
jquery

変わってない！
　　なぜ？
jQueryのスクリプトパスをみてください。wp-includeからになっています。
つまり、WordPress標準のｊQueryです。なぜ新パス変わっていないのでしょう。

jQuery
xxx/jquery.js
jquery
jquery-ui-core
Wordpress
jqueryという名前の箱は既にあるので新しく作ることはできません。既存の箱が使われます。
・
・
wp_head()
wp_footer()
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
・
・
追（jquery , ●●●)
既にjqueryという
名前の箱はある
ｘ

じゃ　どうすればいいか

jQuery
xxx/jquery.js
jquery
jquery-ui-core
Wordpress
jqueryという名前の箱が既にあるなら、削除しちゃえばいい！そうすれば同じ名前の箱がありません。
・
・
wp_head()
wp_footer()
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
・
・
追（jquery , ●●●)
jQueryという名前の
箱がなければいい
削

まず、wp_deregister_script('jquery') を記述して既存のjqueryという名前の箱を削除します。
そうすれば　wp_enqueue_script('jquery' , jquery.jsの新パス)　で新しい箱が作れます。
wp_head()
<!DOCTYPE html>
<head>
<?php wp_head(); ?>
</head>
ヘッダー
<hr><hr>
<?php endwhile; ?>
<?php else : ?>
記事なし
<hr>
フッタ
</body>
</html>
Index.php
wp_footer()
jQuery
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
xxx/jquery.js
jquery
jquery.jsの新パス
jquery

jQueryの読込先が http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js に変わっているのがわかります。
jQuery

アコーディオンを使ったUIを作りたいな・・・
jQuery UI を読み込んでみよう！
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

ポイント
jQuery UI は jQuery本体に依存するライブラリです。
ｊQuery本体がなければ動作しません。
jqueryuiさんは新人さんでまだ一人では何もできません。なのでjqueryさんを頼ることにしました。
jqueryuiさんは必ずjqueryさんと一緒に行動します。そして頼れるjqueryに先導してもらいます。
頼りがいのあるjqueryさんが先です。
追（jqueryui , ●●, jquery)

jQuery
jquery-ui-core
・
・
Wordpress
wp_head()
wp_footer()
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
・
・
追（jqueryui , ●●● , jquery )
xxx/jquery.js
jquery
ｊQuery UI はjQueryをベースとしたライブラリなので、jQueryと一緒になります。関連としてjQueryを設定しておきます。
なお jQuery UIはWordPressに標準で準備されていますが、今回はjqueryuiという名前の箱で新規に作ります。
関

wp_enqueue_script(
'jqueryui' ,
'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',
array('jquery')
);
wp_enqueue_script(
'jqueryui' , スクリプトのパス , array('jquery')
);
jqueryui は箱の名前なので重複しなければ何でもOK！
第3引数に関連する箱の名前を指定します。配列なのは関連する箱がいくつも指定できるためです。
追（jqueryui , ●●, jquery)

関連でjqueryを指定しているので、jqueryui の箱をセットするときに一緒にjqueryもセットされます。
jqueryの箱の方が先にセットされます。jQuery本体が先に読まれるので動作に問題はありません。
wp_head()
<!DOCTYPE html>
<head>
<?php wp_enqueue_script('jqueryui' ,●●. array('jquery')); ?>
<?php wp_head(); ?>
</head>
ヘッダー
<hr><hr>
<?php endwhile; ?>
<?php else : ?>
記事なし
<hr>
フッタ
</body>
</html>
Index.php
wp_footer()
jQuery
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
jquery-ui.min.jsのパス
jqueryui
jquery.jsのパス
jquery

出力されたソースをみてみます。　jQuery UI だけでjQueryの読込みも行われていることがわかります。
jquery.js が先で jquery-ui.min.js が後に読込まれています。
jQuery

<?php wp_enqueue_script(
　　　　　'jqueryui' ,
　　　　　'●●●/jquery-ui.min.js',
array('jquery')
　　　　); ?>
<?php wp_head(); ?>

array('jquery')
　　　　); ?>
<?php wp_head(); ?>wp_head()
</head>
<head>
jquery-ui.min.jsのパス
jqueryui
jquery.jsのパス
jquery
無視
同じ箱では重複セットはできません。2度目以降は無視されます。

ｊQueryの読み込まれる位置が変わったり、二重に読み込まれていないことがわかります。
jQuery本体を先に読み込まないと動かないライブラリなどは、読み込む順番が大事ですので
関連を指定しておけばトラブルを少なくできます。
jQuery

array('jquery')
　　　　); ?>
<?php wp_head(); ?>
jquery.js + jquery-ui.min.js をセットした後にこのjquery.jsを削除しています。そして新パスのjquery.jsをセットします。
Jquery-ui.min.js → jquery.js の順番になっているようにみえますがどうなるでしょうか。

関連指定の威力すごいですね。優先順位がきちんと維持されています。
トラブルを減らすためにも関連指定はぜひしといてください。

wp_enqueue_script の
おまけ

wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
wp_enqueue_script('jquery' , スクリプトのパス);
新しい箱を作ってセットしました。ソースをみてみるとスクリプトURLの語尾にver=3.6-beta3ってついています。
Ver=3.6-beta3 って何だ？
実はデフォルトではWordPressのバージョンが付与されます。動作には影響ないのですが気になりますね。
jquery.min.js?ver=3.6-beta3

wp_enqueue_script(
　　　'jquery',
　　 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
array(),
'1.9.1'
);
第4引数でバージョンを指定することで変更できます。
バージョンが指定した1.9.1に変わっていることがわかります。
jquery.min.js?ver=1.9.1
注目

wp_enqueue_script の
おまけ2

wp_enqueue_script(
　　　'jquery',
　　 'http:/xxxxxxxx/jquery/1.9.1/jquery.min.js',
array(),
'1.9.1',
true
);
第5引数でtrueを指定すると　wp_footer() の位置にセットします。
上記サンプルはjquery.jsなので基本 wp_footer() にはセットしないが他のライブラリなどでは使う場合があります。
wp_head()
wp_footer()
<!DOCTYPE html>
<body>
</body> </html>
</head>
<head>
注目

$handle スクリプトに使われるハンドル名
$src スクリプトのURL
$deps このスクリプトと関連（依存）するスクリプトのハンドル名
$ver スクリプトのバージョン
$in_footer wp_footer() 位置ならtrue
パラメータ
wp_enqueue_script
http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Parameters

もうひといき jQuery
もう少しで終わるよ。がんばろう！もう少しで終わるよ。がんばろう！もう少しで終わるよ。がんばろう！もう少しで終わるよ。がんばろう！

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?php wp_head(); ?>
<script>$(function(){alert(jQuery().jquery);});</script>
</head>
ヘッダー
<hr><hr>
<?php endwhile; ?>
<?php else : ?>
記事なし
<hr>
フッタ
</body>
</html>
Index.php
wp_enqueue_script難しい
一度も使わないなら
直接書いても問題ないよね？
注目

ほら！ソースも問題ないし
jQueryで記述した処理も問題ない
※ <script>$(function(){alert(jQuery().jquery);});</script>
　　ｊQueryのバージョンを表示する。

・・・そして数日後
ブラッシュアップ
　　　　したいな！
何か見た目良くするプラグイン探そう！
ってことになったら・・・

そのプラグインが
jQueryを使ってたりしたら・・・
このプラグインをインストールして有効にします。jQueryを使うプラグインです。

プラグインがjQueryを使い、wp_head() に　jquery.jsを読み込むスクリプトが挿入されると厄介！
ｊQueryの二重読み込みになり処理が重くなります。さらに異なるバージョンで上書きされて動作に影響ないですか？

$(function() ・・・　に注目！　WordPress 標準の jQueryで上書きされてのになぜ　$関数が使えるの？
jQuery.noConflict();　の意味覚えていますか？上書きされる前の $関数の意味に戻すことです。
WordPress標準のjQueryで上書きされる前の$関数の意味って今回は何？
直前なので　ｊQuery1.8.1(直書き）が定義した $関数です。
試しに $(function() { alert($().jquery);}); とするとアラート画面に　1.8.1 と表示されます。
$関数使ったところは1.8.1のjQurery , jQuery関数使ったところは1.91のjQuery。どんな動作するかは全くわかりませんｗ
注目

このままではいけないので
　　　　　対策しないと・・・

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?php wp_head(); ?>
<script>$(function(){alert(jQuery().jquery);});</script>
</head>
ヘッダー
<hr><hr>
<?php endwhile; ?>
<?php else : ?>
記事なし
<hr>
フッタ
</body>
</html>
こんな方法でOK？
当初はｊQueryに依存するプラグインを使う予定はなかった。万が一将来にそんなプラグインを使うとトラブル起こす可能性が
あるから最初から　wp_deregister_script で削除しておこう！　さてどうなるでしょう？

ん？直った気がする・・・
ｊQueryのバージョンも1.8.1に戻ってます。
jQueryも二重に読み込まれていません。　これでOKな気がするけど・・・・

wp_deregister_script('jquery');　なし
wp_deregister_script('jquery');　あり
jquery.js以外も消えた！
WP jQuery Lightbox　は、wp_footer() に挿入されるプラグインでした。
wp_deregister_script('jquery'); で jquery.js　の読み込みだけ消したのになぜ他の箇所まで表示されなくなったのでしょう。

wp_enqueue_script('wp-jquery-lightbox-swipe', plugins_url(JQLB_TOUCH_SCRIPT, __FILE__), Array('jquery'),
'1.4', true);
wp_enqueue_script('wp-jquery-lightbox', plugins_url(JQLB_SCRIPT, __FILE__), Array('jquery'), '1.4', true);
プラグインの中を覗くと
' jquery ' が関連に指定されている。
関連に指定された箱が全て揃って表示される。
関連している　' jquery ' が削除されたので全て表示されなくなった。
point
wp-jquery-lightbox-swipe や wp-jquery-lightbox は一人では行動できません。 jquery に頼るつもりでした。
そのjqueryがいなくなりました。一人で行動できないのでまとめて表示されなくなりました。

結局、解決策は削除して
　　wp_enqueue_script追加

まとめ
Twenty Thirteen
jQuery
WordPress本体のjQueryはコンフリクト対策されているので
気をつけましょう。
テーマに直接スクリプトを記述するのではなく、
wp_deregister_script、wp_enqueue_script
を極力使いましょう。
関連（依存）にあるスクリプトがある場合は、しっかり関連を
指定しましょう。WordPressが順序を調整してくれます。
ｊQqueryの動作がおかしくなったら wp_head、wp_footer の
表示場所を意識すると解決が早いかもしれません。
・
・
・
・

おわり jQuery
ご静聴ありがとうございました。
Twitter
: as.chachamaru
: @as_chachamaru
Facebook

WordPressとjQuery

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WordPressとjQuery

Similar to WordPressとjQuery (20)

More from Seto Takahiro

More from Seto Takahiro (8)

WordPressとjQuery