奥辞谤诲笔谤别蝉蝉と箩蚕耻别谤测
4 likes3,301 views
WordPressでのjQueryの注意点などをまとめました。2013年度 第5回WordBench京都 勉強会で発表した内容です。
![WordPress本体に組み込まれているｊQuery jQuery
投稿に記述した内容が反映されていることが確認できます。
pタグ
ソースには
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
$("p").mouseover(function () {
$(this).css("color","red");
});
});/* ]]> */
</script>](https://image.slidesharecdn.com/wpjquery-130520092744-phpapp02/85/WordPress-jQuery-9-320.jpg)
![WordPress本体に組み込まれているｊQuery jQuery
マウスオーバでテキストが赤くなるはずだがならない！ なぜ？
ｐタグで囲まれた文字をマウスオーバしてみます。文字色が赤くなるはずです。
しかし、赤くなりませんでした。なぜでしょう？
ソースには
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
$("p").mouseover(function () {
$(this).css("color","red");
});
});/* ]]> */
</script>](https://image.slidesharecdn.com/wpjquery-130520092744-phpapp02/85/WordPress-jQuery-10-320.jpg)
奥辞谤诲笔谤别蝉蝉と箩蚕耻别谤测
- 1. WordPress と jQuery 2013/05/19 瀬戸 貴弘
- 2. 自己紹介 Twenty Thirteen jQuery 瀬戸 貴弘 Twitter : as.chachamaru : エンジニア : @as_chachamaru Facebook 職業 Android アプリ (Java ） Web アプリ (PHP ? MySQL) WordPress その他 最近の使っている開発言語（仕事?プライベート）
- 4. jQueryWordPress本体に組み込まれているJQuery <script type='text/javascript' src=/slideshow/wp-jquery/21528181/& <script type='text/javascript' src='http://XXXX/wp-includes/js/jquery/jquery-migrate.js?ver=1.1.1'></script> テーマTwentyThirty のソースをみてみます。jquery.js を読み込むスクリプトコードがあります。
- 8. jQueryWordPress本体に組み込まれているｊQuery 投稿にサンプルコードを記述します。 ※javascript部分は Custom CSS and JavaScript プラグイン使用 pタグで囲まれた文字をマウスオーバで赤色にする。 $(function(){ });
- 9. WordPress本体に組み込まれているｊQuery jQuery 投稿に記述した内容が反映されていることが確認できます。 pタグ ソースには <script type="text/javascript"> /* <![CDATA[ */ $(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); });/* ]]> */ </script>
- 10. WordPress本体に組み込まれているｊQuery jQuery マウスオーバでテキストが赤くなるはずだがならない！ なぜ？ ｐタグで囲まれた文字をマウスオーバしてみます。文字色が赤くなるはずです。 しかし、赤くなりませんでした。なぜでしょう？ ソースには <script type="text/javascript"> /* <![CDATA[ */ $(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); });/* ]]> */ </script>
- 11. WordPress本体に組み込まれているｊQuery Google Chrome の Developer Tools でみてみると Javascript エラーになっています。 jQuery '＄' は関数ではない！というエラーです。
- 12. WordPress本体に組み込まれているｊQuery Firefox の firebug でみると '$' は定義されていないことがわかります。 jQuery 注目
- 13. WordPress本体に組み込まれているｊQuery ｊQuery のリファレンスでは’＄’を使ってくださいと書いてます。 しかしWordPress本体のjQueryでは' $ ' が使えないと言われました。 jQuery jQuery リファレンス 通りに書いたのに なぜ動かないんだ！
- 14. WordPress本体に組み込まれているｊQuery WordPress本体のjQuery と jQuery公式サイトからのjQuery を 比較ツールで差分をみてみました。 ※jQuery ダウンロード : http://jquery.com/download/ jQuery WordPress本体 ｊQuery公式
- 16. WordPress本体に組み込まれているｊQuery jQuery http://semooh.jp/jquery/api/core/jQuery.noConflict/_/ '$' がprototype.js など他のライブラリで定義されていればその関数の意味になるし、未定義なら未定義のまま。 この関数を実行すると、$関数の動作が先に定義されている動作に戻る。 jQuery 日本語リファレンスでは上記のように書かれています。
- 18. WordPress本体に組み込まれているｊQuery jQuery 'ｊQuery' という function() が存在することがわかります。 これは '$' と同じ意味なので代わりに使えます。 注目
- 19. WordPress本体に組み込まれているｊQuery jQuery 【対策1】 '$’ を 全て 'jQuery' に置き換えます。 マウスオーバで文字が赤く変わることが確認できます。 jQuery(function(){ jQuery("p").mouseover(function () { jQuery(this).css("color","red"); }); }); $(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); });
- 20. WordPress本体に組み込まれているｊQuery jQuery 【対策2】 (function($) { ????? })(jQuery); で囲みます。 マウスオーバで文字が赤く変わることが確認できます。 (function($) { $(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); }); })(jQuery); $(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); });
- 25. クイズしてみよう！ jQuery 【ルール】 あ A い B う C え D お E 文字の箱文字しゃべる君 追（A) 追（C） 追（E） 削（C） 追（B） 紙には文字しゃべる君へのセット順番が書かれています。 追（A) とは、識別子Aの箱をセットするという意味です。 削（C) とは、识别子颁の箱を削除します。
- 29. クイズしてみよう！ jQuery 【ルール追加】 い B う C え D お E 文字の箱文字しゃべる君 追（A , か) 追（F , き） ルールを追加します。追（識別子 , 文字）の形式は箱を新しく作ってか ら、その箱を文字しゃべる君にセットします。 ただし、既に指定した識別 子の箱がある場合は新たに箱は作れず既存の箱をセットします。箱の 名前の重複は認めません。 Aは既にあるので新たに作れない Fはないので箱を新たに作れるF き あ A
- 32. クイズしてみよう！ jQuery 【ルール追加】 い B う C え D お E 文字の箱文字しゃべる君 追（F , き, A) ルールを追加します。 追（識別子 , 文字 , 関連）の形式は、依存として必ず一緒でなけ ればならない箱の識別子を指定します。関連先の箱も一緒にセット されそちらが先になります。 F き あ A あ A
- 33. クイズしてみよう！ jQuery 【ルール追加】 い B う C え D お E 文字の箱文字しゃべる君 追（F , き, A) F き あ A あ A 人に例えます。Fさんは新人さんでまだ一人では何もできません。なのでAさんを頼ることにしました。 Fさんは必ずAさんと一緒に行動します。そして頼れるAに先導してもらいます。 追（F , き, A) では、FはAと必ず一緒に行動しますのでFとAの箱がセットされます。そして頼りがいのあるAが先です。
- 34. クイズしてみよう！ jQuery 【問題】 みなさんで問題を解いてみましょう！ あ A い B う C え D お E 文字の箱文字しゃべる君 追（F , た, A) 削（B） 追（B , ま） なんとしゃべるでしょうか？
- 35. クイズしてみよう！ jQuery 【解答】 う C え D お E 文字の箱 文字しゃべる君 追（F , た, A) 削（B） 追（B , ま） B ま F た あたま あ A FはAと必ず一緒になります。そしてAの方が先になるので A→F の順で箱がセットされます。 Bの箱は元々ありましたが削除されました。新しくBの名前で作っても重複がおこらないので作れます。
- 36. クイズしてみよう！ jQuery 文字しゃべる君 BOSS 0 1 文字しゃべる君が進化した！ 並列作業ができるようになりました。 0番にセットした文字 + 1番にセットした文字 をしゃべってくれます。 お E D え う C い B あ A あいうえお
- 37. クイズしてみよう！ jQuery 【ルール追加】 あ A い B う C え D お E 文字の箱 追（A , , ,1) ルールを追加します。 追（識別子 , 文字 , 関連 , 対象） の形式は、文字をセットする対象を 選択できるようになりました。対象を指定しない場合は0を対象と します。 文字しゃべる君 BOSS 0 1 あ A
- 38. クイズしてみよう！ jQuery 【問題】 みなさんで問題を解いてみましょう！ あ A い B う C え D お E 文字の箱 追（D) 追（F,,,1） 追（G,つ, E） 削（D） 追（H,れ,,1) なんとしゃべるでしょうか？ 文字しゃべる君 BOSS 0 1 F か
- 39. クイズしてみよう！ jQuery 【解答】 文字しゃべる君BOSS 0 1 あ A い B う C 文字の箱 追（D) 追（F,,,1） 追（G,つ, E） 削（D） 追（H,れ,,1) え D H れ F か G つ お E おつかれ FとHが右側に、それ以外が左側にセットされることがわかれば、後は今までと同じです。
- 41. WordPress と jQuery 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><!-- #content --> </div><!-- #primary --> <hr> フッタ <?php wp_footer(); ?> </body> </html> jQuery style.css Index.php
- 42. WordPress と jQuery 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> <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><!-- #content --> </div><!-- #primary --> <hr> フッタ <?php wp_footer(); ?> </body> </html> Index.php wp_footer() jQuery <!DOCTYPE html> <body> </body> </html> </head> <head>
- 43. WordPress と jQuery jQuery WordPress3.6 β3 + テーマSuper simple でサイト表示させると、こんな感じになります。 ソースにｊQuery.js が読み込まれてないことにも注目してください。 つまり、wp_head() や wp_footer() を記述するだけでは jquery.js は読み込まれません。
- 44. 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 と jQuery
- 45. WordPress標準のスクリプトを使うには箱の名前を知る必要があります。 【デフォルトScripts】 http://p.tl/xX26 WordPress と jQuery jQuery 箱の名前 箱の中
- 46. jQueryWordPress と jQuery WordPress本体のjQuery を 読み込んでみましょう！ <script type='text/javascript' src=/slideshow/wp-jquery/21528181/&
- 47. jQuery xxx/jquery.js jquery jquery-ui-core WordPress標準に含まれている箱 Wordpress xxx/jquery.ui.core.min.js jqueryという名前の箱を wp_head() の位置にセットします。箱の中のスクリプトが出力されます。 ? ? wp_head() wp_footer() <!DOCTYPE html> <body> </body> </html> </head> <head> WordPress と jQuery ? ? 追（jquery) 登録スクリプト
- 48. xxx/jquery.js jquery jquery-ui-core WordPress標準に含まれている箱 Wordpress xxx/jquery.ui.core.min.js ? ? wp_head() wp_footer() <!DOCTYPE html> <body> </body> </html> </head> <head> ? ? 追（jquery) jQueryWordPress と jQuery wp_enqueue_script('jquery'); 「追」はWordPressでは使えません。代わりに「wp_enqueue_script」を使います。
- 49. WordPress と jQuery 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> <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><!-- #content --> </div><!-- #primary --> <hr> フッタ <?php wp_footer(); ?> </body> </html> Index.php wp_footer() jQuery <!DOCTYPE html> <body> </body> </html> </head> <head> xxx/jquery.js jquery
- 50. WordPress と jQuery 出力されたソースをみてみます。 ｊquery.js を読み込むスクリプトが出力されていることがわかります。 jQuery
- 51. jQueryWordPress と jQuery 既にwp_head() を使って jQuery が 読み込まれている。 <script type='text/javascript' src=/slideshow/wp-jquery/21528181/& このjQuery 削除したいな???
- 52. jQuery jquery-ui-core WordPress標準に含まれている箱 Wordpress xxx/jquery.ui.core.min.js 箱の名前を指定して削除します。 ? ? wp_head() wp_footer() <!DOCTYPE html> <body> </body> </html> </head> <head> WordPress と jQuery ? ? xxx/jquery.js jquery 削（jquery) 登録スクリプト
- 53. jquery-ui-core WordPress標準に含まれている箱 Wordpress xxx/jquery.ui.core.min.js ? ? wp_head() wp_footer() <!DOCTYPE html> <body> </body> </html> </head> <head> ? ? xxx/jquery.js jquery 削（jquery) jQueryWordPress と jQuery 「削」はWordPressでは使えません。代わりに「wp_deregister_script」を使います。 xxx/jquery.js jquery wp_deregister_script('jquery');
- 54. WordPress と jQuery wp_head() より上に wp_enqueue_script('jquery') を記述します。 そして、その下に wp_deregister_script('jquery') を記述して削除します。 wp_head() <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_enqueue_script('jquery'); ?> <?php wp_deregister_script('jquery'); ?> <?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><!-- #content --> </div><!-- #primary --> <hr> フッタ <?php wp_footer(); ?> </body> </html> Index.php wp_footer() jQuery <!DOCTYPE html> <body> </body> </html> </head> <head> xxx/jquery.js jquery
- 55. WordPress と jQuery 出力されたソースをみてみます。 ｊquery.js を読み込むスクリプトが出力されていないことがわかります。 jQuery
- 56. jQueryWordPress と jQuery ここでちょっと検証！ 次のようにしたらどうなる？ <?php wp_deregister_script('jquery'); ?> <?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?> 削除してからセット処理
- 57. jQuery xxx/jquery.js jquery jquery-ui-core WordPress標準に含まれている箱 Wordpress xxx/jquery.ui.core.min.js 削除した箱をセット依頼するとどうなるか？ ? ? wp_head() wp_footer() <!DOCTYPE html> <body> </body> </html> </head> <head> WordPress と jQuery ? ? 追（jquery) 登録スクリプト 存在しない
- 58. WordPress と jQuery 出力されたソースをみてみます。 ｊquery.js を読み込むスクリプトが出力されていないことがわかります。 削除されてるので当然な結果です。 jQuery
- 59. jQueryWordPress と jQuery 既にwp_head() を使って jQuery が 読み込まれている。 <script type='text/javascript' src=/slideshow/wp-jquery/21528181/& このjQuery を変更したいな??? http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
- 60. jQueryWordPress と jQuery wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'); wp_enqueue_script('jquery' , スクリプトのパス); 第2パラメータにスクリプトへのパスを指定します。同じ箱の名前がなければ新しく作りセットします。 既に同じ名前の箱があれば、既存の箱（※パスを上書きしない）でセットします。 追（jquery , パス)
- 61. WordPress と 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> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_enqueue_script('jquery' , jquery.jsの新パス); ?> <?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><!-- #content --> </div><!-- #primary --> <hr> フッタ <?php wp_footer(); ?> </body> </html> Index.php wp_footer() jQuery <!DOCTYPE html> <body> </body> </html> </head> <head> jquery.jsのパス jquery
- 62. WordPress と jQuery jQuery 変わってない！ なぜ？ jQueryのスクリプトパスをみてください。wp-includeからになっています。 つまり、WordPress標準のｊQueryです。なぜ新パス変わっていないのでしょう。
- 63. jQuery xxx/jquery.js jquery jquery-ui-core WordPress標準に含まれている箱 Wordpress xxx/jquery.ui.core.min.js jqueryという名前の箱は既にあるので新しく作ることはできません。 既存の箱が使われます。 ? ? wp_head() wp_footer() <!DOCTYPE html> <body> </body> </html> </head> <head> WordPress と jQuery ? ? 追（jquery , ●●●) 登録スクリプト 既にjqueryという 名前の箱はある ｘ
- 65. jQuery xxx/jquery.js jquery jquery-ui-core WordPress標準に含まれている箱 Wordpress xxx/jquery.ui.core.min.js jqueryという名前の箱が既にあるなら、削除しちゃえばいい！そうすれば同じ名前の箱がありません。 ? ? wp_head() wp_footer() <!DOCTYPE html> <body> </body> </html> </head> <head> WordPress と jQuery ? ? 追（jquery , ●●●) 登録スクリプト jQueryという名前の 箱がなければいい 削
- 66. WordPress と jQuery まず、wp_deregister_script('jquery') を記述して既存のjqueryという名前の箱を削除します。 そうすれば wp_enqueue_script('jquery' , jquery.jsの新パス) で新しい箱が作れます。 wp_head() <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_deregister_script('jquery'); ?> <?php wp_enqueue_script('jquery' , jquery.jsの新パス); ?> <?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><!-- #content --> </div><!-- #primary --> <hr> フッタ <?php wp_footer(); ?> </body> </html> Index.php wp_footer() jQuery <!DOCTYPE html> <body> </body> </html> </head> <head> xxx/jquery.js jquery jquery.jsの新パス jquery
- 67. WordPress と jQuery 出力されたソースをみてみます。 jQueryの読込先が http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js に変わっているのがわかります。 jQuery
- 68. jQueryWordPress と jQuery アコーディオンを使ったUIを作りたいな??? jQuery UI を読み込んでみよう！ http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
- 69. jQueryWordPress と jQuery ポイント jQuery UI は jQuery本体に依存するライブラリです。 ｊQuery本体がなければ動作しません。 jqueryuiさんは新人さんでまだ一人では何もできません。なのでjqueryさんを頼ることにしました。 jqueryuiさんは必ずjqueryさんと一緒に行動します。そして頼れるjqueryに先導してもらいます。 頼りがいのあるjqueryさんが先です。 追（jqueryui , ●●, jquery)
- 70. jQuery jquery-ui-core xxx/jquery.ui.core.min.js ? ? Wordpress wp_head() wp_footer() <!DOCTYPE html> <body> </body> </html> </head> <head> WordPress と jQuery ? ? 追（jqueryui , ●●● , jquery ) 登録スクリプト xxx/jquery.js jquery ｊQuery UI はjQueryをベースとしたライブラリなので、jQueryと一緒になります。関連としてjQueryを設定しておきます。 なお jQuery UIはWordPressに標準で準備されていますが、今回はjqueryuiという名前の箱で新規に作ります。 関
- 71. jQueryWordPress と jQuery 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)
- 72. WordPress と jQuery 関連でjqueryを指定しているので、jqueryui の箱をセットするときに一緒にjqueryもセットされます。 jqueryの箱の方が先にセットされます。jQuery本体が先に読まれるので動作に問題はありません。 wp_head() <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_enqueue_script('jqueryui' ,●●. array('jquery')); ?> <?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><!-- #content --> </div><!-- #primary --> <hr> フッタ <?php wp_footer(); ?> </body> </html> Index.php wp_footer() jQuery <!DOCTYPE html> <body> </body> </html> </head> <head> jquery-ui.min.jsのパス jqueryui jquery.jsのパス jquery
- 73. WordPress と jQuery 出力されたソースをみてみます。 jQuery UI だけでjQueryの読込みも行われていることがわかります。 jquery.js が先で jquery-ui.min.js が後に読込まれています。 jQuery
- 74. jQueryWordPress と jQuery ここでちょっと検証！ 次のようにしたらどうなる？ <?php wp_enqueue_script( 'jqueryui' , '●●●/jquery-ui.min.js', array('jquery') ); ?> <?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?>
- 75. jQueryWordPress と jQuery <?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 jquery.jsのパス jquery 無視 同じ箱では重複セットはできません。2度目以降は無視されます。
- 77. jQueryWordPress と 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 の順番になっているようにみえますがどうなるでしょうか。
- 78. WordPress と jQuery jQuery 関連指定の威力すごいですね。優先順位がきちんと維持されています。 トラブルを減らすためにも関連指定はぜひしといてください。
- 80. jQueryWordPress と jQuery 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
- 81. jQueryWordPress と jQuery 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 注目
- 82. jQueryWordPress と jQuery wp_enqueue_script の おまけ2
- 83. jQueryWordPress と jQuery 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> 注目
- 84. jQueryWordPress と jQuery $handle スクリプトに使われるハンドル名 $src スクリプトのURL $deps このスクリプトと関連（依存）するスクリプトのハンドル名 $ver スクリプトのバージョン $in_footer wp_footer() 位置ならtrue パラメータ wp_enqueue_script http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Parameters
- 86. WordPress と jQuery jQuery <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <script src=/slideshow/wp-jquery/21528181/"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> <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><!-- #content --> </div><!-- #primary --> <hr> フッタ <?php wp_footer(); ?> </body> </html> Index.php wp_enqueue_script難しい 一度も使わないなら 直接書いても問題ないよね？ 注目
- 87. WordPress と jQuery jQuery ほら！ソースも問題ないし jQueryで記述した処理も問題ない ※ <script>$(function(){alert(jQuery().jquery);});</script> ｊQueryのバージョンを表示する。
- 88. jQueryWordPress と jQuery ??? そして数日後 ブラッシュアップ したいな！ 何か見た目良くするプラグイン探そう！ ってことになったら???
- 89. WordPress と jQuery jQuery そのプラグインが jQueryを使ってたりしたら??? このプラグインをインストールして有効にします。jQueryを使うプラグインです。
- 90. WordPress と jQuery jQuery プラグインがjQueryを使い、wp_head() に jquery.jsを読み込むスクリプトが挿入されると厄介！ ｊQueryの二重読み込みになり処理が重くなります。さらに異なるバージョンで上書きされて動作に影響ないですか？
- 91. WordPress と jQuery jQuery $(function() ??? に注目！ WordPress 標準の jQueryで上書きされてのになぜ $関数が使えるの？ jQuery.noConflict(); の意味覚えていますか？上書きされる前の $関数の意味に戻すことです。 WordPress標準のjQueryで上書きされる前の$関数の意味って今回は何？ 直前なので ｊQuery1.8.1(直書き） が定義した $関数です。 試しに $(function() { alert($().jquery);}); とするとアラート画面に 1.8.1 と表示されます。 $関数使ったところは1.8.1のjQurery , jQuery関数使ったところは1.91のjQuery。どんな動作するかは全くわかりませんｗ 注目
- 93. WordPress と jQuery jQuery <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_deregister_script('jquery'); ?> <script src=/slideshow/wp-jquery/21528181/"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> <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><!-- #content --> </div><!-- #primary --> <hr> フッタ <?php wp_footer(); ?> </body> </html> こんな方法でOK？ 当初はｊQueryに依存するプラグインを使う予定はなかった。万が一 将来にそんなプラグインを使うとトラブル起こす可能性が あるから最初から wp_deregister_script で削除しておこう！ さてどうなるでしょう？
- 94. WordPress と jQuery jQuery ん？ 直った気がする??? ｊQueryのバージョンも1.8.1に戻ってます。 jQueryも二重に読み込まれていません。 これでOKな気がするけど????
- 95. jQueryWordPress と jQuery wp_deregister_script('jquery'); なし wp_deregister_script('jquery'); あり jquery.js以外も消えた！ WP jQuery Lightbox は、wp_footer() に挿入されるプラグインでした。 wp_deregister_script('jquery'); で jquery.js の読み込みだけ消したのになぜ他の箇所まで表示されなくなったのでしょう。
- 96. jQueryWordPress と jQuery 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がいなくなりました。一人で行動できないのでまとめて表示されなくなりました。
- 97. jQueryWordPress と jQuery <?php wp_deregister_script('jquery'); ?> <?php wp_enqueue_script('jquery' , jquery.jsの新パス); ?> 結局、解決策は削除して wp_enqueue_script追加
- 98. まとめ Twenty Thirteen jQuery WordPress本体のjQueryはコンフリクト対策されているので 気をつけましょう。 テーマに直接スクリプトを記述するのではなく、 wp_deregister_script、wp_enqueue_script を極力使いましょう。 関連（依存）にあるスクリプトがある場合は、しっかり関連を 指定しましょう。WordPressが順序を調整してくれます。 ｊQqueryの動作がおかしくなったら wp_head、wp_footer の 表示場所を意識すると解決が早いかもしれません。 ? ? ? ?
- 99. おわり jQuery ご静聴ありがとうございました。 Twitter : as.chachamaru : @as_chachamaru Facebook