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(){ $("p").mouseover(function () { $(this).css("color","red"); }); });/* ]]> */</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 日本語リファレンスでは上記のように書かれています。

http://semooh.jp/jquery/api/core/jQuery.noConflict/_/


ｊQueryの'$'関数が使えなくなったら困る！

　　　　　　　どうしたらいいの？


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

注目


【対策1】 '$’ を全て 'jQuery' に置き換えます。マウスオーバで文字が赤く変わることが確認できます。

jQuery(function(){ jQuery("p").mouseover(function () { jQuery(this).css("color","red"); }); });

$(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); });


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

(function($) { $(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); });})(jQuery);

$(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); });


【結論】

コンフリクト（衝突）対策

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)



0 1

Fか


【解答】


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 simpleAuthor: setoDescription: 勉強会用*/

<!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><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>" /><?php wp_head(); ?></head><body <?php body_class(); ?>>ヘッダー<hr><hr>







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.jsjquery

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.jsjquery

jquery-ui-core


Wordpress


jqueryという名前の箱を　wp_head() の位置にセットします。箱の中のスクリプトが出力されます。

・・

wp_head()

wp_footer()

<!DOCTYPE html>

<body>

</body> </html>

</head>

<head>


・・

追（jquery)

登録スクリプト

xxx/jquery.jsjquery

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><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>" />

<?php wp_enqueue_script('jquery'); ?><?php wp_head(); ?></head><body <?php body_class(); ?>>ヘッダー<hr><hr>







Index.php

wp_footer()

jQuery

<!DOCTYPE html>

<body>

</body> </html>

</head>

<head>

xxx/jquery.jsjquery


出力されたソースをみてみます。

ｊ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.jsjquery

削（jquery)


jquery-ui-core


Wordpress


・・

wp_head()

wp_footer()

<!DOCTYPE html>

<body>

</body> </html>

</head>

<head>

・・

xxx/jquery.jsjquery

削（jquery)


「削」はWordPressでは使えません。代わりに「wp_deregister_script」を使います。　

xxx/jquery.jsjquery

wp_deregister_script('jquery');


wp_head() より上に wp_enqueue_script('jquery') を記述します。

そして、その下に wp_deregister_script('jquery') を記述して削除します。

wp_head()


<?php wp_enqueue_script('jquery'); ?><?php wp_deregister_script('jquery'); ?><?php wp_head(); ?></head><body <?php body_class(); ?>>ヘッダー<hr><hr>






<hr>フッタ<?php wp_footer(); ?></body></html> Index.php

wp_footer()

jQuery

<!DOCTYPE html>

<body>

</body> </html>

</head>

<head>

xxx/jquery.jsjquery


出力されたソースをみてみます。　

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

jQuery


ここでちょっと検証！

次のようにしたらどうなる？

<?php wp_deregister_script('jquery'); ?><?php wp_enqueue_script('jquery'); ?><?php wp_head(); ?>

削除してからセット処理

jQuery

xxx/jquery.jsjquery

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()


<?php wp_enqueue_script('jquery' , jquery.jsの新パス); ?><?php wp_head(); ?></head><body <?php body_class(); ?>>ヘッダー<hr><hr>







Index.php

wp_footer()

jQuery

<!DOCTYPE html>

<body>

</body> </html>

</head>

<head>

jquery.jsのパスjquery


変わってない！

　　なぜ？

jQueryのスクリプトパスをみてください。wp-includeからになっています。

つまり、WordPress標準のｊQueryです。なぜ新パス変わっていないのでしょう。

jQuery

xxx/jquery.jsjquery

jquery-ui-core


Wordpress


jqueryという名前の箱は既にあるので新しく作ることはできません。既存の箱が使われます。

・・

wp_head()

wp_footer()

<!DOCTYPE html>

<body>

</body> </html>

</head>

<head>


・・

追（jquery , ●●●)登録スクリプト

既にjqueryという名前の箱はあるｘ


じゃ　どうすればいいか

jQuery

xxx/jquery.jsjquery

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()


<?php wp_deregister_script('jquery'); ?><?php wp_enqueue_script('jquery' , jquery.jsの新パス); ?><?php wp_head(); ?></head><body <?php body_class(); ?>>ヘッダー<hr><hr>







Index.php

wp_footer()

jQuery

<!DOCTYPE html>

<body>

</body> </html>

</head>

<head>

xxx/jquery.jsjquery

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.jsjquery

ｊ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)

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js


関連でjqueryを指定しているので、jqueryui の箱をセットするときに一緒にjqueryもセットされます。

jqueryの箱の方が先にセットされます。jQuery本体が先に読まれるので動作に問題はありません。

wp_head()


<?php wp_enqueue_script('jqueryui' ,●●. array('jquery')); ?><?php wp_head(); ?></head><body <?php body_class(); ?>>ヘッダー<hr><hr>







Index.php

wp_footer()

jQuery

<!DOCTYPE html>

<body>

</body> </html>

</head>

<head>

jquery-ui.min.jsのパスjqueryui



出力されたソースをみてみます。　jQuery UI だけでjQueryの読込みも行われていることがわかります。

jquery.js が先で jquery-ui.min.js が後に読込まれています。

jQuery




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


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

<?php wp_enqueue_script('jquery'); ?>

<?php wp_head(); ?> wp_head()

</head>

<head>

jquery-ui.min.jsのパスjqueryui


無視

同じ箱では重複セットはできません。2度目以降は無視されます。


ｊQueryの読み込まれる位置が変わったり、二重に読み込まれていないことがわかります。

jQuery本体を先に読み込まないと動かないライブラリなどは、読み込む順番が大事ですので

関連を指定しておけばトラブルを少なくできます。

jQuery




<?php wp_enqueue_script(　　　　　'jqueryui' , 　　　　　'●●●/jquery-ui.min.js', array('jquery')　　　　); ?><?php wp_deregister_script('jquery'); ?><?php wp_enqueue_script('jquery' , jquery.jsの新パス); ?><?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

注目

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js


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><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>" /><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><body <?php body_class(); ?>>ヘッダー<hr><hr>







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><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>" /><?php wp_deregister_script('jquery'); ?><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><body <?php body_class(); ?>>ヘッダー<hr><hr>







こんな方法で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がいなくなりました。一人で行動できないのでまとめて表示されなくなりました。


<?php wp_deregister_script('jquery'); ?><?php wp_enqueue_script('jquery' , jquery.jsの新パス); ?>

結局、解決策は削除して

　　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

Documents

Transcript of WordPressとjQuery