jQuery の使用
jQuery スクリプトは、WordPress の Web ページを受信した後、ユーザーのブラウザー上で実行されます。基本的な jQuery ステートメントには2つの部分があります: コードが適用される HTML 要素を決定するセレクター、そして、コードが何をするか、何に反応するかを決定するアクションまたはイベントです。基本的なイベントステートメントは、次のようになります:
jQuery.(selector).event(function);
セレクターで選択された HTML 要素で、マウスクリックなど、イベントが発生した際、最後の括弧の中で定義された関数が実行されます。
以下のコード例はすべて、この HTML ページの内容にもとづいています。ファイル myplugin_settings.php で定義されたプラグインの管理画面上に表示されると仮定します。各タイトルの横にラジオボタンがある、シンプルなテーブルです。
<form id="radioform">
<table>
<tbody>
<tr>
<td><input class="pref" checked="checked" name="book" type="radio" value="Sycamore Row" />Sycamore Row</td>
<td>John Grisham</td>
</tr>
<tr>
<td><input class="pref" name="book" type="radio" value="Dark Witch" />Dark Witch</td>
<td>Nora Roberts</td>
</tr>
</tbody>
</table>
</form>
出力は、設定ページで次のように表示されます。
AJAX の記事で、ユーザーの選択を usermeta に保存し、選択されたタイトルでタグ付けされた投稿の数を追加する AJAX 交換を構築します。あまり実用的なアプリケーションではありませんが、すべての重要なステップを説明しています。jQuery のコードは、外部ファイルに置くか、<script> ブロックの中でページに出力できます。PHP から値を渡すには特別な注意が必要ですので、ここでは外部ファイルのバリエーションに焦点を当てます。その方が便利だと思われる場合は、同じコードをページに出力できます。
セレクターとイベント
セレクターは CSS セレクターと同じ形式です: .class または #id。もっと多くの形式がありますが、よく使うのはこの2つです。この例では、クラス .pref を使用します。また、イベントはたくさんありますが、その中でもよく使うのは ‘click’ でしょう。この例では、‘change’ を使ってラジオボタンの選択を捕捉します。jQuery のイベントの名前は、JavaScript のイベントとは多少異なることが多いので、注意してください。ここまでで、空の無名関数を追加すると、例のステートメントは次のようになります:
$.(".pref").change(function(){
/*do stuff*/
});
このコードは、”pref” クラスの要素が変更されたときに「何かをします」。