[WP]wordpress付属のJavascriptを使用する

wordpressにはwp-includeのjsディレクトリにprototypeやjQuery等のライブラリーが色々入っている。

テーマやプラグインでこれらを使用出来るようheadにscriptタグを挿入するにはwp_enqueue_script()を使用します。
独自に作成したjsファイルや、プラグインやテーマに同封したjsファイルにも使えるので便利。

Usage&Parameters

handle(string)

スクリプトの名前（下記参照）

src(string)(Optional)

WordPressのルートディレクトリからのパス。wordpressで通常使われてないスクリプトを使用する際に必須。
例ｔ：/wp-includes/js/scriptaculous/scriptaculous.js

deps(array)(Optional)

handleで設定したスクリプトが依存しているスクリプトを配列で設定する。
（LightBoxとprototypeの関係のように、スクリプトがロードされる前に読み込んでおかなければならないスクリプトのこと）
wordpressで通常使われてないスクリプトを使用する際に必須。デフォルトはfalse。

ver (string) (Optional)

スクリプトのバージョンナンバー。デフォルトはfalse。
?ver=1.6のような形式でURIに付属される。キャッシュにかかわらず正しいバージョンがクライアントに送られるのを保証する。

Wordpressのデフォルトスクリプトに含まれるものとそのハンドル名

Script Name	Handle
Docking Boxes	dbx
Fade Anything Technique	fat
Simple AJAX Code-Kit	sack
QuickTags	quicktags
ColorPicker	colorpicker
Tiny MCE	tiny_mce
WordPress Tiny MCE	wp_tiny_mce
Prototype Framework	prototype
Autosave	autosave
WordPress AJAX	wp-ajax
List Manipulation	listman
Scriptaculous Root	scriptaculous-root
Scriptaculous Builder	scriptaculous-builder
Scriptaculous Drag & Drop	scriptaculous-dragdrop
Scriptaculous Effects	scriptaculous-effects
Scriptaculous Slider	scriptaculous-slider
Scriptaculous Controls	scriptaculous-controls
Scriptaculous	scriptaculous
Image Cropper	cropper
SWFUpload	swfpload
jQuery	jquery
ThickBox	thickbox

Usage

scriptaculousの場合

PLAIN TEXT

PHP:

1. <?php wp_enqueue_script('scriptaculous'); ?>

scriptaculousに依存するスクリプトをプラグインで使用する場合

PLAIN TEXT

PHP:

1. <?php wp_enqueue_script('newscript',
2. '/wp-content/plugins/someplugin/js/newscript.js',
3. array('scriptaculous'),'1.0' ); ?>

デフォルトテーマのヘッダ画像の色設定で使われてるカラーピッカーの場合

PLAIN TEXT

PHP:

1. wp_enqueue_script('colorpicker');

javascriptでColorPickerのインスタンス作成。
windowを入れない場合はピッカーのDIVかwrite()が必要。

PLAIN TEXT

JavaScript:

1. //ヘッダに
2. var cp = new ColorPicker('window'); //ポップアップウィンドウ
3. var cp = new ColorPicker();　//DIV
4. //DIVなら適当な場所に▼を書くとcolorPickerDivが入る
5. <script type="text/javascrip">cp.writeDiv()</script>

トリガーとピッカーのDIV

PLAIN TEXT

HTML:

1. <A HREF="#" onClick="cp.show('pick');return false;" NAME="pick" ID="pick">Pick</A>
2. writeDiv()の代わりに直接書いてもいい
3. <div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;visibility:hidden;"></div>

選択した色コードをテキストエリアに追加したいという場合には以下どちらかの方法を取る

pickColor()でvalueを変更する場所を指定

PLAIN TEXT

JavaScript:

1. function pickColor(color) {
2.     field.value = color;
3. }

fieldはコードを入れたいテキストエリアを適当に。

またはトリガーを次のようにする

PLAIN TEXT

HTML:

1. <a href="#" onclick="cp.select(document.forms[0].color,'pick');return false;" name="pick" id="pick">Pick</A>

select()は、前の引数が選択したカラーコードの表示先、後の引数がアンカー名。
サンプルの場合だと最初のformにあるname="color"のinputという意味。