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

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

Usage&Parameters

<?php wp_enqueue_script( 'handle', 'src', 'deps', 'ver'); ?> 
handle(string)
スクリプトの名前(下記参照)
src(string)(Optional)
WordPressのルートディレクトリからのパス。wordpressで通常使われてないスクリプトを使用する際に必須。
例t:/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の場合

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

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

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

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

wp_enqueue_script('colorpicker');

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

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

トリガーとピッカーのDIV

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

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

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

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

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

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

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

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