WordPressとjQuery

2,548
-1

Published on

WordPressでのjQueryの注意点などをまとめました。2013年度 第5回WordBench京都 勉強会で発表した内容です。

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,548
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

WordPressとjQuery

  1. 1. WordPress と jQuery2013/05/19 瀬戸 貴弘
  2. 2. 自己紹介Twenty ThirteenjQuery瀬戸 貴弘Twitter: as.chachamaru: エンジニア: @as_chachamaruFacebook職業Android アプリ (Java )Web アプリ (PHP ・ MySQL)WordPressその他最近の使っている開発言語(仕事・プライベート)
  3. 3. jQueryWordPress本体のjQueryWordPress本体には標準でjQueryが組み込まれており、自由に使える仕組みがあります。デフォルトテーマを含め、WordPress本体のjQueryを使っているテーマもたくさんあります。
  4. 4. 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 を読み込むスクリプトコードがあります。
  5. 5. jQueryWordPress本体に組み込まれているJQueryhttp://XXXX/wp-includes/js/jquery/jquery.js?ver=1.9.1jQueryを読み込んでいるURLをみれば本体のjQueryかどうかわかります。Wp-includes にあるjquery.js は本体のjQueryです。jQueryがうまく動作しないとき、本体のjQueryを使っていることが原因のこともありますので判断できるようにしてください。
  6. 6. jQueryWordPress本体に組み込まれているjQueryWordPress本体のjQueryを使って            簡単なサンプルコードを記述してみるWordPress本体のjQueryを使って動作をみてみます。
  7. 7. WordPress本体に組み込まれているjQueryhttp://semooh.jp/jquery/api/css/css/name%2C+value/jQuery検索すればjQueryのサンプルコードがたくさん見つかります。今回は「jQuery日本語リファレンス」のサンプルコードを実行してみます。
  8. 8. jQueryWordPress本体に組み込まれているjQuery投稿にサンプルコードを記述します。    ※javascript部分は Custom CSS and JavaScript プラグイン使用pタグで囲まれた文字をマウスオーバで赤色にする。$(function(){});
  9. 9. WordPress本体に組み込まれているjQuery jQuery投稿に記述した内容が反映されていることが確認できます。pタグソースには<script type="text/javascript">/* <![CDATA[ */$(function(){$("p").mouseover(function () {$(this).css("color","red");});});/* ]]> */</script>
  10. 10. WordPress本体に組み込まれているjQuery jQueryマウスオーバでテキストが赤くなるはずだがならない! なぜ?pタグで囲まれた文字をマウスオーバしてみます。文字色が赤くなるはずです。しかし、赤くなりませんでした。なぜでしょう?ソースには<script type="text/javascript">/* <![CDATA[ */$(function(){$("p").mouseover(function () {$(this).css("color","red");});});/* ]]> */</script>
  11. 11. WordPress本体に組み込まれているjQueryGoogle Chrome の Developer Tools でみてみると Javascript エラーになっています。jQuery$ は関数ではない!というエラーです。
  12. 12. WordPress本体に組み込まれているjQueryFirefox の firebug でみると $ は定義されていないことがわかります。jQuery注目
  13. 13. WordPress本体に組み込まれているjQueryjQuery のリファレンスでは’$’を使ってくださいと書いてます。しかしWordPress本体のjQueryでは $ が使えないと言われました。jQueryjQuery リファレンス通りに書いたのになぜ動かないんだ!
  14. 14. WordPress本体に組み込まれているjQueryWordPress本体のjQuery と jQuery公式サイトからのjQuery を 比較ツールで差分をみてみました。 ※jQuery ダウンロード : http://jquery.com/download/jQueryWordPress本体 jQuery公式
  15. 15. WordPress本体に組み込まれているjQuery jQueryWordPress本体のjQueryは語尾に次のコードが追加されている。jQuery.noConflict();同じバージョンなので差分がないと思われましたが違いがでてきました。この違いが、WordPress本体のjQueryでは$が使えない原因となります。
  16. 16. WordPress本体に組み込まれているjQuery jQueryhttp://semooh.jp/jquery/api/core/jQuery.noConflict/_/$ がprototype.js など他のライブラリで定義されていればその関数の意味になるし、未定義なら未定義のまま。この関数を実行すると、$関数の動作が先に定義されている動作に戻る。jQuery 日本語リファレンスでは上記のように書かれています。
  17. 17. WordPress本体に組み込まれているjQuery jQueryjQueryの$関数が使えなくなったら困る!       どうしたらいいの?
  18. 18. WordPress本体に組み込まれているjQuery jQueryjQuery という function() が存在することがわかります。 これは $ と同じ意味なので代わりに使えます。注目
  19. 19. WordPress本体に組み込まれているjQuery jQuery【対策1】 $’ を 全て jQuery に置き換えます。 マウスオーバで文字が赤く変わることが確認できます。jQuery(function(){jQuery("p").mouseover(function () {jQuery(this).css("color","red");});});$(function(){$("p").mouseover(function () {$(this).css("color","red");});});
  20. 20. WordPress本体に組み込まれているjQuery jQuery【対策2】 (function($) { ・・・・・ })(jQuery); で囲みます。 マウスオーバで文字が赤く変わることが確認できます。(function($) {$(function(){$("p").mouseover(function () {$(this).css("color","red");});});})(jQuery);$(function(){$("p").mouseover(function () {$(this).css("color","red");});});
  21. 21. WordPress本体に組み込まれているjQuery jQuery【結論】コンフリクト(衝突)対策WordPress本体のjQueryはされてるから気をつけてください。
  22. 22. 息抜き jQueryここで一区切り。リフレッシュ!ここで一区切り。リフレッシュ!ここで一区切り。リフレッシュ!ここで一区切り。リフレッシュ!
  23. 23. クイズしてみよう! jQueryあA【ルール】箱があります。箱には箱固有の識別子が書かれています。左の箱ではAが箱の識別子になります。箱固有の識別子は変更されることはありません。箱には文字が書かれています。左の箱では「あ」になります。
  24. 24. クイズしてみよう! jQueryあA【ルール】いBうCえDおE文字の箱文字しゃべる君文字しゃべる君というおもちゃがあります。右の文字の箱を文字しゃべる君にセットするとセットした順番にしゃべってくれます。
  25. 25. クイズしてみよう! jQuery【ルール】あAいBうCえDおE文字の箱文字しゃべる君追(A)追(C)追(E)削(C)追(B)紙には文字しゃべる君へのセット順番が書かれています。追(A) とは、識別子Aの箱をセットするという意味です。削(C) とは、識別子Cの箱を削除します。
  26. 26. クイズしてみよう! jQuery【ルール】えD文字の箱文字しゃべる君追(A)追(C)追(E)削(C)追(B)いBおEあAうCあおいサンプルです。文字の箱を文字しゃべる君にセットしていきます。箱は削除したら再度使えません。
  27. 27. クイズしてみよう! jQuery【問題】 みなさんで問題を解いてみましょう!あAいBうCえDおE文字の箱文字しゃべる君追(A)追(B)追(C)削(A)追(D)削(C)なんとしゃべるでしょうか?
  28. 28. クイズしてみよう! jQuery【解答】おE文字の箱文字しゃべる君追(A)追(B)追(C)削(A)追(D)削(C)DえうCいBあAいえ
  29. 29. クイズしてみよう! jQuery【ルール追加】いBうCえDおE文字の箱文字しゃべる君追(A , か)追(F , き)ルールを追加します。追(識別子 , 文字)の形式は箱を新しく作ってから、その箱を文字しゃべる君にセットします。 ただし、既に指定した識別子の箱がある場合は新たに箱は作れず既存の箱をセットします。箱の名前の重複は認めません。Aは既にあるので新たに作れないFはないので箱を新たに作れるFきあA
  30. 30. クイズしてみよう! jQuery【問題】 みなさんで問題を解いてみましょう!あAいBうCえDおE文字の箱文字しゃべる君追(A)追(E,た)追(F,さ)削(A)追(A,け)なんとしゃべるでしょうか?
  31. 31. クイズしてみよう! jQuery【解答】いBうCえD文字の箱文字しゃべる君追(A)追(E,た)追(F,さ)削(A)追(A,け)AけFさおEあAおさけ名前Eの箱は既に存在します。なので新しく作れません。既存のEの箱をセットします。名前Fの箱は元々ありませんでした。なので新しく作れます。作ってセットします。名前Aの箱は元々ありましたが削除されています。なので名前Aの箱は存在しないので新しく作ることができます。
  32. 32. クイズしてみよう! jQuery【ルール追加】いBうCえDおE文字の箱文字しゃべる君追(F , き, A)ルールを追加します。追(識別子 , 文字 , 関連)の形式は、依存として必ず一緒でなければならない箱の識別子を指定します。関連先の箱も一緒にセットされそちらが先になります。FきあAあA
  33. 33. クイズしてみよう! jQuery【ルール追加】いBうCえDおE文字の箱文字しゃべる君追(F , き, A)FきあAあA人に例えます。Fさんは新人さんでまだ一人では何もできません。なのでAさんを頼ることにしました。Fさんは必ずAさんと一緒に行動します。そして頼れるAに先導してもらいます。追(F , き, A) では、FはAと必ず一緒に行動しますのでFとAの箱がセットされます。そして頼りがいのあるAが先です。
  34. 34. クイズしてみよう! jQuery【問題】 みなさんで問題を解いてみましょう!あAいBうCえDおE文字の箱文字しゃべる君追(F , た, A)削(B)追(B , ま)なんとしゃべるでしょうか?
  35. 35. クイズしてみよう! jQuery【解答】うCえDおE文字の箱文字しゃべる君追(F , た, A)削(B)追(B , ま)BまFたあたまあAFはAと必ず一緒になります。そしてAの方が先になるので A→F の順で箱がセットされます。Bの箱は元々ありましたが削除されました。新しくBの名前で作っても重複がおこらないので作れます。
  36. 36. クイズしてみよう! jQuery文字しゃべる君 BOSS0 1文字しゃべる君が進化した!並列作業ができるようになりました。0番にセットした文字 + 1番にセットした文字をしゃべってくれます。おEDえうCいBあAあいうえお
  37. 37. クイズしてみよう! jQuery【ルール追加】あAいBうCえDおE文字の箱追(A , , ,1)ルールを追加します。追(識別子 , 文字 , 関連 , 対象) の形式は、文字をセットする対象を選択できるようになりました。対象を指定しない場合は0を対象とします。文字しゃべる君BOSS0 1あA
  38. 38. クイズしてみよう! jQuery【問題】 みなさんで問題を解いてみましょう!あAいBうCえDおE文字の箱追(D)追(F,,,1)追(G,つ, E)削(D)追(H,れ,,1)なんとしゃべるでしょうか?文字しゃべる君BOSS0 1Fか
  39. 39. クイズしてみよう! jQuery【解答】文字しゃべる君BOSS0 1あAいBうC文字の箱追(D)追(F,,,1)追(G,つ, E)削(D)追(H,れ,,1)えDHれFかGつおEおつかれFとHが右側に、それ以外が左側にセットされることがわかれば、後は今までと同じです。
  40. 40. 息抜き jQueryWordPresWordPresに戻ろう!に戻ろう!WordPresWordPresに戻ろう!に戻ろう!
  41. 41. WordPress と jQueryTwenty 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><!-- #content --></div><!-- #primary --><hr>フッタ<?php wp_footer(); ?></body></html>jQuerystyle.css Index.php
  42. 42. WordPress と jQueryIndex.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.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>
  43. 43. WordPress と jQuery jQueryWordPress3.6 β3 + テーマSuper simple でサイト表示させると、こんな感じになります。ソースにjQuery.js が読み込まれてないことにも注目してください。つまり、wp_head() や wp_footer() を記述するだけでは jquery.js は読み込まれません。
  44. 44. jQueryxxx/jquery.jsjqueryjquery-ui-coreWordPress標準に含まれている箱Wordpressxxx/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. 45. WordPress標準のスクリプトを使うには箱の名前を知る必要があります。 【デフォルトScripts】 http://p.tl/xX26WordPress と jQuery jQuery箱の名前 箱の中
  46. 46. jQueryWordPress と jQueryWordPress本体のjQuery を         読み込んでみましょう!<script type=text/javascript src=http:/●●●/jquery.js?ver=1.9.1></script>
  47. 47. jQueryxxx/jquery.jsjqueryjquery-ui-coreWordPress標準に含まれている箱Wordpressxxx/jquery.ui.core.min.jsjqueryという名前の箱を wp_head() の位置にセットします。箱の中のスクリプトが出力されます。・・wp_head()wp_footer()<!DOCTYPE html><body></body> </html></head><head>WordPress と jQuery・・追(jquery)登録スクリプト
  48. 48. xxx/jquery.jsjqueryjquery-ui-coreWordPress標準に含まれている箱Wordpressxxx/jquery.ui.core.min.js・・wp_head()wp_footer()<!DOCTYPE html><body></body> </html></head><head>・・追(jquery)jQueryWordPress と jQuerywp_enqueue_script(jquery);「追」はWordPressでは使えません。代わりに「wp_enqueue_script」を使います。
  49. 49. WordPress と jQuerywp_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.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>xxx/jquery.jsjquery
  50. 50. WordPress と jQuery出力されたソースをみてみます。jquery.js を読み込むスクリプトが出力されていることがわかります。jQuery
  51. 51. jQueryWordPress と jQuery既にwp_head() を使って     jQuery が 読み込まれている。<script type=text/javascript src=http:/●●●/jquery.js?ver=1.9.1></script>このjQuery 削除したいな・・・
  52. 52. jQueryjquery-ui-coreWordPress標準に含まれている箱Wordpressxxx/jquery.ui.core.min.js箱の名前を指定して削除します。・・wp_head()wp_footer()<!DOCTYPE html><body></body> </html></head><head>WordPress と jQuery・・xxx/jquery.jsjquery削(jquery)登録スクリプト
  53. 53. jquery-ui-coreWordPress標準に含まれている箱Wordpressxxx/jquery.ui.core.min.js・・wp_head()wp_footer()<!DOCTYPE html><body></body> </html></head><head>・・xxx/jquery.jsjquery削(jquery)jQueryWordPress と jQuery「削」はWordPressでは使えません。代わりに「wp_deregister_script」を使います。  xxx/jquery.jsjquerywp_deregister_script(jquery);
  54. 54. WordPress と jQuerywp_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.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>xxx/jquery.jsjquery
  55. 55. WordPress と jQuery出力されたソースをみてみます。 jquery.js を読み込むスクリプトが出力されていないことがわかります。 jQuery
  56. 56. jQueryWordPress と jQueryここでちょっと検証!次のようにしたらどうなる?<?php wp_deregister_script(jquery); ?><?php wp_enqueue_script(jquery); ?><?php wp_head(); ?>削除してからセット処理
  57. 57. jQueryxxx/jquery.jsjqueryjquery-ui-coreWordPress標準に含まれている箱Wordpressxxx/jquery.ui.core.min.js削除した箱をセット依頼するとどうなるか?・・wp_head()wp_footer()<!DOCTYPE html><body></body> </html></head><head>WordPress と jQuery・・追(jquery)登録スクリプト 存在しない
  58. 58. WordPress と jQuery出力されたソースをみてみます。 jquery.js を読み込むスクリプトが出力されていないことがわかります。 削除されてるので当然な結果です。jQuery
  59. 59. jQueryWordPress と jQuery既にwp_head() を使って     jQuery が 読み込まれている。<script type=text/javascript src=http:/●●●/jquery.js?ver=1.9.1></script>このjQuery を変更したいな・・・http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  60. 60. jQueryWordPress と jQuerywp_enqueue_script(jquery, http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js);wp_enqueue_script(jquery , スクリプトのパス);第2パラメータにスクリプトへのパスを指定します。同じ箱の名前がなければ新しく作りセットします。既に同じ名前の箱があれば、既存の箱(※パスを上書きしない)でセットします。追(jquery , パス)
  61. 61. WordPress と jQuery上記のようにwp_enqueue_script(jquery , jquery.jsの新パス) を追加しました。どうなるでしょう。 ※ jquery.jsの新パス : http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jswp_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.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>jquery.jsのパスjquery
  62. 62. WordPress と jQuery jQuery変わってない!  なぜ?jQueryのスクリプトパスをみてください。wp-includeからになっています。つまり、WordPress標準のjQueryです。なぜ新パス変わっていないのでしょう。
  63. 63. jQueryxxx/jquery.jsjqueryjquery-ui-coreWordPress標準に含まれている箱Wordpressxxx/jquery.ui.core.min.jsjqueryという名前の箱は既にあるので新しく作ることはできません。 既存の箱が使われます。・・wp_head()wp_footer()<!DOCTYPE html><body></body> </html></head><head>WordPress と jQuery・・追(jquery , ●●●)登録スクリプト既にjqueryという名前の箱はあるx
  64. 64. jQueryWordPress と jQueryじゃ どうすればいいか
  65. 65. jQueryxxx/jquery.jsjqueryjquery-ui-coreWordPress標準に含まれている箱Wordpressxxx/jquery.ui.core.min.jsjqueryという名前の箱が既にあるなら、削除しちゃえばいい!そうすれば同じ名前の箱がありません。・・wp_head()wp_footer()<!DOCTYPE html><body></body> </html></head><head>WordPress と jQuery・・追(jquery , ●●●)登録スクリプトjQueryという名前の箱がなければいい削
  66. 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.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>xxx/jquery.jsjqueryjquery.jsの新パスjquery
  67. 67. WordPress と jQuery出力されたソースをみてみます。 jQueryの読込先が http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js に変わっているのがわかります。jQuery
  68. 68. jQueryWordPress と jQueryアコーディオンを使ったUIを作りたいな・・・jQuery UI を読み込んでみよう!http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
  69. 69. jQueryWordPress と jQueryポイントjQuery UI は jQuery本体に依存するライブラリです。jQuery本体がなければ動作しません。jqueryuiさんは新人さんでまだ一人では何もできません。なのでjqueryさんを頼ることにしました。jqueryuiさんは必ずjqueryさんと一緒に行動します。そして頼れるjqueryに先導してもらいます。頼りがいのあるjqueryさんが先です。追(jqueryui , ●●, jquery)
  70. 70. jQueryjquery-ui-corexxx/jquery.ui.core.min.js・・Wordpresswp_head()wp_footer()<!DOCTYPE html><body></body> </html></head><head>WordPress と jQuery・・追(jqueryui , ●●● , jquery )登録スクリプトxxx/jquery.jsjqueryjQuery UI はjQueryをベースとしたライブラリなので、jQueryと一緒になります。関連としてjQueryを設定しておきます。なお jQuery UIはWordPressに標準で準備されていますが、今回はjqueryuiという名前の箱で新規に作ります。関
  71. 71. jQueryWordPress と jQuerywp_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. 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.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>jquery-ui.min.jsのパスjqueryuijquery.jsのパスjquery
  73. 73. WordPress と jQuery出力されたソースをみてみます。 jQuery UI だけでjQueryの読込みも行われていることがわかります。jquery.js が先で jquery-ui.min.js が後に読込まれています。jQuery
  74. 74. jQueryWordPress と jQueryここでちょっと検証!次のようにしたらどうなる?<?php wp_enqueue_script(     jqueryui ,     ●●●/jquery-ui.min.js,array(jquery)    ); ?><?php wp_enqueue_script(jquery); ?><?php wp_head(); ?>
  75. 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のパスjqueryuijquery.jsのパスjquery無視同じ箱では重複セットはできません。2度目以降は無視されます。
  76. 76. WordPress と jQueryjQueryの読み込まれる位置が変わったり、二重に読み込まれていないことがわかります。jQuery本体を先に読み込まないと動かないライブラリなどは、読み込む順番が大事ですので関連を指定しておけばトラブルを少なくできます。jQuery
  77. 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. 78. WordPress と jQuery jQuery関連指定の威力すごいですね。優先順位がきちんと維持されています。トラブルを減らすためにも関連指定はぜひしといてください。
  79. 79. jQueryWordPress と jQuerywp_enqueue_script のおまけ
  80. 80. jQueryWordPress と jQuerywp_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. 81. jQueryWordPress と jQuerywp_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. 82. jQueryWordPress と jQuerywp_enqueue_script のおまけ2
  83. 83. jQueryWordPress と jQuerywp_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. 84. jQueryWordPress と jQuery$handle スクリプトに使われるハンドル名$src スクリプトのURL$deps このスクリプトと関連(依存)するスクリプトのハンドル名$ver スクリプトのバージョン$in_footer wp_footer() 位置ならtrueパラメータwp_enqueue_scripthttp://codex.wordpress.org/Function_Reference/wp_enqueue_script#Parameters
  85. 85. もうひといき jQueryもう少しで終わるよ。がんばろう!もう少しで終わるよ。がんばろう!もう少しで終わるよ。がんばろう!もう少しで終わるよ。がんばろう!
  86. 86. WordPress と jQuery 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><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.phpwp_enqueue_script難しい一度も使わないなら直接書いても問題ないよね?注目
  87. 87. WordPress と jQuery jQueryほら!ソースも問題ないしjQueryで記述した処理も問題ない※ <script>$(function(){alert(jQuery().jquery);});</script>   jQueryのバージョンを表示する。
  88. 88. jQueryWordPress と jQuery・・・ そして数日後ブラッシュアップ    したいな!何か見た目良くするプラグイン探そう!ってことになったら・・・
  89. 89. WordPress と jQuery jQueryそのプラグインがjQueryを使ってたりしたら・・・このプラグインをインストールして有効にします。jQueryを使うプラグインです。
  90. 90. WordPress と jQuery jQueryプラグインがjQueryを使い、wp_head() に jquery.jsを読み込むスクリプトが挿入されると厄介!jQueryの二重読み込みになり処理が重くなります。さらに異なるバージョンで上書きされて動作に影響ないですか?
  91. 91. WordPress と jQuery jQuery$(function() ・・・ に注目! WordPress 標準の jQueryで上書きされてのになぜ $関数が使えるの?jQuery.noConflict(); の意味覚えていますか?上書きされる前の $関数の意味に戻すことです。WordPress標準のjQueryで上書きされる前の$関数の意味って今回は何?直前なので jQuery1.8.1(直書き) が定義した $関数です。試しに $(function() { alert($().jquery);}); とするとアラート画面に 1.8.1 と表示されます。$関数使ったところは1.8.1のjQurery , jQuery関数使ったところは1.91のjQuery。どんな動作するかは全くわかりませんw注目
  92. 92. jQueryWordPress と jQueryこのままではいけないので     対策しないと・・・
  93. 93. WordPress と jQuery 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><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?当初はjQueryに依存するプラグインを使う予定はなかった。万が一 将来にそんなプラグインを使うとトラブル起こす可能性があるから最初から wp_deregister_script で削除しておこう! さてどうなるでしょう?
  94. 94. WordPress と jQuery jQueryん? 直った気がする・・・jQueryのバージョンも1.8.1に戻ってます。jQueryも二重に読み込まれていません。 これでOKな気がするけど・・・・
  95. 95. jQueryWordPress と jQuerywp_deregister_script(jquery); なしwp_deregister_script(jquery); ありjquery.js以外も消えた!WP jQuery Lightbox は、wp_footer() に挿入されるプラグインでした。wp_deregister_script(jquery); で jquery.js の読み込みだけ消したのになぜ他の箇所まで表示されなくなったのでしょう。
  96. 96. jQueryWordPress と jQuerywp_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 が削除されたので全て表示されなくなった。pointwp-jquery-lightbox-swipe や wp-jquery-lightbox は 一人では行動できません。 jquery に頼るつもりでした。そのjqueryがいなくなりました。一人で行動できないのでまとめて表示されなくなりました。
  97. 97. jQueryWordPress と jQuery<?php wp_deregister_script(jquery); ?><?php wp_enqueue_script(jquery , jquery.jsの新パス); ?>結局、解決策は削除して  wp_enqueue_script追加
  98. 98. まとめTwenty ThirteenjQueryWordPress本体のjQueryはコンフリクト対策されているので気をつけましょう。テーマに直接スクリプトを記述するのではなく、wp_deregister_script、wp_enqueue_scriptを極力使いましょう。関連(依存)にあるスクリプトがある場合は、しっかり関連を指定しましょう。WordPressが順序を調整してくれます。jQqueryの動作がおかしくなったら wp_head、wp_footer の表示場所を意識すると解決が早いかもしれません。・・・・
  99. 99. おわり jQueryご静聴ありがとうございました。Twitter: as.chachamaru: @as_chachamaruFacebook
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×