Movatterモバイル変換

WordPress と jQuery2013/05/19 瀬戸貴弘

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

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

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

WordPress本体に組み込まれているｊQueryhttp://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>

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

WordPress本体に組み込まれているｊQueryGoogle Chrome　の Developer Tools でみてみると　Javascript　エラーになっています。jQuery'＄' は関数ではない！というエラーです。

WordPress本体に組み込まれているｊQueryFirefox の firebug でみると　'$' は定義されていないことがわかります。jQuery注目

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

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

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

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

WordPress本体に組み込まれているｊQuery jQueryｊQueryの'$'関数が使えなくなったら困る！　　　　　　　どうしたらいいの？

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

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

WordPress本体に組み込まれているｊQuery jQuery【対策2】 (function($) { ・・・・・ })(jQuery); で囲みます。　マウスオーバで文字が赤く変わることが確認できます。(function($) {$(function(){$("p").mouseover(function () {$(this).css("color","red");});});})(jQuery);$(function(){$("p").mouseover(function () {$(this).css("color","red");});});

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

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

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

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

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

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

クイズしてみよう！ jQuery【問題】みなさんで問題を解いてみましょう！あAいBうCえDおE文字の箱文字しゃべる君追（A)追（B）追（C）削（A）追（D）削（C）なんとしゃべるでしょうか？

クイズしてみよう！ jQuery【解答】おE文字の箱文字しゃべる君追（A)追（B）追（C）削（A）追（D）削（C）DえうCいBあAいえ

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

クイズしてみよう！ jQuery【問題】みなさんで問題を解いてみましょう！あAいBうCえDおE文字の箱文字しゃべる君追（A)追（E,た）追（F,さ）削（A）追（A,け）なんとしゃべるでしょうか？

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

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

クイズしてみよう！ jQuery【ルール追加】いBうCえDおE文字の箱文字しゃべる君追（F , き, A)FきあAあA人に例えます。Fさんは新人さんでまだ一人では何もできません。なのでAさんを頼ることにしました。Fさんは必ずAさんと一緒に行動します。そして頼れるAに先導してもらいます。追（F , き, A)　では、FはAと必ず一緒に行動しますのでFとAの箱がセットされます。そして頼りがいのあるAが先です。

クイズしてみよう！ jQuery【問題】みなさんで問題を解いてみましょう！あAいBうCえDおE文字の箱文字しゃべる君追（F , た, A)削（B）追（B , ま）なんとしゃべるでしょうか？

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

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

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

クイズしてみよう！ jQuery【問題】みなさんで問題を解いてみましょう！あAいBうCえDおE文字の箱追（D)追（F,,,1）追（G,つ, E）削（D）追（H,れ,,1)なんとしゃべるでしょうか？文字しゃべる君BOSS0 1Fか

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

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

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></div><hr>フッタ<?php wp_footer(); ?></body></html>jQuerystyle.css Index.php

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></div><hr>フッタ<?php wp_footer(); ?></body></html>Index.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>

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

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

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

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

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)登録スクリプト

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」を使います。

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></div><hr>フッタ<?php wp_footer(); ?></body></html>Index.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>xxx/jquery.jsjquery

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

jQueryWordPress と jQuery既にwp_head() を使って　　　　　jQuery が読み込まれている。<script type='text/javascript' src='http:/●●●/jquery.js?ver=1.9.1'></script>このjQuery 削除したいな・・・

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)登録スクリプト

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');

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></div><hr>フッタ<?php wp_footer(); ?></body></html>Index.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>xxx/jquery.jsjquery

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

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

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)登録スクリプト　存在しない

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

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

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

WordPress と jQuery上記のようにwp_enqueue_script('jquery' , jquery.jsの新パス)　を追加しました。どうなるでしょう。　※ ｊquery.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></div><hr>フッタ<?php wp_footer(); ?></body></html>Index.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>jquery.jsのパスjquery

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

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という名前の箱はあるｘ

jQueryWordPress と jQueryじゃ　どうすればいいか

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という名前の箱がなければいい削

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></div><hr>フッタ<?php wp_footer(); ?></body></html>Index.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>xxx/jquery.jsjqueryjquery.jsの新パスjquery

WordPress と jQuery出力されたソースをみてみます。　jQueryの読込先が http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js に変わっているのがわかります。jQuery

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

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

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.jsjqueryｊQuery UI はjQueryをベースとしたライブラリなので、jQueryと一緒になります。関連としてjQueryを設定しておきます。なお jQuery UIはWordPressに標準で準備されていますが、今回はjqueryuiという名前の箱で新規に作ります。関

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)

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></div><hr>フッタ<?php wp_footer(); ?></body></html>Index.phpwp_footer()jQuery<!DOCTYPE html><body></body> </html></head><head>jquery-ui.min.jsのパスjqueryuijquery.jsのパスjquery

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

jQueryWordPress と jQueryここでちょっと検証！次のようにしたらどうなる？<?php wp_enqueue_script(　　　　　'jqueryui' ,　　　　　'●●●/jquery-ui.min.js',array('jquery')　　　　); ?><?php wp_enqueue_script('jquery'); ?><?php wp_head(); ?>

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度目以降は無視されます。

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

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 の順番になっているようにみえますがどうなるでしょうか。

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

jQueryWordPress と jQuerywp_enqueue_script のおまけ

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

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注目

jQueryWordPress と jQuerywp_enqueue_script のおまけ2

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>注目

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

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

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></div><hr>フッタ<?php wp_footer(); ?></body></html>Index.phpwp_enqueue_script難しい一度も使わないなら直接書いても問題ないよね？注目

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

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

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

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

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。どんな動作するかは全くわかりませんｗ注目

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

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></div><hr>フッタ<?php wp_footer(); ?></body></html>こんな方法でOK？当初はｊQueryに依存するプラグインを使う予定はなかった。万が一将来にそんなプラグインを使うとトラブル起こす可能性があるから最初から　wp_deregister_script で削除しておこう！　さてどうなるでしょう？

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

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

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

jQueryWordPress と jQuery<?php wp_deregister_script('jquery'); ?><?php wp_enqueue_script('jquery' , jquery.jsの新パス); ?>結局、解決策は削除して　　wp_enqueue_script追加

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

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

Movatterモバイル変換

Change Language

WordPressとjQuery

Embed presentation

Recommended

More Related Content

What's hot

Similar to WordPressとjQuery

More from Seto Takahiro

WordPressとjQuery