WordpressでjQueryを使ってみる

公開日| 2012年9月18日   更新日| 2012年10月31日   コメントはありません。

今回は、Wordpressで jQuery を使ってみます。

jQueryは、JavaScript のライブラリの一つで、、JavaScriptとHTMLの相互作用を強化することができます。
例えば、ページデザイン上で アニメーション効果やエフェクト効果などが良く見える形で利用されているところでしょう。
その他にもAjax(JavaScriptを使ってウェブブラウザ内で非同期通信とインターフェイスの構築などを行う)なども技術者には、有名なところでしょう。

Wordpressの管理画面では、普通にjQueryが用いられています。また、(自分で意識しない限りにおいて)デフォルトでjQueryのライブラリは、読み込まれています。
Wordpressで出力したソースコードを見てみてください。

...
<head profile="http://gmpg.org/xfn/11">
...
<script type='text/javascript' src='http://wordpress-setting.info/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
...
</head>
...

と、上記の感じで読み込まれているはずです。
もし読み込まれていないなら、テーマの header.php (ヘッダ情報を生成するソース)などに以下のコードがあるか確認しましょう。

...
<head profile="http://gmpg.org/xfn/11">
...
<?php wp_head(); ?>
...
</head>
...

もしもコード上記のphpコードが埋め込まれていないなら、埋め込んでおきます。以降は、デフォルトでjQueryのライブラリが読み込まれているものとして解説します。

まずは、jQuery を使ってみる

Wordpressで jQuery を使う場合、先のようにデフォルトの状態で jQueryのライブラリが読み込まれていますから、簡単に利用することができます。

以下は、その例です。単純に入力された2つの数値を足し算して結果を表示しているだけです。

<input type="text" id="p1" /> + <input type="text" id="p2" /> = <span id="ans"></span> <input type="button" id="answer" value="答え"/>
<script type="text/javascript">
<!--
jQuery(function(){
	jQuery("#answer").click(function(){
		var val1 = parseInt(jQuery("#p1").val());
		var val2 = parseInt(jQuery("#p2").val());
		if(!isNaN(val1) && !isNaN(val2)){
			jQuery("#ans").html('<font color="blue">'+(val1+val2)+'</font>');
		} else {
			jQuery("#ans").html('<font color="red">Error</font>');
		}
	});
});
//-->
</script>  

実施例

+ =

jQuery の良さというか らしさというか、$関数 が使えないことに着目してください。
一般的にjQuery らしく上記のソースコードを記述すれば、以下のようになるでしょう。(でも動きませんよ

<input type="text" id="p1" /> + <input type="text" id="p2" /> = <span id="ans"></span> <input type="button" id="answer" value="答え"/>
<script type="text/javascript">
<!--
$(function(){
	$("#answer").click(function(){
		var val1 = parseInt($("#p1").val());
		var val2 = parseInt($("#p2").val());
		if(!isNaN(val1) && !isNaN(val2)){
			$("#ans").html('<font color="blue">'+(val1+val2)+'</font>');
		} else {
			$("#ans").html('<font color="red">Error</font>');
		}
	});
});
//-->
</script>  

つまりは、
jQuery$ へ変換しただけですが、
これでは、動作しないのが、WordpressでjQueryを使うときに、これが一番やっかいな点です。

Wordpressでデフォルトで読み込んでいるjQueryのライブラリをテキストエディタなどで見てみてください。最後の行に、以下のコードが記述されているはずです。

...
jQuery.noConflict();
noConflict :
多くのJavaScriptライブラリはjQueryと同じように、関数名や変数名に$を使用します。 jQueryの場合、$はちょうどjQueryのエイリアスですので、すべての機能は、$を使用しなくても利用可能です。 我々は、jQueryと一緒に別のJavaScriptライブラリを使用する必要がある場合、$.noConflict() を呼び出して $を他のライブラリに制御を戻すことができます。

つまりは、$ を使えなくしているんですね。
MooTools や prototype.js などのJavaScriptライブラリも同じように $ を使います。そのため、このような $ を使う複数のライブラリを同時に使う場合は、noConflict を用いて競合を回避することができるわけです。

jQuery で $関数を使うには

先のとおり、WordpressのデフォルトのjQueryライブラリを読み込んでは、$関数 が使えません。 そのため、$関数を 使うには、カプセル化(隠蔽)が最も有効な手立てだと思います。
もしくは、他の $ を使うJavaScriptライブラリを絶対に使わない(jQueryしか使わない)という条件があれば、 Wordpress提供のデフォルトのjQuery ライブラリを読み込まずに、一般に使用されているjQuery ライブラリ( noConflictを実施していない )を読み込むことで解消することができます。

それぞれの方法を簡単に解説しておきます。

カプセル化(隠蔽)を利用する

カプセル化(隠蔽)は、モジュール化とも呼ばれているみたいですが、これって本当?・・・それはともかく、 カプセル化はオブジェクト指向の基本的な考え方なんですが、簡単に説明すると内部情報(属性やメソッドなど)へ直接できないようにすることが主な目的です。

今回の $ を使いたいがために使うのは、本来の意図とちょっとずれている感じもしますが、うまく使えるので、かなりのサイトで解決手段の一つとして上げられています。

色々説明するより、例を見た方が早いと思いますので、以下に例を記載してみました。
以下は上記の$関数を利用した例をカプセル化した例になります。

<input type="text" id="p1" /> + <input type="text" id="p2" /> = <span id="ans"></span> <input type="button" id="answer" value="答え"/>
<script type="text/javascript">
<!--
(function($){
 
$(function(){
	$("#answer").click(function(){
		var val1 = parseInt($("#p1").val());
		var val2 = parseInt($("#p2").val());
		if(!isNaN(val1) && !isNaN(val2)){
			$("#ans").html('<font color="blue">'+(val1+val2)+'</font>');
		} else {
			$("#ans").html('<font color="red">Error</font>');
		}
	});
});
 
})(jQuery);
//-->
</script>  

単純に、
(function($){})(jQuery); で囲めばOKです。

理屈は簡単で、
function($){} : 関数定義しています。
この関数を更に() で括り、(jQuery) として引数にjQueryを渡して先に定義した関数を実行しています。

つまりは、$ という名前の引数で動作する関数を定義して、その引数にjQueryを渡しているに過ぎません。

つらつらと並べて簡単に書くことができるのは、jQuery らしいですね。jQueryじゃなくって ただのJavaScriptの機能ではありますが・・・。

WordPressのjQuery を使わない

WordpressのjQuery を使わないようにし、一般的に使用されているjQueryライブラリをGoogleからダウンロードし読み込むようにします。

jQuery のバージョンは、Wordpressのものと 合わせておくようにしましょう。変なバージョン不一致による問題を回避するとともに、問題が発生したときの対応が楽です。

最も簡単な方法は、
以下のように headタグの最終行にでも 固定的に追加することで読み込むことはできます。
( あくまで 使用しているテーマのheader.php に記述してあげます。)

...
<head profile="http://gmpg.org/xfn/11">
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
...

ただし、これでは、Wordpressのデフォルトで読み込むjQueryも読み込まれますから無駄ですね。
そこで、以下のようにWordpressのAPIを使うことで、二重に読み込むことを回避することができます。
( あくまで 使用しているテーマのheader.php に記述してあげます。)

...
<head profile="http://gmpg.org/xfn/11">
...
<?php
//	jquery の読み込みを削除する
wp_deregister_script('jquery');
//	jquery の新しい読み込みファイル(URL)を指定し登録する
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1');
//	最後にヘッダ情報を展開する
wp_head(); 
?>
...
</head>
...

上記のイメージで実行(展開)した場合、以下のようなコードが展開されるはずです。

...
<head profile="http://gmpg.org/xfn/11">
...
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
...
</head>
...

jQueryは、高度なユーザインターフェイスを作成するのに非常に便利なJavaScriptライブラリです。 Wordpressの色々なプラグインでも利用されている場合があります。その際、うまく動作しない場合がありますが、 ほとんどの場合、先のMooTools や prototype.js などの 他JavaScriptライブラリとの競合が問題になることが多いです。

上記の内容が理解できていると基本的なjQueryの環境の問題は、回避できると思いますので、是非、理解しておきましょうね。


コメント

口コミ・評判を投稿 :

ブラウザの JavaScriptが無効となっている場合、コメントの投稿はできません。
コメントを投稿するには、JavaScriptを有効にしてください

お名前 *

メールアドレス *
(口コミ・評判欄には、表示されませんが入力が必要です。)

サイトアドレス



  • はてなブックマークへ追加する
  • Facebookでシェアする
  • twitter でつぶやく
  • Google Plusでシェアする
  • Pocketでシェアする
ページトップへ